-1 
function sendValues() {
var str = $("#myForm").serialize();
var response = $('input[name=brand[]]:checked').val();
$.ajax({
    url: "/trying.php?avoidcache=' + myTimestamp();",
    data: {str}
    cache: false
});
}

I want to be able to send the data onclick (checking the checkbox) and I need the checkbox to stay checked when it is sent to the server. Right now it does not stay checked, but the value of the checked is shot out.

Below is an example of what I am trying to accomplish..

http://www.abt.com/category/45/Bookshelf-Speakers.html

I can get the script to filter results, but there is 2 problems with it.

  • I want the ajax data to be sent to the server on click,

  • I need the checkboxes that have been [checked] to stay checked once the data is sent to the server.

Improve this question

1 Answer 1

Reset to default
1

It doesn't look like you're submitting the form via ajax, you're causing the form submission using JavaScript. I imagine that when you say the checkbox does not stay checked it's because your page is being submitted and reloaded without state.

I'd say your options are

  1. Modify your PHP script to check the checkboxes if their state is checked in the database.
  2. Actually submit via jQuery .ajax() making use of .serialize().

Update

  1. You didn't show how you're triggering the function in the updated code but if it's on the submit event of a form, you should make sure that you return false; to cancel the form submission. Other than that you have some errors in your code - {str} is invalid syntax and is also missing a trailing comma.

  2. Here is a fiddle that submit a form on checking/unchecking checkboxes in the form using ajax. Note that message returned is always an error message since this form is running on jsFiddle.net but in your case, it will be the response of your PHP script that you will handle appropriately.

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

19 Comments

Can you give me an idea of how I would write the submit via ajax script-- thanks
@no.good.at.coding I actually have a version of this script that uses .serialize() and it worked well, the only problem is that it does not allow me to perform the ajax call upon clicking the checkbox.
@RPM I've linked to a fiddle showing a live example of how this might work (and it does work). Please compare with your code and see where you might be doing it wrong. Also, I've pointed out in the updated answer that your code isn't error-free. Other than that, it should work.
@RPM What do you mean about giving the checkboxes values and serializing those? With the example fiddle, you'll see that the form gets serialized into something like Box2=on&Box3=on&text=Default+value where Box1 is unchecked, the other two are checked and which is why they appear in the submit. The input field named text is also part of the POST. Note that only checked checkboxes will be submitted. So if you do not find a checkbox parameter in the received request in PHP, it was not checked.
Is the page that you linked to your current code? I'm afraid you're still submitting the form the normal way and your page is reloading - you can see that from the fact that your URL in the address bar changes. You also have multiple forms with the same id in the tds before each checkbox - there should be just one, containing all your checkboxes. Your ajax() call has a return: false, there isn't any such parameter. What you should be doing is return false; i.e. return a false before calling ajax(). Also, do NOT use $('#myForm').submit() - that kind of defeats the purpose.
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.