Im trying to send the values of multiple select box to a mail/check script with ajax
But when the variable reaches the php script the array lost its first record and i cant find how
jQuery(function() {
var paraTag = jQuery('input#submit').parent('div');
jQuery(paraTag).children('input').remove();
jQuery(paraTag).append('<input type="button" name="submit" id="submit" class="btn btn-default btn-lg" value="Verstuur" />');
jQuery('#contact-form input#submit').click(function() {
jQuery('#contact-form').append('<img src="images/loading.gif" class="loaderIcon" style="width:100px; margin:-20px;" alt="Loading..." />');
var name = jQuery('input#name').val();
var adres = jQuery('input#adres').val();
var woonplaats = jQuery('input#woonplaats').val();
var email = jQuery('input#email').val();
var postcode = jQuery('input#postcode').val();
var bedrijf = jQuery('input#bedrijf').val();
var comments = jQuery('textarea#comments').val();
var tel = jQuery('input#tel2').val();
var hidden = jQuery('input#hidden2').val();
var over_select = jQuery('#over').serialize();
console.log(over_select);
jQuery.ajax({
type: 'post',
url: 'sendEmail.php',
data: 'hidden=' + hidden + '&over=' + over_select + '&post=' + postcode + '&plaats=' + woonplaats + '&adres=' + adres +'&name=' + name + '&email=' + email + '&tel=' + tel + '&bedrijf=' + bedrijf + '&comments=' + comments,
success: function(results) {
jQuery('#contact-form img.loaderIcon').fadeOut(1000);
jQuery('#response').html(results);
}
}); // end ajax
});
In the mail script i put "over" in a php variable and when i print_r() it, it lost its first selection.
Can you please help me out?
Try sending your data like this
jQuery.ajax({
type: 'post',
url: 'sendEmail.php',
data : {'hidden': hidden, 'over': over_select, 'post': postcode, 'plaats': woonplaats, 'adres': adres,'name':name,'email': email, 'tel': tel, 'bedrijf':bedrijf, 'comments': comments},
success: function(results) {
jQuery('#contact-form img.loaderIcon').fadeOut(1000);
jQuery('#response').html(results);
}
}); // end ajax
Then in the php part use
url_decode($_POST['over_select']);
If you run .serialize() on your multiple select it will return something like this:
over[]=Val1&over[]=Val2
Your data string then becomes:
over=over[]=Val1&over[]=Val2
Which is probably your problem. Try removing the "over=" in your data string.
Related
I validate my form with both client and sever side scripting. First I validate it with jQuery then it goes to php validation and if it returns success or something like that I want to submit the form but some how the condition does not work. However in html err_msg I get success text but its not working.
jQuery.validator.setDefaults({
submitHandler: function () {
var name = $na('#inf_field_FirstName').val();
var password = $na('#inf_field_Password').val();
var cpass = $na('#cpass').val();
var email = $na('#inf_field_Email').val();
var age = $na('#inf_custom_Age').val();
$na.ajax({
type: "POST",
url: '<?php bloginfo('
template_url ')?>/user_create.php',
data: 'name=' + name + '&email=' + email + '&password=' + password + '&cpass=' + cpass + '&age=' + age,
cache: false,
success: function (result) {
jQuery('.err_msg').html(result);
if (jQuery('.err_msg').html == 'sucess') {
jQuery("#inform").submit();
} else {
alert('error');
}
}
});
}
});
use jQuery("#inform")[0].submit();
otherwise, if u have submit button in your form just trigger that button
jQuery("#submit_btn_id").trigger('click')
I'm trying to add ajax form submission to a PHP web app I'm working on using jquery. The form is being submitted and writing to a database, but it'll still doing it all with a refresh.
Here's my code:
$("form#form_customer").submit(function() {
var customer123first_name = $('input[name=customer123first_name.]');
var customer123last_name = $('input[name=customer123last_name.]');
var customer123date_of_birth = $('input[name=customer123date_of_birth.]');
var customer123email_address = $('input[name=customer123email_address.]');
var customer123telephone_number = $('input[name=customer123telephone_number.]');
var customer123picture = $('input[name=customer123picture.]');
var customer123id_picture = $('input[name=customer123id_picture.]');
var customer123id_expiration = $('input[name=customer123id_expiration.]');
var data = 'customer123first_name=' + customer123first_name.val() + '&customer123last_name=' + customer123last_name.val() + '&customer123date_of_birth=' + customer123date_of_birth.val() + '&customer123email_address=' + customer123email_address.val() + '&customer123telephone_number=' + customer123telephone_number.val() + '&customer123picture=' + customer123picture.val() + '&customer123id_picture=' + customer123id_picture.val() + '&customer123id_expiration=' + customer123id_expiration.val();
$.ajax({
url: "inc/createObject.php",
type: "POST",
data: data,
cache: false,
success: function(data){
$('form_success').fadeIn();
}
});
return false;
});
Everything I've read online for this specific issue has found the return false; call to be in the wrong place or not there at all. I've checked mine is in the right place, I just can't find a reason why it's refreshing.
I know jquery is working because I use it to do popups windows which are working fine.
If you want to see the code in context, go to www.sfyfe.com/studioadmin
The problem is caused by the dot at the end of the selector on your $('input[name=customer123... lines. The dot isn't doing anything, and it's making the selector invalid. Removing the dots should fix the problem. Hope this helps!
Maybe
$("form#form_customer").submit(function(e) {
e.preventDefault();
});
You should send the data in JSON format , using : " data : data " is not valid ,
try:
$.ajax({
url: "inc/createObject.php",
type: "POST",
data:{dataField : data },
Your code should be like this.
$("form#form_customer").submit(function() {
var customer123first_name = $('input[name=customer123first_name]');
var customer123last_name = $('input[name=customer123last_name]');
var customer123date_of_birth = $('input[name=customer123date_of_birth]');
var customer123email_address = $('input[name=customer123email_address]');
var customer123telephone_number = $('input[name=customer123telephone_number]');
var customer123picture = $('input[name=customer123picture]');
var customer123id_picture = $('input[name=customer123id_picture]');
var customer123id_expiration = $('input[name=customer123id_expiration]');
var data = 'customer123first_name=' + customer123first_name.val() + '&customer123last_name=' + customer123last_name.val() + '&customer123date_of_birth=' + customer123date_of_birth.val() + '&customer123email_address=' + customer123email_address.val() + '&customer123telephone_number=' + customer123telephone_number.val() + '&customer123picture=' + customer123picture.val() + '&customer123id_picture=' + customer123id_picture.val() + '&customer123id_expiration=' + customer123id_expiration.val();
$.ajax({
url: "inc/createObject.php",
type: "POST",
data: data,
cache: false,
success: function(data){
$('form_success').fadeIn();
}
});
return false;
});
i have been looking around to try and work out how to pass 2 variables arcoss the page thru ajax i have at this moment a page where a check box dynamailcy saves its value to the database on the click of it but i need it to be able to only edit rows with a certian id at thi moment i have gotten this far but i am stuck. any help would be greatly appricated
$(function()
{
$("input[type='checkbox']").on('click', function(){
var chkName = $(this).attr('checked');
if($(this).is(":checked")) {
var checkVal = $(':checkbox[checked='+chkName+']').attr('value');
}
else{
var checkVal =$("#frm input:checkbox").attr("id");
}
var userid = $(':checkbox[checked='+chkName+']').attr('name');
$.ajax({
type: "GET",
url: 'request.php?uname=' + checkVal '&id'= + userid ,// this is where i cant send the &id varible across but i can send the checkVal
success: function(data) {
if(data == 1){//Succues
alert('Data was saved in db!');
}
if(data == 0){//Faliure
alert('Data was NOT saved in db!');
}
}
});
});
});
</script>
</head><body>
<div class="content">
<table border="0.02px" class="mytable">
<thead>
<th><strong>Paid</strong></th>
<th><strong>Repaired</strong></th>
<th><strong>Returned</strong></th>
</thead>
<tr>
<form id="frm" name="frm">
<td><input type="checkbox" value="Paid" id="Waiting on Payment" name="29" /></td>
<td><input type="checkbox" value="Repaired" id="Waiting on Repairs" name="uname" /></td>
<td><input type="checkbox" value="With Student" id="Awaiting Pickup" name="uname" /></td>
</form>
</tr>
</table>
</div>
Below line in your code is incorrect:
url: 'request.php?uname=' + checkVal '&id'= + userid ,
Should be:
url: 'request.php?uname=' + checkVal +'&id=' + userid,
Also consider using var isChecked = $(this).prop('checked'); to get the checked status of checkbox.
In line var chkName = $(this).attr('checked');, value of chkName would be 'undefined', while the checkbox is unchecked and so as the line
var userid = $(':checkbox[checked='+chkName+']').attr('name');.
If I understand your code correctly, then you may try this:
$("input[type='checkbox']").on('click', function() {
var $this = $(this);
var isChecked = $this.prop('checked');
var checkVal = isChecked ? $this.attr('value') : $this.attr("id");
var userid = $this.attr('name');
$.ajax({
type: "GET",
//url: 'request.php?uname=' + checkVal '&id' = +userid,
url: 'request.php?uname=' + checkVal +'&id=' + userid,
// this is where i cant send the &id varible across but i can send the checkVal
success: function(data) {
if (data == 1) { //Succues
alert('Data was saved in db!');
}
if (data == 0) { //Faliure
alert('Data was NOT saved in db!');
}
}
});
});
Currently there is an error with the url variable you are trying to send
Current:
url: 'request.php?uname=' + checkVal '&id'= + userid,
Corrected:
url: 'request.php?uname=' + checkVal + '&id=' + userid,
I think you are looking for .serialize from jquery.
You can check the api here. It has the example as well. Please go through the example how to pass serialized data.
Later in server end, you can have $_POST['<your input name here>'] to get the value.
In addition, I see you try to get back the value from server. You can always echo json_encode(<your data object here>) to send to server end.
I tried every thing which i using but ajax did not display the output in div BUT AJAX working fine.. is there any solution i could display result in div?
Tested in Firebug its display the reponse in XHR but display in DIV
Please solve me problem as soon as possible.
$(document).ready(function(){
$("#signup_form").click(function() {
// we want to store the values from the form input box, then send via ajax below
var name = $('#name').attr('value');
var email = $('#email').attr('value');
var passwords = $('#passwords').attr('value');
var passwords2 = $('#passwords2').attr('value');
var usernames = $('#usernames').attr('value');
var txt = $.ajax({
type: "POST",
url: "register.php",
data: "usernames=" + usernames + "& passwords="+ passwords + "& passwords2=" + passwords2 +"& email=" + email +"& name=" + name,
success: function(data){
//$('#messages').hide(function(){$('div.success').fadeIn();});
$('#messages').val(data);
}
});
return false;
});
});
My Dive
<div id="messages"> Message Display </div>
Thanks,
Try:
$('#messages').html(data);
.val is for textboxes as such.
i have an easy ajax script which sending data to php file with no problem
index.php
<script type="text/javascript">
$(function() {
$('#submit').click(function() {
$('#container').append('<img src="img/loading.gif" alt="Currently Loading" id="loading" />');
var name = $('#name').val();
var email = $('#email').val();
var comments = $('#comments').val();
$.ajax({
url: 'submit_to_db.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
}
});
return false;
});
});
</script>
with in the same page i have another form which needed to be submitted so i don't know how to do it without no conflict with in this function i already use ?
btw it won't processed with in the same php file it will use another file
I don't see what's the point. What kind of problems do you have in submitting more than one form? You're referencing elements by id.
Note that you really should change your code to intercept the $('#form-id').submit(), not the $('#submit').click event, because a form could be submitted also with enter key, or via javascript callbacks, not only using the submit button.
In your code what is the problem in doing something like this
$(function() {
$('#other-form-id').submit(function() {
$.ajax({
url: 'other-php-script.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
// your success handling
}
});
return false;
});
});
This is going to work as far as Dom ID are unique across the document.
BTW I strongly advise you to use this wonderful plugin to manage ajax form to keep your js code cleaner and simple. With that your code could be rewritten as:
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
});
});