基於用戶選擇的顯示彙總而不保存在數據庫中

Question

在提交之前，我想在模式（已創建）中顯示彙總其選擇的數據，而不保存到數據庫。我在網上找到了一些資源，但它不適合我。

所以這裏是我的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 = 「總（）」，這就是我把這些選擇的量，這是爲我工作好（位於單獨的文件）。

我的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> 

希望你能幫助我。提前謝謝你。

Answer 1

改變你的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>

希望它可以幫助

Answer 2

$('#myForm').submit(function() { 
 
    $('#display_review').empty() 
 
    var userdata = $(this).serializeArray(); 
 
     jQuery.each(userdata, function(i, field) { 
 
    $("#display_review").append(field.name + " " + field.value + "<br> "); 
 
}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm"> 
 
<input type="radio" name="radioName" value="1" checked /> 1 <br /> 
 
<input type="radio" name="radioName" value="2" /> 2 <br /> 
 
<input type="radio" name="radioName" value="3" /> 3 <br /> 
 
<select name="selectarray"> 
 
    <option value = "1" >1</option> 
 
    <option value = "2" >2</option> 
 
    <option value = "3" >3</option> 
 
    <option value = "4" >4</option> 
 
</select><br /> 
 
<input type="submit" name="submit" value="submit"> 
 
</form> 
 
<span id="display_review"> </span>