Form - How to save page info on button click on form instead of navigation to next page

Question

<form id="fhome" method="POST" action="Page2.HTML" data-ajax="false">
           <fieldset>
 <div data-role="fieldcontain">
 <label for="DD1" class="select">DD1:</label>
 <select name="PJ" id="PJ">                            

 <option value="Option 1">Option 1</option>
 <option value="Option 2">Option 2</option>

 </select>
                        <br />
                        <br />
                        <label for="DD2" class="select">DD2:</label>
 <select name="Victim" id="Victim">
 <option value="Option 3" >Option 3</option>
 <option value="Option 4">Option 4</option> 
 </select>                        
                       <br />
                        <br />

                         <label for="mode7">Time :</label>
 <input name="mode7" id="mode7" type="text" data-role="datebox" data-options='{"mode":"timeflipbox", "useNewStyle":true}' />                        
                        <br /><br />  
 </div>
 <fieldset class="ui-grid-a">
 <div class="ui-block-a savebtn"><button type="submit" data-theme="d" >Save</button></div>
 <div class="ui-block-b"><button type="submit" data-theme="d" >Next</button></div>
     </fieldset>
 </fieldset>
        </form>

The above is my form code. Right now , the way form is created , the SAVE and NEXT buttons both navigate to next page. How do i prevent my form to navigate to next page on SAVE button click

try this http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — Michael B., Aug 11 '13 at 23:37

score 1 · Answer 1 · answered Aug 11 '13 at 23:49

You must use Ajax , this how for examle:

$("#ui-block-a  input[type='submit']").click(function() {

    var url = "Page2.HTML"; 

    $.ajax({
           type: "POST",
           url: url,
           data: $("#fhome").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; 
});

score 0 · Answer 2 · answered Aug 12 '13 at 10:35

here is an example for you. this will send data to parser.php file but will not refresh the page.

<script language="JavaScript" type="text/javascript">
    function ajax_post(){
        // Create our XMLHttpRequest object
        var hr = new XMLHttpRequest();
        // file thats saves your post data
        var url = "parser.php";
    //form data values
        var name = document.getElementById("txt_name").value;
        var surname = document.getElementById("txt_surname").value;

        var vars = "name="+txt_name+"&surname="+txt_surname;

            hr.open("POST", url, true);
        // Set content type header information for sending url encoded variables in the request
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                var return_data = hr.responseText;
                document.getElementById("status").innerHTML = return_data;
            }
        }
        // Send the data to PHP now... and wait for response to update the status div
        hr.send(vars); // Actually execute the request
        document.getElementById("status").innerHTML = "processing...";
    }
    </script>

Form - How to save page info on button click on form instead of navigation to next page

2 Answers2