Capture HTML Form Data With External JS File

I am trying to create a form on an HTML page (that also has Bootstrap code) and when the user clicks the submit button I want the data to be captured and processed by an external j

Solution 1:

You have to change

<button type="submit" class="btn btn-default" method="POST" onclick="process()">Submit</button>

to

<button type="button" class="btn btn-default" onclick="process()">Submit</button>

Also

function process(){
var q1 = document.getElementById("firstquartergrade").value;
var q2 = document.getElementById("secondquartergrade").value;
var result = q1+q2;
document.getElementById("result").innerHTML = result;
}

to

function process(){
var q1 = parseInt(jQuery("#firstquartergrade").val());
var q2 = parseInt(jQuery("#secondquartergrade").val()); 
var result = q1+q2; 
jQuery('#result').html(result);
}

Solution 2:

You can achieve it using ajax.

Here is small demo your can refer :

Note : Change actionUrl as per your requuirement

test.Html:

    <form action='actionUrl' class='ajax' method='post'>
         <input type='text' name='name' placeholder='Enter Name'/>
         <input type='submit' value='submit'/>
    </form>
    <div id='somediv'></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src='main.js'></script>

Here is global method for ajax.You can use it for all.

Main.js :

    $('form.ajax').on('submit',function(){

    var vForm=$(this),
        url=vForm.attr('action'),
        type=vForm.attr('method'),
        data={};

    vForm.find('[name]').each(function(){
       var vInput=$(this),
       name=vInput.attr('name'),
       value=vInput.attr('value');
       data[name] = value;
     });

     $.ajax({
        url:url,
        type:type,
        data:data,
        success:function(response){
            $('#somediv').html(response);
          } 
     });
     return false;
    });