I am having issue making a form be sent using ajax.
Here is my code:
<form id="form" method="get">
<input type="text" name="name" id="name"><br>
<input type="text" name="email" name="email"><br>
<input type="submit" id="submit" value="submit">
</form>
$('#submit').click(function(event){
alert('ajax');
});
The "ajax" alert shows, but then the page gets reloaded! How can I stop this behaviour?
You have to use preventDefault
$('#submit').click(function(event){
event.preventDefault();
alert('ajax');
});
use $.submit() instead of click :)
$('#form').submit(function(event){
alert('ajax');
// here some ajax functions for sending via get or post ;)
return false; // this stops loading the action site.. its something like e.preventDefault() on links
});
Related
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 want to fill a form then press a specific button. Is it possible to choose the button using casper.fill method?
Not directly with the fill() method, bu with the click() one:
HTML:
<form name="plop">
<input type="text" name="q">
<input type="submit" name="foo" value="Foo!">
<input type="submit" name="bar" value="Bar!">
</form>
Casper script:
// casperjs script
casper.fill('form[name="plop"]', {
q: 'yeah',
});
casper.click('input[type="submit"][name="bar"]');
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();
});
Below is the form which i loaded via ajax. When i run the form page directly then autofocus on c_name works in firefox but when loaded with ajax it doesn't! It works fine with opera/safari/chrome though!
<form action="client_entry_action.php" method="post" id="client_entry_form" name="client_entry_form">
<fieldset id="client_info_1">
<label for="c_name">Name:</label>
<input type="text" name="c_name" required placeholder="Name" autofocus="autofocus" />
<label for="c_phone">Phone Number:</label>
<input type="tel" name="c_phone" required placeholder="Mobile/Phone Number" />
<label for="c_email">Email:</label>
<input type="email" name="c_email" required placeholder="email#example.com" />
<label for="c_address">Address:</label>
<textarea name="c_address" ></textarea>
</fieldset>
<fieldset id="client_info_2">
<label for="c_info">Additional notes:</label>
<textarea name="c_info" ></textarea>
<input type="submit" name="add_client" value="Add Client" />
</fieldset>
</form>
Autofocus is only done before onload has fired; it's meant to be a declarative way of specifying focus on initial page load.
use settimeout after ajax call on the div, or using jquery use .ajaxComplete, or .done
function theAjax(){
//after the ajax actions loaded......
//use settimeout to refocused on the input..
var t=setTimeout("focusMe()",500);
}
function focusMe(){
document.getELementById("theInput").focus(); //the new input
}
//using jquery use .ajaxComplete, or .done
$( document ).ajaxComplete(function() {
$("#focusOnMe").focus();
}
I know this is old, but I just had this problem and maybe it helps someone.
If you use jQuery this works:
$("input[name='c_name']").focus();
Javascript would be something like this (general example):
document.getElementById('element').focus();
But you have to call that function after your form is loaded via ajax!
This worked for me:
$.get("/url.html", function(html) {
var form = $("#form", html);// extract form with id=form from ajax response
if (window.InstallTrigger) {// Detect Firefox and add focus script
// place focus on first element containing autofocus attribute
form.append("<script>$('[autofocus]')[0].focus();<\/script>");
}
$("#element").replaceWith(form);// Replace element with id=element with form
});
This is different from other solutions posted here because the script that places focus on the autofocus element is added to the DOM at the same time as the autofocus element itself thus ensuring that the script runs after the DOM is finished updating.
Note that this solution requires jQuery. If you are not using jQuery you can still do this easily enough with querySelectorAll
document.getElementById("element").innerHTML = form+"<script>document.querySelectorAll('[autofocus]')[0].focus()<\/script>"
EDITED: After two hours trying to solve my problem I was obfuscated, so I came to StackOverflow, I read related questions that did´nt solve my problem, and finally I asked help. I simplified my code and posted this question. Testing the code you gave me I could see where I was failing. That's embarrassing: just before calling $.post I was changing the content of the form div to show an ajax loader gif, so when $.post was called the inputs had been deleted.
Hello. I´m testing jQuery AJAX functions, and I can´t send data by $.post.
This is the process:
form.php: a html form and a jquery script that send values by $.post and alerts the result
process.php: a php script that receives the values, work with them and returns something.
FORM
<form action="#" method="post">
<label for="name">Your name</label>
<input type="text" name="name" id="name" />
<label for="email">Your email</label>
<input type="text" name="email" id="email" />
<input type="button" value="send" id="btnSend" />
</form>
JQUERY
function sendAjaxPost(){
$.post('process.php',{
name: $('#name').val(),
email: $('#email').val()
},
function(data){
alert(data);
});
}
$('#btnSend').click(function(){
sendAjaxPost();
}
PROCESS.PHP
foreach($_POST as $key => $value)
{
echo $key . ' => ' . $value . '<br/>';
}
I can´t send $('#name').val(), but if I send a string everything works fine. I have alert $('#name').val() inside the jQuery function and it´s possible to read it. I have followed the sintaxis shown in $.post.
Could someone give me a light? Thanks in advance
If you can read the input fields on the function, you can try this,
function sendAjaxPost(){
name=$('#name').val();
email=$('#email').val();
alert(name);
alert(email);
//If this two alerts the name and email, try with $.get();
$.post('process.php',{
name: name,
email:email
},
function(data){
alert(data);
});
}