提交表格后留下的表格

Question

i have 3 buttons on clicking each button particular submit forms will be displayed. 我点击每个按钮时有3个按钮，将显示特定的提交表单。 my problem is after submitting any form the message is displayed "successful", but it goes back to the first form.i want the form to stay on the current form itself.how can i do this.please help. 我的问题是，提交任何表格后，消息均显示“成功”，但返回到第一个表格。我希望表格保留在当前表格本身上。我该怎么办。请帮忙。
here is my code: 这是我的代码：

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

this my report3: 这是我的报告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>

Answer 1

If you're handling the forms in the same php page you can do something like: 如果您在同一个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>

Because only the submitted form will be set. 因为只会设置提交的表单。

Answer 2

Below is a sample of binding I have created for your scenario. 下面是我为您的场景创建的绑定示例。 The first function bindFormDisplay is just how you are managing the display of form already. 第一个函数bindFormDisplay就是你如何管理表单的显示。

The second function bindClickHandlers manages the clicks of form buttons for you. 第二个函数bindClickHandlers为您管理表单按钮的点击。 I cancels the submit events but inside the functions you can insert your form handling code. 我取消了提交事件，但在函数内部可以插入表单处理代码。

Hope this helps! 希望这可以帮助！

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

You will need to cancel the Submit event and do your processing thereon. 您需要取消提交活动并对其进行处理。

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

And you have three buttons here with same Id "btnsize" please correct that. 你有三个按钮在这里相同的Id“btnsize”请更正。

Here is one of example which might help you. 这是一个可能对您有帮助的例子。

提交表格后留下的表格

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-02-12 08:56:46

解决方案2
-1 2015-02-12 07:02:56

提交表格后留下的表格

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-02-12 08:56:46

解决方案2 -1 2015-02-12 07:02:56

解决方案1
1 已采纳 2015-02-12 08:56:46

解决方案2
-1 2015-02-12 07:02:56