How to get and pass data from html to php using ajax

Question

Hi I would love to know how can I pass the strings from a form to a php that will test if there is something in it and then post an alert message using this form to try and get data from it and then show if it was passed correctly.

HTML code:

<form action='' method=''>
Name:<input type='text' name='name' id='name'>
Age:<input type='text' name='age' id='age'>
message:<textarea name='message' id='message'></textarea>
<input type='submit' value='Send'>
</form>

Output:

<?php
if(isset($_POST['name']) && isset($_POST['age']) && isset($_POST['message'])){

$a = $_POST['name'];
$b = $_POST['age'];
$c = $_POST['message'];

   if($a != NULL && $b != NULL && $c != NULL)
       {
         echo "
                <script type='text/javascript'>
                window.alert('Success'+ a + b + c)
                </script>
              ";
        }


};?>

While still in the same page from before but shows what I have typed in there into the alert box.

I would also appreciate if it comes with instruction on how to use it with get and post functions and also with links if it can be done?

talha2k · Accepted Answer · 2013-03-07 05:49:56Z

For an easy way you can Make following changes to your code:

HTML:

<form action='' method='' id="myform">
Name:<input type='text' name='name' id='name'>
Age:<input type='text' name='age' id='age'>
message:<textarea name='message' id='message'></textarea>
<input type='submit' value='Send'>
</form>

PHP:

(your_page_with_php_script)

<?php
if(isset($_POST['name']) && isset($_POST['age']) && isset($_POST['message'])){

$a = $_POST['name'];
$b = $_POST['age'];
$c = $_POST['message'];

   if($a != NULL && $b != NULL && $c != NULL)
   {
      echo "Success ".a." ".b." ".c;
   }


};
?>

Script: (Include jquery first)

$('#myform').submit(function(){

var name = $('#name').val();
var age = $('#age').val();
var message = $('#message').val();


$.ajax({
  type: "POST",
  url: "your_page_with_php_script.php",
  data: "name="+name+"&age="+age+"&message="+message,
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

});

Kumar Saurabh Sinha · Accepted Answer · 2013-03-07 05:47:08Z

edit the following according to the need:

$.ajax({
  type: 'POST',
  url: 'your_php_page.php',
  data: { postVar1: 'theValue1', postVar2: 'theValue2' },
  beforeSend:function(){
    // this is where we append a loading image
    $('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
  },
  success:function(data){
    // successful request; do something with the data
    $('#ajax-panel').empty();
    $(data).find('item').each(function(i){
      $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
    });
  },
  error:function(){
    // failed request; give feedback to user
    $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
  }
});

The requesting page should have a div with id="ajax-panel"

Php Geek · Accepted Answer · 2013-03-07 05:48:18Z

0

You must use Jquery with Ajax...

<script>
$("#submit").click(function()
    {
       var name = $('#name').value();
       var age= $('#age').value();
       var message= $('#message').value();

        $.ajax({ 
            url: "urpage.php",
            data: {name : name, age : age, message : message},
            type: "POST",               
            success: function(output) {

               alert(output); //This will show ur output in an alert box
                   }                }
        })

    });
</script>

Hope this works

answered Mar 7, 2013 at 5:48

Php Geek

1,1071 gold badge15 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to get and pass data from html to php using ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related