Post data via jQuery AJAX

Question

I'm trying to post data to my table using AJAX, I have the following form,

<form>
    Total <input type="text" id="total" name="total" /><br />
    Bill name<input type="text" id="bill-name" name="bill-name" /><br />
    bill descriptiion <input type="text" id="bill-description" name="bill-description" /><br />
    bill colour<input type="text" id="bill-colour" name="bill-colour" />
    <input type="button" value="submit" onClick="insertBill();" />
</form>

And my AJAX code is as...

<script type="text/javascript">
function insertBill()
{
    var bill = $("#bill").val();
    $.post('insert_bill.php', {total: total, bill-name: bill-name, bill-description: bill-description, bill-colour: bill-colour}, function(data) 
    {
        $("#bills").html(data); 
    });
}
</script>

For some reason however my values aren't being passed. I'm new to AJAX and so I've been following a tutorial so excuse my naivety! How do I make this work?

Also, in your function you are calling a form with id bill. Edit your form tag, and add this id — hjpotter92
– hjpotter92, Commented Apr 12, 2012 at 20:52

mikevoermans · Accepted Answer · 2012-04-12 20:58:21Z

1

For this and so many other PHP, jQuery ajax problems, I highly recommend serialize try this:

<div id="bills"></div>
<script type="text/javascript">
function insertBill()
{
    $.post('insert_bill.php', $('form').serialize(), 
        function(data) {
        $("#bills").html(data); 
    });
}

answered Apr 12, 2012 at 20:58

mikevoermans

4,00725 silver badges27 bronze badges

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

Comments

Noodles · Accepted Answer · 2012-04-12 20:54:34Z

0

Your javascript variables haven't been defined yet. Your javascript function doesn't know about the form.

Try something like this:

$.post('insert_bill.php', {total: $('#total').val(), bill-name: $('#bill-name').val()...

Or you can set your variables beforehand

<script type="text/javascript">
function insertBill()
{
  var total = $('#total').val();

I'm not sure what this is doing though:

var bill = $("#bill").val();

I don't see any id="bill"

answered Apr 12, 2012 at 20:54

Noodles

9284 gold badges15 silver badges31 bronze badges

Comments

Stan · Accepted Answer · 2012-04-12 20:56:47Z

0

You are passing variables that are not even defined. You need to define all your post variables like you did with var bill = $("#bill").val(); and then pass them.

I would recommend you to use this jQuery plugin that does everything for you. I use it and it works fine.

answered Apr 12, 2012 at 20:56

Stan

26.7k55 gold badges169 silver badges249 bronze badges

Comments

hjpotter92 · Accepted Answer · 2012-04-12 20:56:51Z

0

Change your form tag to this(or something similar)

<form id="bill" onsubmit="return insertBill();">

and in your function, do this:

<script type="text/javascript">
  function insertBill() {
    var bill = $("#bill").val();
    $.post('insert_bill.php', {total: total, bill-name: bill-name, bill-description: bill-description, bill-colour: bill-colour}, function(data) 
      {
        $("#bills").html(data); 
      } );
    return true;     // So that form may proceed.
  }
</script>

answered Apr 12, 2012 at 20:56

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Comments

Kristoffer Sall-Storgaard · Accepted Answer · 2012-04-12 20:59:40Z

0

Ignoring the missing values, bill-name is not a valid identfier, if you really want to use bill-name you should wrap it in quotes and retrieve the value using jQuerys val():

$.post('insert_bill.php',{ 'bill-name' : $('#bill-name').val() } ....

answered Apr 12, 2012 at 20:59

Kristoffer Sall-Storgaard

10.7k5 gold badges39 silver badges46 bronze badges

Collectives™ on Stack Overflow

Post data via jQuery AJAX

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related