Undefined Variable When sending via Ajax

Question

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);

There is typo in your code , u have used clsss="name" instead of class="name" — user2338456
– user2338456, Commented May 9, 2016 at 10:49
why there space after ever & instead of this & email use this &email — Aman Rawat
– Aman Rawat, Commented May 9, 2016 at 11:03
@samWalker, try to use serialize function for sending your data — Husni Salax
– Husni Salax, Commented May 9, 2016 at 11:09

Lim Guang Jian · Accepted Answer · 2016-05-09 10:45:53Z

1

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

Remove the spaces

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

answered May 9, 2016 at 10:45

Lim Guang Jian

908 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajdeep Paul · Accepted Answer · 2016-05-09 10:57:25Z

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;
    });
});

Dhara Parmar · Accepted Answer · 2016-05-09 10:47:27Z

0

You can create an object of key/value pairs :

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

edited May 9, 2016 at 10:47

answered May 9, 2016 at 10:46

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

Comments

Ranjit Shinde · Accepted Answer · 2016-05-09 10:50:41Z

0

send data to ajax as below :

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

edited May 9, 2016 at 10:50

answered May 9, 2016 at 10:45

Ranjit Shinde

1,1301 gold badge8 silver badges24 bronze badges

Comments

Jon · Accepted Answer · 2016-05-09 10:56:48Z

0

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;
});
});

answered May 9, 2016 at 10:56

Jon

871 silver badge5 bronze badges

Comments

Husni Salax · Accepted Answer · 2016-05-09 11:02:24Z

0

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;
        });
    }):

edited May 9, 2016 at 11:02

answered May 9, 2016 at 10:51

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Undefined Variable When sending via Ajax

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related