I'm trying to send a form with AJAX and without submit button. Everything works just fine with submit button, but if I try to submit the form by clicking something else it won't work.
I searched for an answer for quite a while, but didn't find anything useful so far.
function ajaxSubmit(){
var showHideForm = jQuery('#dashboard-hki-subjects-form').serialize();
$.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: showHideForm,
success:function(data){
$('#formMessage').html(data);
}
});
return false;
}
$('.show-hide-subject-button').click(function(){
var subject = $(this).attr('subject');
$('#hide-subject').attr('value',subject);
});
$('#dashboard-hki-subjects-form').submit(ajaxSubmit);
I'm using Wordpress, so the AJAX is handeled with admin-ajax.php.
What if you just use an enter key handler...
Try this:
<input type="text" name="txt"/>
$('#txt').keydown(function (e){
if(e.keyCode == 13){
console.log('you pressed enter!'); //prints to the browser console...
ajaxSubmit(); //the function you described in your question...
}
})
You have to bind the ajaxSubmit() to whatever there is you're clicking, otherwise there simply will be nothing on your page to trigger it. E.g., if you want your form to be submitted whenever you click on the .show-hide-subject-button element, you have to call ajaxSubmit() explicitly:
$('.show-hide-subject-button').click(function(){
var subject = $(this).attr('subject');
$('#hide-subject').attr('value',subject);
ajaxSubmit();
});
Related
I have a form, I have a submit button. On click of the submit button, I suspend the form from submitting and peform an AJAX request. This sometimes works and sometimes doesnt. Can you see any flaws in the code below?
$('#ambition_submit').click(function(e){
e.preventDefault();
var output = getTimelineEntryData(data.toJSON());//console.log(output);
$.getJSON('http://www.test.com/x/api/add_subgoals.php',{action:'add.subgoals',ambition_id:ambition_id,subgoals:output}, function (response) {
//var this_url = this.url; console.log(this_url);
if (response.status == 200) {
var result = response.message;//alert(response.message);
$('form[name=testing747]').submit();//console.log('Test ' + $('form[name=testing747]').length);
}
else{
alert(response.message);
}
});
});
Thanks
I previously had some issues with click in the past.
I changed it to live and fixed those issues. Maybe it won't fix yours, but you could give it a try:
$('#ambition_submit').live('click',function(){
});
For the most recent jquery version, it has been replaced by .on though.
Hope that helps!
I'm using this jQuery code to submit a dynamic form :
$('#formsite').on('submit', function (e) {
//prevent the default submithandling
e.preventDefault();
//send the data of 'this' (the matched form) to yourURL
$.post('inc/siteform.php', $(this).serialize());
});
but this method only sends the data to the PHP file. I want also that it redirects me to there, as an ordinary PHP POST submission.
How can I do it?
Here is the full testing site: http://edge-americas.com/control/main.html
UPDATE:
Using the method JQuery redirects me but it doesn't send the formdata at the same time so I can't use $_POST[] variables:
$('#formsite').on('submit', function (e) {
//prevent the default submithandling
e.preventDefault();
//send the data of 'this' (the matched form) to yourURL
$.post('inc/siteform.php', $(this).serialize(),function(response){
window.location = "inc/siteform.php";
});
});
Is there any other way to keep using jquery and solve it?
You can also use window.location.replace() and pass in the URL of where you want to be redirected as a paramter.
Location.replace() for more information on the method.
Javascript works perfectly for this:
window.location.href = "URL";
Or as Andy pointed out if you want users to go back without issues simply drop the .
window.location = "URL";
You can redirect or refresh page after succcess or server answer. For example:
$.ajax({
url:"?show=ajax_request&action=add_offer",
type:"POST",
data: {var_to_send : somevar},
dataType: "json",
success: function(answer){
if ( answer.result == 'success' )
{
location.reload(); // refresh the page
}
else if ( answer.result == 'error' )
{
window.location.href = "http://google.com"; // redirect to another page
}
}
});
I have a ajax method of calling data from php file, i learned it from one of a blog, now it works file for submit button click function, but when i press enter the variables get shown in address bar and ajax process is not executed, Can any one please help me doing it on a press enter method....
This is my code:-
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("input[name='search_user_submit']").click(function() {
var cv = $('#newInput').val();
var cvtwo = $('input[name="search_option"]:checked').val();
var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
$("#SearchResult").html('<img src="../../involve/images/elements/loading.gif"/>').show();
var url = "../elements/search-user.php";
$.post(url, data, function(data) {
$("#SearchResult").html(data).show();
});
});
});
});//]]>
</script>
I have tried it by taking an if condition along with keypress event still its not working:-
if (e.keyCode == 13) { // Do stuff }
else { // My above code }
//In this also it seems that i am doing something wrong.
Can anybody please enlighten me oh how to do it.
My input field is:-
<input type="text" name="searchuser_text" id="newInput" maxlength="255" class="inputbox MarginTop10">
My submit button is:-
<input class="Button" name="search_user_submit" type="button" value="Search">
You can try with event.preventDefault(); for enter keypress.
Thanks.
When you type enter there is executed default onSubmit handler for a form. You can use submit jquery function to handle both enter and click on submit button.
$("form").submit(function() {
var cv = $('#newInput').val();
var cvtwo = $('input[name="search_option"]:checked').val();
var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
$("#SearchResult").html('<img src="../../involve/images/elements/loading.gif"/>').show();
var url = "../elements/search-user.php";
$.post(url, data, function(data) {
$("#SearchResult").html(data).show();
});
return false;
});
return false in this function will prevent submit of the form.
I have a form that submits through Ajax, which works perfectly at the moment. I tried to add a confirm option to allow / prevent the Ajax submission through adding the following lines:
var answer = confirm('Submit now?');
return answer // answer is a boolean
if(answer) { ... }
Below is my full function, which, as you can see, fires on clicking the submit button. The error occurs when the user selects okay in the dialog. The entire page is refreshed and any single Ajax warnings are returned at the top of a blank screen. In a normal case, without this confirm code, the error messages appear in the div#result tag at the bottom of the form.
$("#submitbtn").click(function() {
var answer = confirm('Submit now?');
return answer // answer is a boolean
if(answer) {
$('#result').html('<img id="loading" src="images/loading.gif" />').fadeIn();
var input_data = $('#create_po').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('#loading').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
}
});
How should I implement a confirm dialog that doesn't refresh the screen? Any suggestions would be greatly appreciated. Thanks!
You are doing return answer. Which doesn't make any sense here.
It will stop the JavaScript function, and will return the boolean. Remove this line, and you're set
Also, add this to make your submit not fireing if the confirm box is false ;)
if (answer){
// your ajax call
}
else {
return false;
}
Do not use this:
<input type="submit">
Use this:
<input type="button">
A submit button automatically submits a form. A regular button does nothing. You can use that to listen for clicks and THEN submit your form, or not.
i made this form:
<form id="form" name="msgform" method="" action="">
<input type="text" size="40" id="msg" name="message"/>
<input type="submit" id="button" name="clicker" value="click" />
</form>
and this jquery script:
$(document).ready(function(){
$("#button").click(function(){
$("#form).submit(function(){
var submision= $("#form).val();
$.post("txt/process.php", submision, function(data){
alert(data);
});
});
});
});
and this is the process.php file:
<?php
echo $_POST['message'] . "";
?>
now when i click the button the form is submited, but it sends it using the GET method because i can see it in the adress bar, but it never gets sent to the php file, and i checked to see if the names are correct and if i specify the POST method it still doesnt go to the php file.
is the server or browser ignoring the code? or am i doing the whole thing wrong?
thanks
Please find the following code, it works and please go through with the documentation, it will tell you that what the mistake was being done.
$(document).ready(function(){
$("#button").click(function(){
$("#form").submit(function(){
/* var submision= $("#form).val();
THIS DOESN'T WORK TO GET ALL OF THE ELEMENTS IN
FORMAT TO PASS TO $.post EVENT,
We can do this as I did in following example
*/
$.post("txt/process.php", { msg: $("#msg").val() }, function(data){
alert(data);
});
/* Also you didn't put return false statement just at the end
of submit event which stops propagating this event further.
so it doesn't get submitted as usually it can be without ajax,
So this stops sending the form elements in url. This was because
by default if you define nothing in method property for form
then it consider it as GET method.
*/
return false;
});
});
});
Let me know please you are facing any issue.
You don't need to register the submit event for the form inside the click handler of the button. As it is a submit button it will automatically try to submit the form for which you register the corresponding handler:
$(function() {
$('#form').submit(function() {
// Get all the values from the inputs
var formValues = $(this).serialize();
$.post('txt/process.php', formValues, function(data) {
alert(data);
});
// Cancel the default submit
return false;
});
});
$("#form).submit(function(){
see if this selector is missing a "
$("#form").submit(function(){