Jquery echo out all INPUT values in alert

Question

I've a form and on button submit, how can i echo out all the values within the input tags in alert box?

My code as below:

$(document).ready(function(e){
    $('#divID').on('submit',function(){
    alert($('#divID input').val());
    });
});

`$('#divID input').map(function(){ return this.value }).get().join();` — Rajaprabhu Aravindasamy, Apr 04 '16 at 08:43
Probably duplicate of http://stackoverflow.com/questions/2276463/how-can-i-get-form-data-with-javascript-jquery — 2called-chaos, Apr 04 '16 at 08:45
im trying to use the .val, thanks for all ur input. Appreciated — Origami, Apr 04 '16 at 09:07

score 1 · Answer 1 · answered Apr 04 '16 at 10:06

1

$(document).ready(function(e){
    $('#divID').on('submit',function(){
       $("#divID input").each(function(index){
           alert($(this).val());
       });
    });
});

answered Apr 04 '16 at 10:06

areeb

424
3
9

While this code may answer the question, providing additional context regarding _why_ and/or _how_ it answers the question would significantly improve its long-term value. Please [edit] your answer to add some explanation. – Toby Speight Apr 04 '16 at 12:08

score 0 · Answer 2 · answered Apr 04 '16 at 09:16

Say you have an html form like that:

<form id="myForm">
<input type="text" name="field1" id="field1" />
<input type="text" name="field2" id="field2" />
<input type="text" name="field3" id="field3" />
<input type="text" name="field4" id="field4" />
<input type="button" name="submit" id="submit" value="Submit" />
</form>

The script that should handle things when "submit" is pressed could look like that:

$(document).ready(function(){
    $('#submit').on('click', function(e){
        e.preventDefault //do not submit right away
        var thisFormData = $('#myForm').serialize(); //serialize all form data
        alert(thisFormData); //alert serialized form data
        $('#myForm').submit(); //submit the form after fields/values have been alerted
    });
});

Hope it helps you! T.

score 0 · Answer 3 · answered Apr 04 '16 at 09:56

You can use jQuery .each() to alert all values in input fields one by one like below :

$(document).ready(function(){
    //#submit should be id of your submit button
    $('#submit').on('click', function(e){
        e.preventDefault //stop default form submit
        var thisFormData = $('#myForm').serialize(); //serialize all form data
        $('#submit input').each(function(){
            alert($(this).val(); //alert each input fields value
        });

        $('form#myForm').submit(); //submit the form after alert is completed.
    });
});

$(document).ready(function() {
  //#submit should be id of your submit button
  $('#submit').on('click', function(e) {
   
    //alert only input type=text values
    $('form#myForm input[type="text"]').each(function() {
        console.log($(this).val());//better way is to use console and not alert
        alert($(this).val()); //alert each input fields value
    });

    $('form#myForm').submit(); //submit the form after alert is completed.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" name="field1" id="field1" />
  <input type="text" name="field2" id="field2" />
  <input type="text" name="field3" id="field3" />
  <input type="text" name="field4" id="field4" />
  <input type="button" name="submit" id="submit" value="Submit" />
</form>

Jquery echo out all INPUT values in alert

3 Answers3