form to stay after submitting the form
Question
i have 3 buttons on clicking each button particular submit forms will be displayed. my problem is after submitting any form the message is displayed "successful", but it goes back to the first form.i want the form to stay on the current form itself.how can i do this.please help.
here is my code:
<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>
this my report3:
<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 answers
solution1
1 ACCPTED 2015-02-12 08:56:46
If you're handling the forms in the same php page you can do something like:
<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>
Because only the submitted form will be set.
solution2
-1 2015-02-12 07:02:56
Below is a sample of binding I have created for your scenario. The first function bindFormDisplay is just how you are managing the display of form already.
The second function bindClickHandlers manages the clicks of form buttons for you. I cancels the submit events but inside the functions you can insert your form handling code.
Hope this helps!
$(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>
You will need to cancel the Submit event and do your processing thereon.
$('input[type=submit]').bind('click', function(e) {
e.preventDefault() // prevents the form from being submitted
clickHandler(); // the custom submit action
});
And you have three buttons here with same Id "btnsize" please correct that.
Here is one of example which might help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
button color stay same after submitting the form
How to stay on same position after submitting an html form?
Getting Jquery code to stay after form has finished submitting
Is there any way to stay on same bootstrap modal after submitting the form?
Form submitting after selection
Form not submitting after validation
Form clears after submitting
Reset Form After Submitting
Ajax form refreshes after submitting
Animation after submitting a form field
Related Tags