提交表格后留下的表格

form to stay after submitting the form

本文关键字：表格 提交      更新时间：2023-09-26

我有3个按钮，点击每个按钮将显示特定的提交表单。我的问题是，在提交任何表单后，消息都显示为"成功"，但它会返回到第一个表单。我希望表单保持在当前表单上。我该如何做到这一点。请提供帮助
这是我的代码：

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

如果您在同一个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>

因为只会设置提交的表单。

下面是我为您的场景创建的绑定示例。第一个函数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"的按钮，请更正。

下面是一个可能对你有所帮助的例子。

相关文章：