submit form to itself without page refresh and hide/show the div after submit

Question

is it possible to submit form without refresh and hide the current div, show the div which is hidden.

I tried using following code which submits a form and reloads page.

<form method="post" name="searchfrm" action="schedule.php" >
      <div><input type="text" placeholder="Patient Lastname" class="pName" id="pName" name="pName" /></div></br>
      <div><input type="text" placeholder="Surgeon Name" class="sName" id="sName" name="sName" /></div></br>
       <div>
          <span><input type="text" placeholder="mm" class="mm" name="mm" /></span>
          <span><input type="text" placeholder="dd" class="dd" name="dd" /></span>
          <span><input type="text" placeholder="yyyy" class="yyyy" name="yyyy" /></span>
          <span><input type="button" class="sButton" id="sButton"/></span>
      </div>

 <!-- Search Results -->
<div id="searchDiv" class="searchDiv" style="display:none;">
<?PHP
$dateVal = $_POST["yyyy"]-$_POST["mm"]-$_POST["dd"];
$sName = $_POST["sName"];
$pName = $_POST["pName"];
echo "dateVal".$sName;
 $ser_val=@mysql_query("SELECT * FROM issio_patient_procedures WHERE procedure_date='$dateVal' AND asc_id='$ascId' AND surgeon_name='".$sName."' ");
  if(@mysql_num_rows($ser_val)>0)
    {
        $se_count=0;
        while($se_count_det=@mysql_fetch_assoc($ser_val))
        {
            $se_count++;
            echo $se_count_det["surgeon_name"];
        }
    }
?>
</div>
 <!-- Search Results End -->

<div class="scroll" id="scroll" style="display:block;">
   <div class="dateHeader">
      Some content....
   </div
</div

possible duplicate of [Submit form without page reloading](http://stackoverflow.com/questions/2866063/submit-form-without-page-reloading) — jeroen, Mar 14 '12 at 23:13

jmishra · Answer 1 · 2012-03-14T23:33:13.250

3

A very popular and common answer is you need an Ajax Request to do such an asynchronous task.

I can suggest you the jQuery method

       $.ajax({
 url:'dataProcessingPage.php',  
     data: { pName:$("#pName").value, sName:$("#sName").value, .....},
     type:'POST',
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json',  
 success:function(){

      $("#formDiv").hide(); 
       },

});

The above will submit your form to dataProcessingPage.php

edited Mar 14 '12 at 23:33

answered Mar 14 '12 at 23:20

jmishra

2,086
2
24
38

here i have to use the submit values in the form itself in the select query is it possible to do it using ajax ..? – Devswa Mar 14 '12 at 23:24
What I read from your comment is you want to use the submitted values inside the query. Sure, inside your `dataProcessingPage.php` just set an if condition that checks for one of the submitted values. If yes, then put them all in a select statment just like you would normally with a normal form. – jmishra Mar 14 '12 at 23:30
i think i am not clear.....here I want to use the submitted values inside the query in the same schedule.php page itself. – Devswa Mar 14 '12 at 23:36
You can't do that with an Ajax Request. Your `php` file that is receiving inputs needs to load from top to bottom, hence every form reloads even if it submitted to itself so that it receives input on the server. In case of Ajax, your php file in the background loads but the user doesn't know about it and stuff on the front is static. – jmishra Mar 14 '12 at 23:41

score 2 · Answer 2 · answered Mar 14 '12 at 23:13

2

Look into Javascript and AJAX w/PHP. I'm not going to write all that code out for you, but this should get you in the right direction.

Think of "AJAX" as loading fragments of pages or even just data strings for interpretation with Javascript, and refreshing only certain elements on the already loaded DOM. This is the theory, now you have to apply it to what you're doing.

answered Mar 14 '12 at 23:13

Eric Hodonsky

5,617
4
26
36

using ajax is it possible to submit form to itself – Devswa Mar 14 '12 at 23:41
1

Actually using 'JavaScript' can submit the form. AJAX is a theory that has to do with httprequests for data. JavaScript can submit the form, then the httprequest driven by the JavaScript can send the form parts, and receive data based off their values. – Eric Hodonsky Mar 16 '12 at 20:13

submit form to itself without page refresh and hide/show the div after submit

2 Answers2