CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Poofbrayy
Poofbrayy

Reputation: 21

display summary based on user choices without saving in database

Before submitting it, I would like to display in a modal(already created) summarizing their choices without saving yet to the database. I found some sources in net but it won't work for me.

so here's my 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.

for clarification the onchange="total()" , it's where I put the amount of these choices, which is working good for me (located in separate file).

for my js (It's in the same page of 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>

it displays like this: enter image description here

If I changed it into var review = document.getElementById("theme1").value; it display Wedding but how about the other radio buttons? Should I make another Div ?

for my modal: ( i won't include all the modal codes, getting straight to the point)

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

Hope you could help me out. Thank you so much in advance.

Upvotes: 0

Views: 166

Answers (2)

Vikram Sangat
Vikram Sangat

Reputation: 136

$('#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>

Upvotes: 1

Geeky
Geeky

Reputation: 7496

change your code of showReviewOrder to this

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>

Hope it helps

Upvotes: 1

Related Questions