I'd like to validate a form with ajax where there is a checkbox field.
I tried in this way but I can't get the value of checkbox field.
MY FORM
<form class="Form" action="?">
<input type="text" name="type" id="type" />
<input type="text" name="action" id="action" />
<input type="checkbox" name="chk" id="chk" value="1">
<input type="submit" value="INSERT" />
</form>
MY AJAX
$(".Form").submit(function( event ) {
event.preventDefault();
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
chk: $("#chk").val()
},
function(data){
$("#msg").html(data);
}
});
CONTROL.PHP
// CHECKBOX VALUE
if($_POST["chk"] == 1){
echo "THE VALUE IS 1";
exit;
}
How I could Do this? Thanks
EDIT
I tried pass to control page the chk with no success
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
chk: $("#chk").prop('checked')
},
and
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
$("#chk").prop('checked')
},
How can I define the name of my checkbox field in ajax post? thanks
This returns true if the checkbox is checked:
$("#chk").prop('checked')
And in PHP check it like this:
if(isset($_POST["chk"])) // true
For check boxes, php passing value if only check box selected. so you can check is that check box received to PHP page. if its received user has selected it or if user not selected, no check box name passing to PHP page.
so you can check
if(isset($_POST["chk"]))
...
if this returns true, that means user selected check box and if not user not selected...
One solution is you send a zero value with the same name in a hidden input
<input type="hidden" name="chk" value="0">
<input type="checkbox" name="chk" id="chk" value="1">
and if chk is checked the hidden input chk will be overriden in the $_POST
Related
thank you in advance for any help given. I'm just learning jQuery and AJAX and would appreciate some help with the following code. All validation rules work, the form submits and the page does not refresh. The problem is that the form values are not clearing/resetting to default after the submit has triggered. Thoughts?
**********EDITED to include HTML markup*************
<div id="form">
<h1 class="title">Contact Us</h1><!-- title ends -->
<p class="contactUs">Ask about our services and request a quote today!</p><!-- contactUs ends -->
<div id="success"><p>Your message was sent successfully. Thank you.</p></div>
<p id="required">* All fields required.</p>
<form name="form" id="contactMe" method="post" action="process.php" onSubmit="return validateForm()" enctype="multipart/form-data">
<input class="txt" type="text" maxlength="50" size="50" required name="name" value="<?php echo $_GET['name'];?>" placeholder="Name" />
<div id="nameError"><p>Your name is required.</p></div>
<input class="txt" type="text" maxlength="50" size="50" required name="email" value="<?php echo $_GET['email'];?>" placeholder="Email Address" />
<div id="emailError"><p>A valid email address is required.</p></div>
<textarea name="message" rows="6" cols="40" required placeholder="Message"></textarea>
<div id="messageError"><p>A message is required.</p></div>
<input type="hidden" maxlength="80" size="50" id="complete" name="complete" placeholder="Please Keep This Field Empty" />
<input type="submit" value="SUBMIT" name="submit" />
<input type="reset" value="RESET" name="reset" />
</form>
</div><!-- form ends -->
//hide form submit success message by default. to be shown on successfull ajax submission only.
$(document).ready(function() {
if ($('#success').is(':visible')){
$(this).hide()
}
});
//form validation
function validateForm() {
//name
var a=document.forms["form"]["name"].value;
if (a==null || a=="")
{
$('#nameError').fadeIn(250);
return false;
}
//email address
var c=document.forms["form"]["email"].value;
var atpos=c.indexOf("#");
var dotpos=c.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length)
{
$('#emailError').fadeIn(250);
return false;
}
//message
var e=document.forms["form"]["message"].value;
if (e==null || e=="")
{
$('#messageError').fadeIn(250);
return false;
}
}//javascript form validation ends
//ajax submit and clear form on success
$(function () {
$('form').on('submit', function (e) {
var myForm = validateForm();
if (myForm == false){
e.preventDefault();//stop submission for safari if fields empty
}
else{
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
$('#success').fadeIn(250);
if ($('#nameError, #emailError, #messageError').is(':visible')) {
$('#nameError, #emailError, #messageError').fadeOut(250);
}
$('form')[0].reset();//clear form after submit success
}//success ends
});//ajax ends
e.preventDefault();//prevent default page refresh
}//else ends
});//submit ends
});//function ends
//if reset button is clicked AND messages displayed, remove all form html messages
$(document).ready(function() {
$('#form input[type="reset"]').click(function() {
if ($('#success, #nameError, #emailError, #messageError').is(':visible')) {
$('#success, #nameError, #emailError, #messageError').fadeOut(250);
}
});
});
By giving your input id="reset" and/or name="reset", you effectively overwrote the form.reset method of the form because by doing so you made form.reset target the reset button. Simply give it a different id and name value.
Never give elements name or id attributes that equal the name of a property of a dom node.
I have a form on my website that pushes to my e-mail address. Previously before I wrote an ajax function the form would successfully push to my e-mail address. Only problem is when the user fills out the form it takes them to another page upon submitting the form. The HTML for my form is below.
<form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">
<label for="name">Name</label> <br>
<input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />
<label for="email">E-mail</label> <br>
<input type="email" name="email" class="required email" placeholder="Name#email.com" title=" (Your email is required)"> <br />
<label for="message">Message/Comment</label> <br>
<textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />
<input type="submit" name="submit" id="submit" value="Send Message" />
</form>
</div><!-- /end #contact-form -->
The ajax call I wrote is...
$("#submit").on('click', function(){
var formData = $('#contact').serialize();
$.ajax({
type:"POST",
data:"formData",
url:"Email-form.php",
success: function(data){
$('#contact').html('<p>Your message has been sent</p>');
}
});
});
My javaScript console shows no errors so I think the problem is with my jQuery logic. On Chrome when I click submit I am redirected to my homepage. On Firefox the form submits but I am redirected to another page, therefore it is completely ignoring my AJAX call. Can someone with AJAX experience tell me what I'm doing wrong? Also I would love to attach a message if the call fails. Can I add 'failure:' and for the value put a function just like I did for success?
You have two issues
your form is submitting normally
you're attempting to post the wrong data
To prevent the form from submitting you can return false from the jQuery click handler or call preventDefault from the event object.
You are sending a string "formData" as the form data instead of the string in the formData variable
$("#submit").on('click', function(event){
var formData = $('#contact').serialize();
$.ajax({
type:"POST",
data:formData,
url:"Email-form.php",
success: function(data){
$('#contact').html('<p>Your message has been sent</p>');
}
});
event.preventDefault();
// or
return false;
});
There's a good chance that the normal form submit action is still taking place, even though you have an AJAX call as well. An easy fix for this may be to simply change the button type from submit to button. That way your click handler will still work, but it won't perform the default action of submitting the form on its own.
<input type="button" name="submit" id="submit" value="Send Message" />
i have a contact form on http://daniloportal.com/NPC2/contact.html
Now this ajax script works very well, but i have other contact forms that i would like to use the same script for. so when i tried to create mulitple instances of the script, i noticed it stopped working because the ID name is not specifically ajax-contact-form. take a look at the code:
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email " title="Email *" />
<input type="text" name="email" value="Email *" title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
and heres the JS
$("#ajax-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact_form/contact_process.php",
data: str,
success: function(msg) {
// Message Sent - Show the 'Thank You' message and hide the form
if(msg == 'OK') {
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
} else {
result = msg;
}
$('#note').html(result);
}
});
return false;
});
Now if i were to switch that ID name on both and MATCH them, the script stops working- Theoretically it should work- not sure whats wrong with this.
as always any help is appreciated, thanks!
If you are trying to access two elements with the same id with jQuery - nothing gonna happen. Each element must have a unique identifier, otherwise you should use classes.
However, can you give us the markup of another form?
I'm building a ajax based shopping cart with Codeigniter, and the add / remove functions work perfectly. I am now trying to add an option for adding multiple items, and can't get it to work.
Here's the markup I'm using. I'm not sure if it's the best design, but it's working with the non-ajax function, so I guess it should be fine.
<form action="cart/add_multiple" method="post" accept-charset="utf-8">
<input type="hidden" name="items[0][id]" value="3571310" />
<input type="hidden" name="items[0][qty]" value="1" />
<input type="hidden" name="items[0][price]" value="59.00" />
<input type="hidden" name="items[0][name]" value="London" />
<input type="hidden" name="items[0][heb_name]" value="לונדון" />
<input type="hidden" name="items[0][full_price]" value="59.00" />
<input type="hidden" name="items[0][discount_price]" value="59.00" />
<input type="hidden" name="items[1][id]" value="7397903" />
<input type="hidden" name="items[1][qty]" value="1" />
<input type="hidden" name="items[1][price]" value="29.00" />
<input type="hidden" name="items[1][name]" value="London Triple" />
<input type="hidden" name="items[1][heb_name]" value="לונדון טריפל" />
<input type="hidden" name="items[1][full_price]" value="29.00" />
<input type="hidden" name="items[1][discount_price]" value="29.00" />
<input type="submit" name="add_multi" value="add to cart" /></form>
The ajax script is as follows:
$(document).ready(function() {
$(document).on("submit", "div#winning_combo_small form", function () { //catches every click on the submit button of the "add to cart" form
var items = $(this).serialize();
alert(items);
$.post(base_url + "cart/add_multiple", {items: items, ajax: '1' },
function(data){
if (data =='true')
{ // Interact with returned data
$.get(base_url + "cart", function(cart){ // Get the contents of the url cart/show_cart
$("#cart_sidebar").html(cart);
})
$.get(base_url + "cart/count_items", function(items){
$("#cart_items").html(items);
})
}
});
return false;
})
});
But it's not working, because the add_multiple function receives the data as a string, not an array. Do I have to decode the data somehow to convert it to an array? Do the Hebrew characters get in the way and mess it all up?
I should say that when posting the form the regular way, without ajax, the items are added to the cart and all works well. So what is the difference between the regular post and the ajax post?
Well, I got it to work, though I'm not sure if it's the most elegant way.
Here's what I did:
In the ajax script, I changed var items = $(this).serialize(); to var items = $(this).serializeArray();. I now get an array instead of a string, but it's not the format I need to insert into the cart. So I looped over this array to create an array in the desired format, and used that new array to insert into the cart.
This is my add_multiple function under the cart controller:
function add_multiple()
{
$items = $this->input->post('items');
$ajax = $this->input->post('ajax');
// Check if user has javascript enabled
if($ajax != '1'){
$this->cart->insert($items); //if posted the regular non-ajax way, the fields will be in an array in the correct format
echo 'false';
redirect('cart'); // If javascript is not enabled, reload the page with new data
}else{
$i = 0;
foreach($items as $key=>$form_field)
{
$field_name = $form_field['name'];
$from_char = strrpos($field_name, '[') +1 ;
$length = strlen($field_name)-$from_char-1;
$field = substr($field_name,$from_char,$length);
$data[$i][$field] = $form_field['value'];
if ($field == "discount_price") $i+=1; // I know 'discount price' is always the last field
}
$this->cart->insert($data);
echo 'true'; // If javascript is enabled, return true, so the cart gets updated
}
}
I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});