2

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');},
        complete: 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');
 }
Improve this question
4
  • 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().) 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 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 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? Commented Sep 18, 2013 at 13:50

3 Answers 3

Reset to default
1

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');},
    complete: function(response){alert('finished');},
}
);
   return false;
   });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

sorry to say the syntax did not work it shows sending and then nothing happens
which alert do you get back? also have you tried to var_dump($_POST); to make sure you were receiving data in your PHP file, it would show in your network tab in Chrome. Also try to see you get all the proper values in your javascript with console.log();
My values come in the chrome console but the network says its pending on the sup.php seems like the php is not receiving the data. Y?
1

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;
   });
Improve this answer

1 Comment

I have tried that but it seems my php file isnt recieving my data. cause in the chrome console it shows pending for a very long time
1

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);},
        complete: function(response){},
    }
    );
       return false;
       });

});

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.