提交之前,我想以模式显示(已创建),汇总他们的选择,而无需保存到数据库中。我在网上找到了一些资源,但对我来说不起作用。
所以这是我的html:
<div id="step-11"> //first choice for the user
<input type="radio" id="theme1" name="cake_theme" value="wedding" onchange="total()" /> Wedding
<input type="radio" id="theme2" name="cake_theme" value="birthday" onchange="total()" /> Birthday
<input type="radio" id="theme3" name="cake_theme" value="dedication" onchange="total()" /> Dedication
</div>
<div id="step-22"> //2nd choice
Other Flavor : <select name="color" id="color_display" onchange="total()" /><option value="red">red</option>
<option value="pink">pink</option>
<option value="blue">blue</option> </select> </div>
</div>
<a href="#reviewchoices" class="portfolio-link" data-toggle="modal" onclick="showReviewOrder()" value="submit" > Submit </a> //trigger to display the data.
为了澄清onchange =“ total()”,在这里我放置了这些选择的数量,这对我来说很有效(位于单独的文件中)。
为我的js(在html的同一页中)
<script type="text/JavaScript">
function showReviewOrder(){
var review = document.getElementById("step-11").value; // I've tried calling the first Div 'step-11' it shows "undefined"
reviewchoices.innerHTML= review; //reviewchoices is the id of my Modal
}
</script>
它显示如下:
如果将其更改为
var review = document.getElementById("theme1").value;
,则会显示“婚礼”,但其他单选按钮又如何呢?我应该再做一个Div吗?
对于我的模态:(我不会包括所有模态代码,直截了当)
<div class="portfolio-modal modal fade" id="reviewchoices" tabindex="-1" role="dialog" aria-hidden="true">
<span id = "display_review"> </span> //where I'll display the user's choices
</div>
希望你能帮助我。提前非常感谢您。
最佳答案
将您的showReviewOrder代码更改为此
function showReviewOrder(){
var review = document.getElementById("step-11");
var selOption=review.querySelector('input[name=cake_theme]:checked').value;
var reviewchoices=document.getElementById("reviewchoices");
reviewchoices.innerHTML= selOption;
}
window.onload = function() {
}
function total() {}
function showReviewOrder() {
var review = document.getElementById("step-11");
var selOption = review.querySelector('input[name=cake_theme]:checked').value;
var reviewchoices = document.getElementById("reviewchoices");
reviewchoices.innerHTML = selOption;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="step-11">
<input type="radio" id="theme1" name="cake_theme" value="wedding" onchange="total()" />Wedding
<input type="radio" id="theme2" name="cake_theme" value="birthday" onchange="total()" />Birthday
<input type="radio" id="theme3" name="cake_theme" value="dedication" onchange="total()" />Dedication
</div>
<div id="step-22">
Other Flavor :
<select name="color" id="color_display" onchange="total()" />
<option value="red">red</option>
<option value="pink">pink</option>
<option value="blue">blue</option>
</select>
</div>
</div>
<a href="#reviewchoices" class="portfolio-link" data-toggle="modal" onclick="showReviewOrder()" value="submit"> Submit </a>
<div id="reviewchoices" tabindex="-1" role="dialog" aria->
<span id="display_review"> </span> /
</div>
希望能帮助到你