I have been trying for the last couple of days to serialize a form in jquery and pass it to php. For some reason it just doesn't work... Question, What steps do you take to serialize a form in Jquery... I get the id of the form pass it into $('#fomrID').serialize()...
And it still doesn't work. When I debugg with firebug All I get is an empty string... Do you use the name or the Id of the form. Do you use e.disableDefalut or whatever that is? I can't figure out why I can't serialize my form please help
$('#profilepicbutton').change(function(){
alert("Boy I hate PHP");
var formElement = $('#profilepicinput').attr('value');
dataString = $("#registerpt3").serialize();
$.ajax({
type: "POST",
url: "register3.php",
data: dataString, //"profilePic="+formElement,
success: function(data){
alert( "Data Saved: " + data );
$.ajax({
type: "POST",
url: "retrievePic.php",
data: "",
success: function(data){
alert(data);
var image = new Image();
$(image).load(function(){
console.log("we have uploaded this image");
}).attr('src', 'images/');
alert("");
},
error: function(msg){
alert("");
}
});
},
error:function(msq){
alert("" + msg);
}
}
);
});
<form id="registerpt3" name="registerpt3" enctype="multipart/form-data" action="register3.php" onSubmit="" method="post">
<input name="profilepicinput" type="file" id="profilepicbutton" />
</form>
According to http://api.jquery.com/serialize
For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.
Also, simply calling serialize won't actually upload the picture for you. If you want to do an asynchronous picture upload (or any file for that matter) I'd suggest looking into something like Uploadify: http://www.uploadify.com/
Related
I have the following snippet.
var myData = {
video: $("input[name='video[]']:checked").serialize(),
sinopse: $("#sinopse").val(),
dia: $("#dia").val(),
quem: $("#quem").val()
};
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
$(".video").val(''); //empty text field on successful
$("#sinopse").val('');
$("#dia").val('');
$("#quem").val('');
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
},
all variables except "video" are getting saved in database. What can be wrong here? (maybe the problem is with jquery)
refer this link:- serialize
You can get selected checkboxes values by
$("input[type='checkbox']:checked").serialize();
I've got a form set up with 4 input fields (login, email, password, password again) when I click submit it validates the input and sends it to process-register.php via GET.
Now here's the problem when I use the data variable as ajax data it all works perfectly fine but if I use $("form").serialize() it doesn't work anymore...
EDIT: It doen't pass the variables to process-register.php
I've outputted both strings with document.write and they are exactly the same!!!
How is this possible?! Please help me fix this...
var data = 'login=' + login.val() + '&email=' + email.val() + '&pass=' + pass.val() + '&confirmpass=' + confirmpass.val();
//document.write($("form").serialize()); --> The output is
//document.write(data); --> exactly the same! :O
$('input').attr('disabled','true');
$('.loading').show();
$.ajax({
url: "process-register.php",
type: "GET",
data: data, //--> works!
data: $("form").serialize(), //--> doesn't work!
cache: false,
success: function (echo) {
//success code...
}
});
Move the line $('input').attr('disabled','true'); to after serializing the data.
Like below.
var data = $("form").serialize();
$('input').attr('disabled',true);
$.ajax({
url: "process-register.php",
type: "GET",
data: data
});
From API Documentation (http://api.jquery.com/serialize/)
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
It will not serialize disabled controls also
I'm working on a small project that requires Ajax to fetch data from database and update a page. The query to the database is built on the fly by the user and the query strings build like a chain. So for example the first item of the chain effects the next and the next and so on. Therefore it creates a list of post variables that I can't "know" ahead of time. I figured this would be a pretty simple thing to achieve however it's proving not to be. Here is my issue.
When I use a .changed event and try to seralize the form before posting it. I get nothing but empty strings. I've noticed that if I hard code the post variables everything works just fine. Is there something I'm missing? Does .changed not have a seralize method?
I am also using a CURL bridge since the server with the data is on another domain. I don't think that is causing any issues though. I believe it has to do with my event choice.
Here is the code:
$('#selector').change(function() {
$.ajax({
type: "post",
dataType: 'json',
url: "/pages/curlbridge.php",
data: $("#queryform").serialize(), //"select=all&date=2013"
success: function(data)
{
console.log(data);
var resultset = data;
}
});
Was Asked to attach the HTML. It's just a simple form
<form id="selector">
Select: <input type="text" id="select" />
Date: <input type="text" id="date" />
</form>
<br />
I agree with #m1ket that #queryform doesn't exist, although you can't use serialize() on a single input element, so the following line is incorrect:
data: $(this).serialize(), //"select=all&date=2013"
Perhaps what you can do is this (which gets all the data in the form the #selector is a part of):
data: $(this).closest('form').serialize(), //"select=all&date=2013"
EDIT
My bad, I didn't pay attention to the HTML posted in the original question
Scope issue maybe? Does this work:
$('#selector').change(function() {
var formData = $(this).serialize();
$.ajax({
type: "post",
dataType: 'json',
url: "/pages/curlbridge.php",
data: formData, //"select=all&date=2013"
success: function(data)
{
console.log(data);
var resultset = data;
}
});
});
$("#queryform") does not exist. Your jQuery should read like this:
$('#selector').change(function() {
$.ajax({
type: "post",
dataType: 'json',
url: "/pages/curlbridge.php",
data: $(this).serialize(), //"select=all&date=2013"
success: function(data)
{
console.log(data);
var resultset = data;
}
});
});
Also, are you using .change() because you want to submit the AJAX request every time a user enters a key?
JQUERY:
$(document).ready(function(){
$('form').submit(function(){
var content = $(this).serialize();
//alert(content);
$.ajax({
type: 'POST',
dataType: 'json',
url: 'http://localhost/test/generate',
timeout: 15000,
data:{ content: content },
success: function(data){
$('.box').html(data).fadeIn(1000);
},
error: function(){
$('.box').html('error').fadeIn(1000);
}
});
return false;
});
});
HTML:
<form>
<input type="checkbox" value="first" name="opts[]">
<input type="checkbox" value="second" name="opts[]">
<input type="checkbox" value="third" name="opts[]">
<input type="submit">
</form>
How do i process (or read) multiple checked checkbox's value in PHP? I tried doing $_POST['content'] to grab the serialized data but no luck.
Replace:
data:{ content: content } // <!-- you are prefixing with content which is wrong
with:
data: content
Now in your PHP script you can use $_POST['opts'] which normally should return an array.
Try
echo $_POST['opts'][0]. "<br />";
echo $_POST['opts'][1]. "<br />";
echo $_POST['opts'][2]. "<br />";
You post an array to the Server and it is available in the post variable 'opts'. Remember: Unchecked boxes dont get posted.
The chosen answer still didn't work for me, but here is what did:
var checkedBoxesArr = new Array();
$("input[name='checkedBoxes']:checked").each(function() {
checkedBoxesArr.push($(this).val());
});
var checkedBoxesStr = checkedBoxesArr.toString();
var dataString = $("#" + formID).serialize() +
'&checkedBoxesStr=' + checkedBoxesStr;
[The above code goes in your javascript, before serializing the form data]
First, cycle through the checked boxes and put them into an array.
Next, convert the array to a string.
Last, append them to the serialized form data manually - this way you can reference the string in your PHP alongside the rest of the serialized data.
This answer came partly from this post: Send multiple checkbox data to PHP via jQuery ajax()
there are an Error in your code :
The url should be url: 'http://localhost/test/generate.php' with the extension name
ok, i have these two input fields where a user puts in two twitter names. When the submit button is pressed, both names should be send to a .php file with the POST method that checks if both usernames exsist on twitter.
Sending and receiving the answer for one value already works, but how can i also add the second? I already have this:
<script type="text/javascript">
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
**data: {'user1' : $('#user1').val() },** //how to append user2?
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}
</script>
the fields in the form:
<td><input type="text" name="user1" id="user1"/></td>
<td><input type="text" name="user2" id="user2" /></td>
and this is how the values should be able to be cathed in the .php:
$user1 = $_POST['user1'];
$user2 = $_POST['user2'];
So the question really is: how can I append the second username to the above jQuery POST function?
p.s. I am starting with javascript and jQuery, how do you guys work with this as no error messages are shown ever.. is there an environment/programm where I get debugging help with javascript?
data: {
'user1' : $('#user1').val(),
'user2' : $('#user2').val()
},
It's a simple enough extension-- just follow the same pattern.
<script type="text/javascript">
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
data: {
'user1' : $('#user1').val(),
'user2' : $('#user2').val()
},
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}
</script>
That said, jQuery does also have a .serialize() function that you could apply on the containing form, which automatically serializes the whole form. This could prove useful for you.
EDIT: It's worth mentioning that the jQuery selectors above look on the id for the name "user1" (etc.), whereas the PHP script expects the form elements' name to be "user1" (etc.). Here you have them as the same thing.
A more reliable jQuery selector that would allow you to always use the name in both jQuery and PHP is simply to use an attribute selector in jQuery:
$('input[name="user1"]').val()
This will catch any <input> element with the name attribute set to "user1".
You're probably looking for serialize. Your code would look something like this:
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
data: $("#your_form").serialize(),
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}
If you're sure you don't want serialize you could try this:
data: {'user1' : $('#user1').val(), 'user2' : $('#user2').val() }
As for your PS, check out Firebug and Webkit developer tools.
You actually don't even need the serialize function. If you just select your form, all form elements will be passed. This way if you just add another form element, like another textbox, it will all be passed in your ajax call.
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
data: $("#your_form"),
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}