How to submit forms in php without refreshing the page

reactor86 · May 8, 2009

Hi everyone. I have a test.php with several forms which execute some bat files ,the question is how can i submit forms without reloading the page?

this is my test.php

<?phP
  if(isset($_POST['submit']))
  {
  echo exec('test.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=index.php\">";
  }
  elseif(isset($_POST['submit2']))
  {
  echo exec('test2.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=index.php\">";
  }
  elseif(isset($_POST['submit3']))
  {
  echo exec('test3.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=index.php\">";
  }
  elseif(isset($_POST['submit4']))
  {
  echo exec('test4.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=index.php\">";
  }
  elseif(isset($_POST['submit5']))
{
  echo exec('test5.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=index.php\">";
  }
  else{
// display the form
?>
<form action="" method="post" target="_self">
  <input name="submit" type="submit"  accesskey="W" onmouseover="" value="W" />
</form>
<form action="" method="post" target="_self">
  <input name="submit2" type="submit" accesskey="^G" value="U" />
</form>
<form action="" method="post" target="_self" id="ram">
  <input type="submit" name="submit3" value="Q" onmouseover/>
</form>
<form action="" method="post" target="_self">
  <input type="submit" name="submit4" value="S" />
</form>
<form action="" method="post" target="_self">
  <input type="submit" name="submit5" value="B" />  
</form>
<?php
}
?>

If it's difficult for you to do it in only php page here is what i have. Two seperate files ,php and html

this is my test.html

<html>
<body>
<form action="phpform.php" method="post" target="_self">  
  <input name="submit" type="submit" value="W" />
</form>
<form action="phpform.php" method="post" target="_self">
  <input type="submit" name="submit2" value="U" />
</form>
<form action="phpform.php" method="post" target="_self">
  <input type="submit" name="submit3" value="Q" onmouseover/>
</form>
<form action="phpform.php" method="post" target="_self">
  <input type="submit" name="submit4" value="S" />
</form>
<form action="phpform.php" method="post" target="_self">
  <input type="submit" name="submit5" value="B" />  
</form>
</body>
</html>

My phpform.php

<?php
  if(isset($_POST['submit']))
  {
  echo exec('test.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=form.html\">";
  }
  elseif(isset($_POST['submit2']))
  {
  echo exec('test2.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=form.html\">";
  }
  elseif(isset($_POST['submit3']))
  {
  echo exec('test3.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=form.html\">";
  }
  elseif(isset($_POST['submit4']))
  {
  echo exec('test4.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=form.html\">";
  }
  elseif(isset($_POST['submit5']))
{
  echo exec('test5.bat');
  echo "<meta http-equiv=refresh content=\"0; URL=form.html\">";
  }
  else{
?>
<?php
}
?>

please i need to submit forms without reloading the page and is it possible to do it just from a single php file(my first example ,test.php) ? Thank you

reactor86 · May 8, 2009

Please excuse me if you have found any mistakes in my codes, i'm new in programming. One more question , if you have noticed i used

echo "<meta http-equiv=refresh content=\"0; URL=form.html\">";

to return to the same page , if it could be done without refreshing the page would i still need it?

dgoosens · May 8, 2009

this isn't very hard...

just use a little Ajax and it should be fine...

you will have to modify your form though and replace the "submit" inputs by calls to JavaScprits

... and you won't need the refresh header...

reactor86 · May 8, 2009

That's the point , i know it could be done with Ajax but that's the matter. Could you please show me how i can do it , i don't know Ajax. Please this is urgent

dgoosens · May 8, 2009

it is not that hard...

read http://www.w3schools.com/Ajax/default.asp for the basics...

the idea is that by clicking on the button, you call a JavaScript that calls your PHP script...

reactor86 · May 8, 2009

I have already looked in tens of web sites but still confused. I managed to do it with just a single form but with several forms nothing works. I know that there are lots of websites to learn Ajax but the point i came here was to see someone help me intstead of giving me links. Please forgive me but i've already spent enough time trying to do it with Ajax and with no result ,that's why i'm here. Thanks for trying to help.

Ken2k7 · May 8, 2009

What are you specifically confused about?

Also we are helping. What I think you're asking is a request for someone to write it for you. We have a forum for that - here. Read the rules before posting a topic in that forum if you choose. This forum is not for request but for coding help. It's also not a tutorial forum.

reactor86 · May 8, 2009

No no i'm not expecting you to write it for me ,what i need is just a simple example. My problem is that i have several forms and several if-else statements which makes it confusing when trying to conect Ajax. I read that in one page Ajax could be used just for one form , i basically did it for one form and it worked ,then i added more forms where they didn't work. Guys please don't get it too close to your heart , i appreciate your help.

Ken2k7 · May 8, 2009

But if you actually said that you went through tons of websites and they all confuse you, how would we make it any clearer?

reactor86 · May 8, 2009

I tried something like in here http://www.phpfreaks.com/forums/index.php?topic=241874.0

i tried to add more forms with similar properties but they didn't work. And what about server response? Do they work according to form id?

reactor86 · May 8, 2009

Guys i created a javascript function and used it on form behaviour onclick=get...(....). The problem is that i can't use it on several forms ,to be more specific my php if-else statements don't work when there's Ajax used for forum submission. How can i compare when there's Ajax instead of usual submit ? I'm realy confused.

Ken2k7 · May 8, 2009

Can you post what you have on the AJAX-side of things?

reactor86 · May 9, 2009

Hi again this are my html and php files, what am i doing wrong? it doesn't work

this is my form.html

<script type="text/javascript" language="javascript">     var http_request = false;     function makePOSTRequest(url, parameters) {        http_request = false;        if (window.XMLHttpRequest) { // Mozilla, Safari,...           http_request = new XMLHttpRequest();           if (http_request.overrideMimeType) {           	// set type accordingly to anticipated content type              //http_request.overrideMimeType('text/xml');              http_request.overrideMimeType('text/html');           }        } else if (window.ActiveXObject) { // IE           try {              http_request = new ActiveXObject("Msxml2.XMLHTTP");           } catch (e) {              try {                 http_request = new ActiveXObject("Microsoft.XMLHTTP");              } catch (e) {}           }        }        if (!http_request) {           alert('Cannot create XMLHTTP instance');           return false;

Ken2k7 · May 9, 2009

Hi,

Could you organize that better and not have it all in one line?

Thanks.

reactor86 · May 9, 2009

Hi. Sorry guys i were using my mobile phone that's why the code appeared that way. So here is what i got

form.html

<html>
<head>
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var poststr = "submit1=" + encodeURI( document.getElementById("submit1").value ) +
                "&submit2=" + encodeURI( document.getElementById("submit2").value ) +
				"&submit3=" + encodeURI( document.getElementById("submit3").value ) +
				"&submit4=" + encodeURI( document.getElementById("submit4").value ) +
                    "&submit5=" + encodeURI( document.getElementById("submit5").value );
      makePOSTRequest('phpform.php', poststr);
   }
</script>



</head>
<body>

<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<input type="button" id="submit1" value="submit1" onclick="javascript:get(this.parentNode);" />
</form>

<form action="javascript:get(document.getElementById('myform2'));" name="myform2" id="myform2">
  <input type="button" id="submit2" value="submit2" onclick="javascript:get(this.parentNode);" />
</form>
<form action="javascript:get(document.getElementById('myform3'));" name="myform3" id="myform3">
  <input type="button" id="submit3" value="submit3" onclick="javascript:get(this.parentNode);" />
</form>
<form action="javascript:get(document.getElementById('myform4'));" name="myform4" id="myform4">
  <input type="button" id="submit4" value="submit4" onclick="javascript:get(this.parentNode);" />
</form>
<form action="javascript:get(document.getElementById('myform5'));" name="myform5" id="myform5">
  <input type="button" id="submit5" value="submit5" onclick="javascript:get(this.parentNode);" />
</form>
<br><br>
Server-Response:<br>
<hr>
<span name="myspan" id="myspan"></span>
<hr>

</body>
</html>

phpform.php

<?phP
  if(isset($_POST['submit1']))
  {
  echo exec('test.bat');
  echo "submit1 goes";
  }
  elseif(isset($_POST['submit2']))
  {
  echo exec('test2.bat');
  echo "submit2 goes";
  }
  elseif(isset($_POST['submit3']))
  {
  echo exec('test3.bat');
  echo "submit3 goes";
  }
  elseif(isset($_POST['submit4']))
  {
  echo exec('test4.bat');
  echo "submit4 goes";
  }
  elseif(isset($_POST['submit5']))
{
  echo exec('test5.bat');
  echo "submit5 goes";
  }
  else{
  echo "end";
  }
?>

The problem i'm having is that once i press any buttons i get the result of first IF statement of my phpform.php . I need to press any buttons and get the result according to my phpform.php Statemens and without reloading the page. How to make the forms work seperatelly while there's AJAX? What am i doing wrong when trying to integrate AJAX? Any help will be appreciated , thanks

Ken2k7 · May 9, 2009

What's the point in passing over obj to the get function if you're not going to use it? And why does the form have an action attribute that makes a JavaScript call to the get function? ???

reactor86 · May 9, 2009

I know i shouldn't use get function but that's the only thing i found which actually gets what's in php. Could you please tell me what functions should i use for my purpose? I'm really confused, i have found several examples but they are all for getting from or writing to php. I tried to rebuilt them but didn't work. Please show me the way i should follow.How to have control over submit buttons and compare them from php while i submit them via Ajax? Thank you

Ken2k7 · May 9, 2009

??? You're confusing yourself already. You see the get function you wrote? Well it takes a parameter. But you never used it in the function. Why?

reactor86 · May 10, 2009

Actually i had a text field and a code in php for displaying entered message, i deleted the text field because i don't need it. So what my mistake was to assign a function as an action to my forms? If get function i useless here then what should i use? Honestly i really don't know Ajax , i need it for my thesis and i have a little time to finish it.Please tell me what exactly i should use ,so that i try it out . Thanks

Ken2k7 · May 10, 2009

Did I say the function is useless? I don't recall. o.O I'm just telling you that if you are going to pass a parameter to a function, you should use it; otherwise, take out the parameter. Also, get rid of your forms.

By the way, this none of this is AJAX-related. Just basic HTML and JavaScript. Apparently you need to study up on those rather than AJAX.

reactor86 · May 10, 2009

I think i'll give up soon. Any good reference link where i can find what i've been looking for .And why do you want me to get rid of forms? Any other alternative solutions?

Ken2k7 · May 10, 2009

You don't need the form tags if you're using AJAX. You don't want to submit anything. Just use an onclick.

reactor86 · May 10, 2009

Ok i did just like you said about forms

this is what i got

<input type="button" id="submit1" value="submit1" onClick="javascript:get(this.parentNode);" />
<input type="button" id="submit2" value="submit2" onClick="javascript:get(this.parentNode);" />
<input type="button" id="submit3" value="submit3" onClick="javascript:get(this.parentNode);" />
<input type="button" id="submit4" value="submit4" onClick="javascript:get(this.parentNode);" />
<input type="button" id="submit5" value="submit5" onClick="javascript:get(this.parentNode);" />

as i push one of my submit buttons i get just the first result of my IF statements in php, how to make it work like i press first button and my php recognizes it and performs what's under the relative IF-ELSe statement.

my phpform.php

<?phP
  if(isset($_POST['submit1']))
  {
  echo exec('test.bat');
  echo "submit1 goes";
  }
  elseif(isset($_POST['submit2']))
  {
  echo exec('test2.bat');
  echo "submit2 goes";
  }
  elseif(isset($_POST['submit3']))
  {
  echo exec('test3.bat');
  echo "submit3 goes";
  }
  elseif(isset($_POST['submit4']))
  {
  echo exec('test4.bat');
  echo "submit4 goes";
  }
  elseif(isset($_POST['submit5']))
 {
  echo exec('test5.bat');
  echo "submit5 goes";
  }
  else{
   echo "end";
  }
?>

and should i change anything in my function?

 function get(obj) {
      var poststr = "submit1=" + encodeURI( document.getElementById("submit1").value );
                 "submit2=" + encodeURI( document.getElementById("submit2").value );
 				"submit3=" + encodeURI( document.getElementById("submit3").value );
 				"submit4=" + encodeURI( document.getElementById("submit4").value );
                    "submit5=" + encodeURI( document.getElementById("submit5").value );
      makePOSTRequest('phpform.php', poststr);

Ken2k7 · May 10, 2009

Well you have 5 buttons for a reason right? So click each one for different results. I'm not sure what you're trying to do. Your question is poorly stated.

reactor86 · May 11, 2009

Finally i did it . I just created 5 new functions and assigned to each button. Thank you all guys for trying to help me, thanks Ken2k7 for tips.Take care

Sign In

How to submit forms in php without refreshing the page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information