表单 - 如何在按钮单击表单上保存页面信息,而不是导航到下一页

时间:2013-08-11 23:32:26

标签: jquery jquery-mobile

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

以上是我的表格代码。现在,创建表单的方式,SAVE和NEXT按钮都导航到下一页。如何阻止我的表单导航到SAVE按钮上的下一页单击

2 个答案:

答案 0 :(得分:1)

你必须使用Ajax,这个问题如下:

$("#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; 
});

答案 1 :(得分:0)

这是一个例子。这会将数据发送到parser.php文件,但不会刷新页面。

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