Javascript 提交表格后留下的表格
我有3个按钮，点击每个按钮，将显示特定的提交表单。我的问题是，在提交任何表单后，消息显示为“成功”，但它会返回到第一个表单。我希望表单保持在当前表单上。我如何才能做到这一点。请帮助。Javascript 提交表格后留下的表格,javascript,html,Javascript,Html,我有3个按钮，点击每个按钮，将显示特定的提交表单。我的问题是，在提交任何表单后，消息显示为“成功”，但它会返回到第一个表单。我希望表单保持在当前表单上。我如何才能做到这一点。请帮助。 这是我的密码： <html> <body> <button type="button" id="incbutton" > Report1</button> <button type="button" id="dt
这是我的密码：
<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>
报告1
报告2
报告3
$（“#增加按钮”）。单击（函数（）{
$（“#表单子容器1”）.show（）；
$（“#表单子容器2”）.hide（）；
$（“#表单子容器3”）.hide（）；
})
$（“#dthbutton”）。单击（函数（）{
$（“#表单子容器2”）.show（）；
$（“#表单子容器1”）.hide（）；
$（“#表单子容器3”）.hide（）；
})
$（“#负按钮”）。单击（函数（）{
$（“#表单子容器3”）.show（）；
$（“#表单子容器1”）.hide（）；
$（“#表单子容器2”）.hide（）；
})
//报告1功能
//报告2功能
//报告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>
下面是我为您的场景创建的绑定示例。bindFormDisplay的第一个功能就是如何管理表单的显示
第二个函数bindClickHandlers为您管理表单按钮的单击。我取消提交事件，但在函数中可以插入表单处理代码
希望这有帮助
$（文档）.ready（函数（）{
bindFormDisplay（）；
bindClickHandlers（）；
});
bindFormDisplay=函数（）{
$（“#增加按钮”）。单击（函数（）{
$（“#表单子容器1”）.show（）；
$（“#表单子容器2”）.hide（）；
$（“#表单子容器3”）.hide（）；
});
$（“#dthbutton”）。单击（函数（）{
$（“#表单子容器2”）.show（）；
$（“#表单子容器1”）.hide（）；
$（“#表单子容器3”）.hide（）；
});
$（“#负按钮”）。单击（函数（）{
$（“#表单子容器3”）.show（）；
$（“#表单子容器1”）.hide（）；
$（“#表单子容器2”）.hide（）；
});
}
bindClickHandlers=函数（）{
$（“#btnsize1”）。单击（函数（evt）{
//修复IE错误
evt=evt | | window.event；
如果（evt.preventDefault）
evt.preventDefault（）；
evt.returnValue=false；
//在此提交表格
var postData=$（'#form_id1'）.serializeArray（）；
var formURL=$（'#form_id1'）.attr（“操作”）；
$.ajax(
{
url:formURL，
类型：“POST”，
数据：postData，
成功：函数（数据、文本状态、jqXHR）
{
警报（“表格1已成功提交”）；
//数据：从服务器返回数据
$（'#form_sub_container1'）.html（数据）；
},
错误：函数（jqXHR、textStatus、errorshown）
{
//如果失败
警报（“发生了一些错误，对不起”）；
$（'#form_sub_container1'）.html（JSON.serialize（jqXHR））；
}
});
});
$（“#btnsize2”）。单击（函数（evt）{
//修复IE错误
evt=evt | | window.event；
如果（evt.preventDefault）
evt.preventDefault（）；
evt.returnValue=false；
var postData=$（'#form_id2'）.serializeArray（）；
var formURL=$（'#form_id2'）.attr（“操作”）；
$.ajax(
{
url:formURL，
类型：“POST”，
数据：postData，
成功：函数（数据、文本状态、jqXHR）
{
警报（“表格2已成功提交”）；
//数据：从服务器返回数据
$（'#form_sub_container2'）.html（数据）；
},
错误：函数（jqXHR、textStatus、errorshown）
{
//如果失败
警报（“发生了一些错误，对不起”）；
$（'#form_sub_container2'）.html（JSON.serialize（jqXHR））；
}
});
});
$（“#btnsize3”）。单击（函数（evt）{
//修复IE错误
evt=evt | | window.event；
如果（evt.preventDefault）
evt.preventDefault（）；
evt.returnValue=false；
var postData=$（'#form_id3'）.serializeArray（）；
var formURL=$（'#form_id3'）.attr（“操作”）；
$.ajax(
{
url:formURL，
类型：“POST”，
数据：postData，
成功：函数（数据、文本状态、jqXHR）
{
警报（“表格3已成功提交”）；
//数据：从服务器返回数据
$（'#form_sub_container3'）.html（数据）；
},
错误：函数（jqXHR、textStatus、errorshown）
{
//如果失败
警报（“发生了一些错误，对不起”）；
$（'#form_sub_container3'）.html（JSON.serialize（jqXHR））；
}
});
});
}
报告1
报告2
报告3
//报告1功能
//报告2功能
//报告3功能
如果在同一个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>
报告1
报告2
报告3
$（“#增加按钮”）。单击（函数（）{
$（“#表单子容器1”）.show（）；
$（“#表单子容器2”）.hide（）；
$（“#表单子容器3”）.hide（）；
})
$（“#dthbutton”）。单击（函数（）{
$（“#表单子容器2”）.show（）；
$（“#表单子容器1”）.hide（）；
$（“#表单子容器3”）.hide（）；
})
$（“#负按钮”）。单击（函数（）{
$（“#表单子容器3”）.show（）；
$（“#表单子容器1”）.hide（）；
$（“#表单子容器2”）.hide（）；
})
提交表单时，页面是否再次加载？或者你在使用AJAX？是的，它会加载，我不希望它发生。我希望它与显示的消息保持在同一页面上。我不使用AJAX，但为此，你需要使用AJAX。AJAX不会