I want to send form data from ajax to php. My ajax retrieves the form data but it doesnt send it i dont see anything wrong with the code maybe i need a much more professional help. Thanks in advance

HTML5 syntax

<div align="center"><a id="hi">Header</a></div>
<a id="signup" data-add-back-btn="true" style="float:right;" data-icon="arrow-r">Sign- In</a>
</div>

<form class="check-user" action="php/sup.php" method="POST">
        <label>Username</label>
        <input id="Susername" name="username" placeholder="username" type="text" >
    </div>
    <div align="center" data-role="fieldcontain" style="width:100%;overflow:hidden" data-position="static">
        <label>Email</label>
        <input id="Semail" name="email" placeholder="email" type="email" >
    </div>
    <div align="center" data-role="fieldcontain" style="width:100%;overflow:hidden" data-position="static">
        <label>Password</label>
        <input id="Spassword" name="password" placeholder="password" type="password" >
    </div>
    <!---input type="submit" style="visibility:hidden;" id="send"/-->
    </form>

Ajax syntax

$('#signup').live('click', function(){
       //var name = document.getElementById('Susername').value;
       //var email = document.getElementById('Semail').value;
       //var pass = document.getElementById('Spassword').value;
       var that = $('form.check-user'),
       urls = that.attr('action'),
       methods = that.attr('method'),
       data = {};
       that.find('[name]').each(function(index, element) {
        var that = $(this),
        name = that.attr('name'),
        element = that.val();
        alert(name+'='+element+' '+methods);
        data[name] = element;
    });

       $.ajax(
    {
        url: urls,
        type: methods,
        data : data,
        beforeSend: function(response){alert('Sending');},
        success: function(response){ alert('success');},
        error: function(response){alert('failed');},
        plete: function(response){alert('finished');},
    }
    );
       return false;
       });

PHP syntax

session_start();
$name =  $_POST['username'];
$email =  $_POST['email'];
$password =  $_POST['password'];


if(isset($name) && isset($email) && isset($password))
 {

        echo $name;
        $_SESSION['username'] = $name;

  }
 else
 {
die('data not set');
 }

I want to send form data from ajax to php. My ajax retrieves the form data but it doesnt send it i dont see anything wrong with the code maybe i need a much more professional help. Thanks in advance

HTML5 syntax

<div align="center"><a id="hi">Header</a></div>
<a id="signup" data-add-back-btn="true" style="float:right;" data-icon="arrow-r">Sign- In</a>
</div>

<form class="check-user" action="php/sup.php" method="POST">
        <label>Username</label>
        <input id="Susername" name="username" placeholder="username" type="text" >
    </div>
    <div align="center" data-role="fieldcontain" style="width:100%;overflow:hidden" data-position="static">
        <label>Email</label>
        <input id="Semail" name="email" placeholder="email" type="email" >
    </div>
    <div align="center" data-role="fieldcontain" style="width:100%;overflow:hidden" data-position="static">
        <label>Password</label>
        <input id="Spassword" name="password" placeholder="password" type="password" >
    </div>
    <!---input type="submit" style="visibility:hidden;" id="send"/-->
    </form>

Ajax syntax

$('#signup').live('click', function(){
       //var name = document.getElementById('Susername').value;
       //var email = document.getElementById('Semail').value;
       //var pass = document.getElementById('Spassword').value;
       var that = $('form.check-user'),
       urls = that.attr('action'),
       methods = that.attr('method'),
       data = {};
       that.find('[name]').each(function(index, element) {
        var that = $(this),
        name = that.attr('name'),
        element = that.val();
        alert(name+'='+element+' '+methods);
        data[name] = element;
    });

       $.ajax(
    {
        url: urls,
        type: methods,
        data : data,
        beforeSend: function(response){alert('Sending');},
        success: function(response){ alert('success');},
        error: function(response){alert('failed');},
        plete: function(response){alert('finished');},
    }
    );
       return false;
       });

PHP syntax

session_start();
$name =  $_POST['username'];
$email =  $_POST['email'];
$password =  $_POST['password'];


if(isset($name) && isset($email) && isset($password))
 {

        echo $name;
        $_SESSION['username'] = $name;

  }
 else
 {
die('data not set');
 }

• javascript
• jquery
• ajax
• html

• Where's the #signup element? Your call to .live() doesn't seem to match anything, so the values used in the .ajax() call are never populated and it's never called. (Also, you shouldn't use .live() but instead use .on().) – David Commented Sep 18, 2013 at 10:37
• @David Hm, it's an obvious thing. I believe it's not an error "forgot to add something to click". Anyway, check your elements and selectors – Gena Moroz Commented Sep 18, 2013 at 10:42
• the element to click is in my original syntax i just took this small piece so you understand but the #signup is valid i'll try the on – user2227986 Commented Sep 18, 2013 at 11:06
• WHY do you attempt to redefine element here: element = that.val();? What is that really supposed to do? – Mark Schultheiss Commented Sep 18, 2013 at 13:50

3 Answers 3

You can use serialize method on form, it will gather everything correct.

$('#signup').live('click', function(){

   var that = $('form.check-user'),
   urls = that.attr('action'),
   methods = that.attr('method'),
   data = that.serialize();


   $.ajax(
{
    url: urls,
    type: methods,
    data : data,
    beforeSend: function(response){alert('Sending');},
    success: function(response){ alert('success');},
    error: function(response){alert('failed');},
    plete: function(response){alert('finished');},
}
);
   return false;
   });

Try this,

$('#signup').live('click', function(){

$.ajax({
            url:’’,//url to submit
            type: "post",
            dataType : 'json',
            data : {
                'Susername' : $('#Susername').val(),
                'Semail' : $('#Semail').val(),
                'Spassword' : $('#Spassword').val()
            },
            success: function (data)
            {

            }
        });

return false;
   });

I solved it works this way on the php side you do this

$name =  isset(json_decode($_POST['username']));//htmlentities($values[0]);
$email =  isset(json_decode(($_POST['email'])));//htmlentities($values[1]);
$password =  isset(json_decode($_POST['password']));//htmlentities($values[2]);

The Ajax side

$(document).ready(function(e) {

   $('#signup').live('click', function(){
       //var name = document.getElementById('Susername').value;
       //var email = document.getElementById('Semail').value;
       //var pass = document.getElementById('Spassword').value;
       var that = $('form.check-user'),
       urls = that.attr('action'),
       methods = that.attr('method'),
       data = {};
      data = that.serialize();
        console.log(data);


       $.ajax(
    {
        url: urls,
        type: methods,
        dataType:'json',
        data : data,
        beforeSend: function(response){$.mobile.showPageLoadingMsg(true);},
        success: function(response){ $.mobile.showPageLoadingMsg(false);},
        error: function(xhr, textStatus, errorThrown){alert(textStatus);},
        plete: function(response){},
    }
    );
       return false;
       });

});