HTML form: send data to javascript function

Question

I have a html page. It has a number of forms.

I want a generic function that, after any form is submitted, will take all of the input of that form and send it as JSON to another server.

From what I understand, what I want is the following:

<form enctype="application/json" name="createStudentForm" onsubmit="sendForm()">
    Student ID (must be 3 digit number):
    <input type="text" name="student_id"><br>
    Nickname:
    <input type="text" name="student_nickname"><br>
    <input type="submit">
</form>

And later:

<script>
    function sendForm(){
        console.log('sent form');
    }
</script>

My question is: a) why does my console not log this when I submit? When I test using chrome, the console is empty after sending submit and b), how can I access the form's inputs from inside sendForm()? Do I need to reference that form directly or is there a way to just pass the data to sendForm() when I call it?

You need to stop the form from actually submitting, because when it submits, it will refresh the page and clear the console. Either choose to preserve the console log on page refresh or add return false; to sendForm(). — Michael Coker
– Michael Coker, Commented Feb 3, 2017 at 19:54
@GeorgeJempty - I've heard that some implementations of console.log are async, never actually experienced that my self. Regardless, I dont that is relevant here. — The Dembinski
– The Dembinski, Commented Feb 3, 2017 at 19:56
Use jQuery if you can: https://api.jquery.com/serializeArray/ — Dexygen
– Dexygen, Commented Feb 3, 2017 at 20:09

mcallahan · Accepted Answer · 2017-02-07 13:09:41Z

1

Following up on what Michael said and using a little bit of jquery you can make this work very easily.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
  function sendForm(form){
    console.log('sent form: ' + $(form).serialize());
    return false;
  }
</script>
<body>
<form enctype="application/json" name="createStudentForm" onsubmit="return sendForm(this)">
    Student ID (must be 3 digit number):
    <input type="text" name="student_id"><br>
    Nickname:
    <input type="text" name="student_nickname"><br>
    <input type="submit">
</form>
</body>
</html>

edited Feb 7, 2017 at 13:09

answered Feb 3, 2017 at 21:24

mcallahan

799 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nikoskip · Accepted Answer · 2017-02-03 21:01:51Z

You can try this script:

$(function() {
    var formHandler = function (e) {
        e.preventDefault(); // Avoid form submit
        var data = $(this).serializeArray();
        data = JSON.stringify(data); // To JSON
        console.log(data);
    };
    
    $('form').submit(formHandler);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Form 1
<form>
Field 1: <input name="field1">
Field 2: <input name="field2">
Field 3: <select name="field3">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
<input type="submit">
</form>

<hr>

Form 2
<form>
Field 1: <input name="field1">
Field 2: <input name="field2">
Field 3: <select name="field3">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
<input type="submit">
</form>

<hr>

Form 3
<form>
Field 1: <input name="field1">
Field 2: <input name="field2">
Field 3: <select name="field3">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
         </select>
<input type="submit">
</form>

We attach a submit event to each form of your page and capture the data. If you are going to have a lot of forms on your site, try to attach the event to the body catching the right one (event propagation):

$('body').on('submit', 'form', formHandler);

Collectives™ on Stack Overflow

HTML form: send data to javascript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related