[英]form to stay after submitting the form
我点击每个按钮时有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”请更正。
这是一个可能对您有帮助的例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.