CodeGuy
CodeGuy

Reputation: 28905

HTML form with PHP

I'd like to have a form that executes some php code without having to open a completely new php page. Right now, I'm familiar with "POST" so that I can execute a php file and call the variables from the HTML form using $_POST[variable] but, it takes time to open a new page, and I want to have a form that does the action right then and there.

For example, can someone write html code that creates a text box and a button, and when the user presses go, it displays the text that the user entered right next to the button.

Thanks!

Upvotes: 1

Views: 597

Answers (3)

T.P.
T.P.

Reputation: 2995

Here's an HTML and PHP snippet to get you started. It uses jQuery and just writes the value of textarea beneath the submit button using AJAX.

HTML Snippet [file=so.html]

<!DOCTYPE html>
<html><head><title>SO Example</title>
<script 
  type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js">
</script>
</head>
<body>

<form id="frm" name="frm">
  <textarea id="txt" name="txt" rows="4" cols="40">
  </textarea><br />
  <input type="submit"><br />
  <span id="result"></span>
</form>

<script type="text/javascript">
$('#frm').submit(function(e){
  e.preventDefault();
  $.ajax({
    url:"/so.php",type:"post",dataType:"html",
    data:$('#frm').serialize(),
    success:function(obj){
      $('#result').text(obj);
    }
  });
});
</script>

</body>
</html>

PHP Snippet [file=so.php]

<?php
echo $_POST['txt'];

Upvotes: 1

Justin Edmund
Justin Edmund

Reputation: 257

I'd look into AJAX, more specifically an AJAX call using jQuery. It looks a little bit like this for a POST request:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
});

And if I filled that out, it might look like this:

$.ajax({
  type:    'POST',                  // Method of submission: POST or GET
  url:     'processor.php',         // The script to send to.
  data:    { id: 1, name: 'John' }, // The data to give to PHP.
  success: function(data) {         // Do something with what PHP gives back.
             console.log(data);
           }
});

For more info on jQuery's AJAX functions, head here: http://api.jquery.com/category/ajax/ You're interested in jQuery.ajax(), jQuery.post(), and jQuery.get() probably.

Upvotes: 0

wajiw
wajiw

Reputation: 12269

If you want to execute php code after the page is loaded without opening a new page then you should be using a technology like AJAX. PHP is a pre-processor and is meant to be run to process a page, not for functions after that.

With AJAX you can use javascript to call a webpage that's processed by PHP. Then with that returned page/data you can do your page function.

For more info on ajax check here: http://en.wikipedia.org/wiki/Ajax_(programming)

I recommend looking at jQuery as an ajax wrapper: http://api.jquery.com/jQuery.ajax/ You can find a ton of tutorials online to get you started.

Upvotes: 0

Related Questions