提交表格后留下

我有3个按钮点击每个按钮，特定的提交表单将被显示。我的问题是提交任何形式的消息后显示“成功”，但它返回到第一个form.i希望窗体留在当前窗体本身。我可以做这个。请帮助。
这里是我的代码：提交表格后留下

<html> 
    <body> 
     <button type="button" id="incbutton" > Report1</button> 
     <button type="button" id="dthbutton" > Report2</button> 
     <button type="button" id="negbutton" > Report3</button> 

     <script type="text/javascript"> 
     $("#incbutton").click(function() { 
     $("#form_sub_container1").show(); 
     $("#form_sub_container2").hide(); 
     $("#form_sub_container3").hide(); 
     }) 

     $("#dthbutton").click(function() { 
     $("#form_sub_container2").show(); 
     $("#form_sub_container1").hide(); 
      $("#form_sub_container3").hide(); 
    }) 

    $("#negbutton").click(function() { 
     $("#form_sub_container3").show(); 
     $("#form_sub_container1").hide(); 
      $("#form_sub_container2").hide(); 
    }) 
     </script> 

     <div id="form_sub_container1" style="display: block;"> 

    //report1 functionalities 
    <input type="submit" name="rep1" value="Save" id="btnsize" /></td> 
    </div> 
     <div id="form_sub_container2" style="display: none;"> 

    //report2 functionalities 
    <input type="submit" name="rep2" value="Save" id="btnsize" /></td> 
    </div> 

    <div id="form_sub_container3" style="display: none;"> 

    //report3 functionalities 
    <input type="submit" name="rep3" value="Save" id="btnsize" /></td> 
    </div> 
    </body> 
    <html>

这是我的报告3：

<div id="form_sub_container3" style="display: none;"> 
<?php 


if (isset($_POST['rep3'])) 
{ 
    $daydropdown111=$_POST['daydropdown111']; 
    $monthdropdown111=$_POST['monthdropdown111']; 
    $yeardropdown111=$_POST['yeardropdown111']; 
    $dreport_place=$_POST['dreport_place']; 
    $dreport_address=$_POST['dreport_address']; 
    $dreport_additional=$_POST['dreport_additional']; 
} 
else 
{ 
    $daydropdown111=""; 
    $monthdropdown111=""; 
    $yeardropdown111=""; 
    $dreport_place =""; 
    $dreport_address=""; 
    $dreport_additional=""; 
} 

if (isset($_POST['rep3'])) 
{ 

    $death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']); 
    if ($death) { 
      echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>"; 

     } 

} 


?> 

<div id="color" > 
    <table> 

      <h1 align="center"><p> Report</h1> 


    <form action="" method="POST" id="form_id"> 

     <tr><td>Date </td><td> 
      <select name="daydropdown111" id="daydropdown111"></select> 
      <select name="monthdropdown111" id="monthdropdown111"></select> 
      <select name="yeardropdown111" id="yeardropdown111"></select> 
      <script type="text/javascript"> 
      //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select) 

        populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111") 

      </script> 

     </td></tr> 

     <tr><td></br> Place </td><td></br><select name="dreport_place"id="wgtmsr"> 
     <option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr> 

     <tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr> 

     <tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr> 

     <tr><td></td><td><input type="submit" name="rep3" value="Save" id="btnsiz" /></td></tr> 


    </form> 
    </table></br> 
</div> 
</div>

来源

2015-02-12 jermina

当您提交表单时，页面是否再次加载？或者你使用AJAX？ – void 2015-02-12 06:51:06

是的，它加载，我不希望它发生。我希望它留在同一页上的消息显示。和米不使用AJAX – jermina 2015-02-12 06:58:44

但为此，你需要使用AJAX。 AJAX不会重新加载你的页面，会使用户停留在同一个表单上，并且也会很好地显示消息。 – void 2015-02-12 07:00:18

如果你正在处理的形式在同一个PHP页面，你可以这样做：

<html> 
<body> 
    <button type="button" id="incbutton" > Report1</button> 
    <button type="button" id="dthbutton" > Report2</button> 
    <button type="button" id="negbutton" > Report3</button> 

    <script type="text/javascript"> 
    $("#incbutton").click(function() { 
    $("#form_sub_container1").show(); 
    $("#form_sub_container2").hide(); 
    $("#form_sub_container3").hide(); 
    }) 

    $("#dthbutton").click(function() { 
    $("#form_sub_container2").show(); 
    $("#form_sub_container1").hide(); 
     $("#form_sub_container3").hide(); 
}) 

$("#negbutton").click(function() { 
    $("#form_sub_container3").show(); 
    $("#form_sub_container1").hide(); 
     $("#form_sub_container2").hide(); 
}) 
    </script> 

    <div id="form_sub_container1" style="display:<?= (isset($_POST['rep1']) || (!isset($_POST['rep2']) && !isset($_POST['rep3'])))? 'block':'none'?>"> 

//report1 functionalities 
<input type="submit" name="rep1" value="Save" id="btnsize" /></td> 
</div> 
    <div id="form_sub_container2" style="display: <?= isset($_POST['rep2']) ? 'block':'none'?>"> 

//report2 functionalities 
<input type="submit" name="rep2" value="Save" id="btnsize" /></td> 
</div> 

<div id="form_sub_container3" style="display: <?= isset($_POST['rep3'])? 'block':'none'?>"> 

//report3 functionalities 
<input type="submit" name="rep3" value="Save" id="btnsize" /></td> 
</div> 
</body> 
<html>

因为只有提交的表单将被设置。

来源

2015-02-12 08:56:46

我认为这是很好的选择。考虑到OP不熟悉或决定不使用AJAX的情况。 – amitthk 2015-02-12 09:00:57

你真棒!!!它的工作。谢谢洙much..best答案:) – jermina 2015-02-12 09:14:31

@Fares，但有一个问题，我想我的第一个窗体可见即显示为block.please u能解决这个 – jermina 2015-02-12 10:00:33

-1

下面是结合我已经为你的方案创建一个样本。第一个函数bindFormDisplay就是你如何管理窗体的显示。

第二个函数bindClickHandlers为你管理表单按钮的点击。我取消了提交事件，但在函数内部可以插入表单处理代码。

希望这会有所帮助！

$(document).ready(function(){ 
 
    bindFormDisplay(); 
 
    bindClickHandlers(); 
 
    
 
    }); 
 

 
bindFormDisplay = function(){ 
 
    
 
    $("#incbutton").click(function() { 
 
     $("#form_sub_container1").show(); 
 
     $("#form_sub_container2").hide(); 
 
     $("#form_sub_container3").hide(); 
 
     }); 
 

 
     $("#dthbutton").click(function() { 
 
     $("#form_sub_container2").show(); 
 
     $("#form_sub_container1").hide(); 
 
      $("#form_sub_container3").hide(); 
 
    }); 
 

 
    $("#negbutton").click(function() { 
 
     $("#form_sub_container3").show(); 
 
     $("#form_sub_container1").hide(); 
 
      $("#form_sub_container2").hide(); 
 
    }); 
 
    
 
    } 
 

 

 
bindClickHandlers = function(){ 
 
    
 
    $("#btnsize1").click(function(evt){ 
 
       //fix for IE Bug 
 
      evt = evt || window.event; 
 
      if (evt.preventDefault) 
 
       evt.preventDefault(); 
 
      evt.returnValue = false; 
 
    
 
    //submitting form here 
 

 
     var postData = $('#form_id1').serializeArray(); 
 
    var formURL = $('#form_id1').attr("action"); 
 
    $.ajax(
 
    { 
 
     url : formURL, 
 
     type: "POST", 
 
     data : postData, 
 
     success:function(data, textStatus, jqXHR) 
 
     { 
 
      alert("Form 1 was succesfully submitted."); 
 
      //data: return data from server 
 
      $('#form_sub_container1').html(data); 
 
     }, 
 
     error: function(jqXHR, textStatus, errorThrown) 
 
     { 
 
      //if fails 
 
      alert("some error has occured. sorry"); 
 
      $('#form_sub_container1').html(JSON.serialize(jqXHR)); 
 
     } 
 
    }); 
 
     
 
    
 
    
 
    }); 
 
    
 
    $("#btnsize2").click(function(evt){ 
 
       //fix for IE Bug 
 
      evt = evt || window.event; 
 
      if (evt.preventDefault) 
 
       evt.preventDefault(); 
 
      evt.returnValue = false; 
 
    
 
    
 
      var postData = $('#form_id2').serializeArray(); 
 
    var formURL = $('#form_id2').attr("action"); 
 
    $.ajax(
 
    { 
 
     url : formURL, 
 
     type: "POST", 
 
     data : postData, 
 
     success:function(data, textStatus, jqXHR) 
 
     { 
 
      alert("Form 2 was succesfully submitted."); 
 
      //data: return data from server 
 
      $('#form_sub_container2').html(data); 
 
     }, 
 
     error: function(jqXHR, textStatus, errorThrown) 
 
     { 
 
      //if fails 
 
      alert("some error has occured. sorry"); 
 
      $('#form_sub_container2').html(JSON.serialize(jqXHR)); 
 
     } 
 
    }); 
 
    
 
    }); 
 
    
 
    $("#btnsize3").click(function(evt){ 
 
       //fix for IE Bug 
 
      evt = evt || window.event; 
 
      if (evt.preventDefault) 
 
       evt.preventDefault(); 
 
      evt.returnValue = false; 
 
    
 
    
 
      var postData = $('#form_id3').serializeArray(); 
 
    var formURL = $('#form_id3').attr("action"); 
 
    $.ajax(
 
    { 
 
     url : formURL, 
 
     type: "POST", 
 
     data : postData, 
 
     success:function(data, textStatus, jqXHR) 
 
     { 
 
      alert("Form 3 was succesfully submitted."); 
 
      //data: return data from server 
 
      $('#form_sub_container3').html(data); 
 
     }, 
 
     error: function(jqXHR, textStatus, errorThrown) 
 
     { 
 
      //if fails 
 
      alert("some error has occured. sorry"); 
 
      $('#form_sub_container3').html(JSON.serialize(jqXHR)); 
 
     } 
 
    }); 
 
    
 
    }); 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="incbutton" > Report1</button> 
 
     <button type="button" id="dthbutton" > Report2</button> 
 
     <button type="button" id="negbutton" > Report3</button> 
 

 

 
     <div id="form_sub_container1" style="display: block;"> 
 

 
    //report1 functionalities 
 
    <input type="submit" name="rep1" value="Save" id="btnsize1" /></td> 
 
    </div> 
 
     <div id="form_sub_container2" style="display: none;"> 
 

 
    //report2 functionalities 
 
    <input type="submit" name="rep2" value="Save" id="btnsize2" /></td> 
 
    </div> 
 

 
    <div id="form_sub_container3" style="display: none;"> 
 

 
    //report3 functionalities 
 
    <input type="submit" name="rep3" value="Save" id="btnsize3" /></td> 
 
    </div>

您需要取消提交事件，并就此你处理事情。

$('input[type=submit]').bind('click', function(e) { 
    e.preventDefault() // prevents the form from being submitted 
    clickHandler(); // the custom submit action 
});

而你有三个按钮在这里与相同的Id“btnsize”请纠正。

Here是可以帮助你的例子之一。

来源

2015-02-12 07:02:56 amitthk

我需要用这个吗？这将阻止表单提交 – jermina 2015-02-12 07:14:22

我刚刚添加了绑定代码。您可以简单地使用我发布的代码。将表单处理代码插入相应的按钮点击处理程序中。（例如“form 1”写在'$（“＃btnsize1”）。click（...）'处理程序。如果你需要使用ajax提交表单，你的ajax代码将会进入这些块。 – amitthk 2015-02-12 07:17:33

@ amitthk为什么你使用5行AJAX很容易实现这么复杂的操作呢？ – void 2015-02-12 07:19:12

提交表格后留下

回答

相关问题