堆棧內存溢出
  簡體   English   中英

提交表格后留下的表格

[英]form to stay after submitting the form

 原文  2015-02-12 06:46:51  5   2    javascript/ html

問題描述

我點擊每個按鈕時有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>

2 個解決方案

解決方案1
 1 已采納  2015-02-12 08:56:46

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

因為只會設置提交的表單。

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

下面是我為您的場景創建的綁定示例。 第一個函數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”請更正。

這是一個可能對您有幫助的例子。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 提交表單后按鈕顏色保持不變 提交html表單后如何保持原樣？ 在表單完成提交后獲取Jquery代碼以保留 提交表格后，有什么辦法可以保留在相同的引導程序模式上？ 選擇后提交表格 驗證后表格未提交 提交后清除表格 提交后重置表格 提交后刷新Ajax表單 提交表單字段后的動畫
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM