CODEWITHSUNDEEP
javascriptphpjqueryhtml
sam Walker
sam Walker

Reputation: 11

Undefined Variable When sending via Ajax

I have a form which passes the forn field values to an ajx script which then passes those values to php and they are they sent to an email address.

The problem i have is that the values are not showing and instead i get the word undefined.

Here is my ajax code.

$(document).ready(function(){
$('form.save').submit(function () {
var name = $(this).find('.name').attr('value');
var email = $(this).find('.email').attr('value');
var telephone = $(this).find('.telephone').attr('value');
// ...
    $.ajax({
        type: "POST",
        url: "application.php",
        data: "name="+ name +"& email="+ email +"& telephone="+ telephone,
        success: function(){
            $('form.save').hide(function(){$('div.success')});
        }
    });
return false;
});
});

Here is my form

  <form action="" method="post" class="save">

                              <input type="text" name="name"  id="name" clsss="name" value="" placeholder="Name"/>

                              <input  type="text" name="email"  class="email" value="" placeholder="Email"/>


                              <input  type="text" name="telephone"  class="telephone" value=""placeholder="Telephone"/>

                            <input name="certified" type="checkbox" value="" checked>I am a Certified sophisticated Investor
                            <input type="hidden" name="type" value="Certified sophisticated Investor">
                            <input type="submit" name="submit" class="button" value="Submit"/>

                           </div>
                      </form>

And then the php (There is no sanitation on the php code i am just trying to get the value and will then use better php code)

 $name = $_POST['name'];
 $email = $_POST['email'];
 $telephone = $_POST['telephone'];


 // mail
 $msg = "$name $email $telephone";
 $msg = wordwrap($msg,70);
 mail("*************","Application",$msg);

Upvotes: 0

Views: 1916

Answers (6)

Husni Salax
Husni Salax

Reputation: 2020

Try this: 

 <form id="order-form">    <!--Try to add id for your form -->
    <!--your code here-->
    ...
    ...
 </form>

jQuery:

 $(document).ready(function(){
      $('form.save').submit(function () {
        var data = $("#order-form").serialize();  //You should use serialize for send data
          $.ajax({
            url: "/yourUrl",
            data: data,       
            type: 'GET',
            dataType: 'html',
            success: function (result) {
                 $('form.save').hide(function(){$('div.success')});
                 $("#renderarea").html(result); 
             }
            }); 
            return false;
        });
    }):

Upvotes: 0

Rajdeep Paul
Rajdeep Paul

Reputation: 16963

There are few things wrong in your code,

  • See this statement here,

    <input type="text" name="name"  id="name" clsss="name" value="" placeholder="Name"/>
                                            ^ It should be class

  • You're getting the input field values in the wrong way. It should be like this:

    var name = $(this).find('.name').val();
var email = $(this).find('.email').val();
var telephone = $(this).find('.telephone').val();

So your AJAX request should be like this:

$(document).ready(function(){
    $('form.save').submit(function () {
    var name = $(this).find('.name').val();
    var email = $(this).find('.email').val();
    var telephone = $(this).find('.telephone').val();
        $.ajax({
            type: "POST",
            url: "application.php",
            data: {name:name, email:email, telephone:telephone},
            success: function(){
                $('form.save').hide(function(){$('div.success')});
            }
        });
    return false;
    });
});

Upvotes: 0

Jon
Jon

Reputation: 87

Try this. It will work fine.

$(document).ready(function(){
$('form.save').submit(function () {
var str = $( "form.save" ).serialize();


$.ajax({
    type: "POST",
    url: "getajax.php",
    data: str,
    success: function(){
        $('form.save').hide(function(){$('div.success')});
    }
});
return false;
});
});

Upvotes: 0

Ranjit Shinde
Ranjit Shinde

Reputation: 1130

send data to ajax as below : 

$.ajax({
    ...
    data : { 'foo' : bar, 'bar' : foo },
    ...
});

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

You can create an object of key/value pairs :

$.ajax({
    ...
    data : { 'name' : name, 'email' : email , 'telephone' : telephone},
    ...
});

Upvotes: 0

Lim Guang Jian
Lim Guang Jian

Reputation: 90

data: "name="+ name +"& email="+ email +"& telephone="+ telephone

Remove the spaces

data: "name="+ name +"&email="+ email +"&telephone="+ telephone

Upvotes: 1

Related Questions