提交表格後留下

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

提交表格後留下

回答

相關問題