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>

When you submit the form the does the page loads again? Or you using AJAX? — void, Feb 12 '15 at 06:51
yes it loads and i dont want it to happen.i want it to stay on the same page with the message displayed.and m not using AJAX — jermina, Feb 12 '15 at 06:58
But for that you need to use AJAX. AJAX will not reload your page, will make the user stay on the same form and will also display the message very nicely. — void, Feb 12 '15 at 07:00
oh i dunno how to do this in ajax so can u please help. or else is there any other way of doing it? — jermina, Feb 12 '15 at 07:02
Yes its pretty easy and you should learn it, Can you please post On of your form HTML? — void, Feb 12 '15 at 07:05
Cool, Just move your PHP Code into three different files which we will be calling using AJAX. Till then let me write some code for you.. — void, Feb 12 '15 at 07:16
Also please avoid giving same `id` to multiple `elements`. I am assuming the `id` of `submit` buttons to be `rep1`, `rep2`, `rep3` — void, Feb 12 '15 at 07:18

Fares M. · Accepted Answer · 2015-02-12T10:18:32.510

1

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.

edited Feb 12 '15 at 10:18

answered Feb 12 '15 at 08:56

Fares M.

1,538
1
17
18

This I think is good alternative. Considering scenario the OP is not familiar with or decides not to use AJAX. – amitthk Feb 12 '15 at 09:00
@Fares but there is one problem i want to make my first form visible i.e display as block.please can u solve this – jermina Feb 12 '15 at 10:00
@jermina codition to show the first form updated. Take a look – Fares M. Feb 12 '15 at 10:19
no this has issues..:( when i submit the 2nd or 3rd form it overlaps with the first one. – jermina Feb 12 '15 at 10:32
sorry it was my code mistake..it works fine thank you again :) – jermina Feb 12 '15 at 10:35
@FaresM. i have a problem in my code.can u please help me?? – jermina Feb 20 '15 at 04:54
@jermina what's your problem? – Fares M. Feb 20 '15 at 07:54
@FaresM. please see this link http://stackoverflow.com/questions/28622750/button-color-stay-same-after-submitting-the-form/28623614#28623614 – jermina Feb 20 '15 at 08:25

score -1 · Answer 2 · edited May 23 '17 at 12:04

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.

where i need to use this? this will prevent the form from submitting — jermina, Feb 12 '15 at 07:14
I just added the binding code. You can simply use the code as I have posted. Insert your form handling code inside the respective button click handlers. (e.g. for "form 1" write it in the `$("#btnsize1").click(...)` handler. If you need to submit the form using ajax, you ajax code will go inside these blocks. — amitthk, Feb 12 '15 at 07:17
@amitthk why you making it so complicated unnecesarily when it is easily achievable with 5 lines of AJAX? — void, Feb 12 '15 at 07:19
@void Complicated really? First of all the binding code is not even inside a Iffy in the first place. Second of all the OP has two separate concerns here - 1. Display of forms. 2. Handling of respective forms. I have only separated the concerns to make it easy for OP. — amitthk, Feb 12 '15 at 07:21
it is not submitting my form.values are not inserted into the database.it is only showing the alert msg. — jermina, Feb 12 '15 at 07:38
For submitting you will need to add the respective handling code inside the code block. You can use ajax there if you want. `$.post('target_page.php', $('#form_id').serialize())` . You can get more information about [posting form using jquery ajax in this link](http://hayageek.com/jquery-ajax-form-submit/) — amitthk, Feb 12 '15 at 07:41
I updated the code now. Please notice 2 things here. 1. The three forms have 3 ides `form_id1`, `form_id2`, `form_id3`. Each of them will have "action" attributes pointing to the respective target php page. `
` so on. Hope this is clear now. — amitthk, Feb 12 '15 at 08:56

form to stay after submitting the form

2 Answers2