jQuery not generating correct queryString

Question

I have been working on a website that uses a combination of PHP, jQuery, MySQL and XHTML in order to register students for a piano recital. This has no official purpose other than a learning exercise for me in getting all of these to work together. However, I have had a lot of problems getting the PHP to talk with the database and I'm not sure what my problem is. But before that can be tackled there is a really annoying issue that I've run across. For some reason my jQuery is not building a complete post URL for the PHP.

I am using jQuery version: 1.4.2 from Google. The query string is being built by using:

var ajaxOpts = {
      type: "post",
      url: "../php/addRecital.php",
      data: "&performance=" + $("#performanceType :selected").text() +
            "&groupName=" + $("#groupName").val() +
            "&student1fName=" + $("#firstName").val() +
            "&student1lname=" + $("#lastName").val() +
            "&student1id=" + $("#studentID").val() +
            "&student2fname=" + $("#Second_Student_firstName").val() +
            "&student2lname=" + $("#Second_Student_lastName").val() +
            "&student2id=" + $("#Second_Student_studentID").val() +
            "&skillSelect=" + $("#skillSelect :selected").text() +
            "&instrument1=" + $("#instument1 :selected").text() +
            "&otherInstrument1=" + $("#otherInstrument1").val() +
            "&instrument2=" + $("#Instument2 :selected").text() +
            "&otherInstrument2=" + $("#otherInstrument2").val() +
            "&location=" + $("#locationSelect :selected").text() +
            "&roomNumber=" + $("#roomNumber").val() +
            "&time=" + $("#timeSlotSelect :selected").text()
            ,
      success: function(data) { ...

There is more than the above function, but I didn't think that it would pertain to here. I then call the code using:

$.ajax(ajaxOpts);

However, instead of creating the entire query string I get:

http://sterrcs123.mezoka.com/schoolProject/assign/assign13.html?groupName=&firstName=Samuel&lastName=Terrazas&studentID=23-343-3434&Second_Student_firstName=&Second_Student_lastName=&Second_Student_studentID=&otherInstrument=&Second_Student_Instrument=&roomNumber=2

Which as you can tell is missing a number of keys and their values. I would appreciate any help I can get because this is really driving me insane. Thanks.

You might want to read up documentation for the data option. Data is an array of key/value pairs, not a string. Just give it the key and the value and jQuery will take care of adding it to the URL. — Sergey Akopov
– Sergey Akopov, Commented Dec 19, 2010 at 4:35
@Sergai so like: "{ rating: $(this).html() }"? If so then how do I combine multiple key/value pairs? — Samuel
– Samuel, Commented Dec 19, 2010 at 4:42
Assuming all those are form elements, may want to look in to $('#form').serialize() for the data value. — Brad Christie
– Brad Christie, Commented Dec 19, 2010 at 4:45

Macy Abbey · Accepted Answer · 2010-12-19 04:52:02Z

1

It appears that your form is simply submitting itself without using your AJAX operation. Did you attach to the form's submit event and THEN run your ajax call? You will also want to return false from the submit event handler to prevent the default behavior you are seeing above.

Example:

$('#formid').submit(function(){
       //your ajax code here.
       return false;
});

answered Dec 19, 2010 at 4:52

Macy Abbey

3,8971 gold badge22 silver badges30 bronze badges

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

2 Comments

Samuel Over a year ago

My "submit" button is just called <button id="add">Register Student</button>, and then im using $("#add").click(function() {}); that is the strange thing.

Macy Abbey Over a year ago

I would use the function I have above, and then change your submit button to <input type="submit" value="Register Student" id="submitbtn" name="submitbtn" />

PriorityMark · Accepted Answer · 2010-12-19 04:58:22Z

0

If you're talking to an ASP.Net web service then you would need data to be a JSON string of your arguments. Otherwise, you can pass your data in by using an object literal (truncated for brevity):

var ajaxOpts = {
  type: "post",
  url: "../php/addRecital.php",
  data: { 
    performance: $("#performanceType :selected").text(),
    groupName: $("#groupName").val(),
    student1fName: $("#firstName").val(),
    student1lname: $("#lastName").val()
  },
  success: function(data) 
}

As per the missing values, make sure you're capturing the button click / form submit.

$('form').submit(function (e) {
  $.ajax(ajaxOpts);
  return false;
});

answered Dec 19, 2010 at 4:58

PriorityMark

3,24719 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery not generating correct queryString

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related