I am developing a plugin based on another pro plugins in WordPress.
I would like to stop an ajax form submission which is written in another plugin. I can't change ajax code in another plugin.
Current Scenario
When I submit a form, it will take me to the new page but with that it also running an ajax request. I want to stop that ajax request. Simply, I just want to submit my form normally with new page.
HTML
<form id="redirect_form" class="abc-form" method="post" name="New Form" action="http://example.com/form-redirect">
<label for="form-field-field_1" class="abc-field-label">Test</label>
<input type="text" name="form_fields[field_1]" id="form-field-field_1" placeholder="Enter a location" autocomplete="off">
<button type="submit" class="form_redirect_to">Submit</button>
</form>
jQuery
jQuery(document).ready(function($){
jQuery('#redirect_form').on('submit',function(e){
e.preventDefault();
e.stopPropagation();
$(this).off("submit");
this.submit();
return false;
});
});
As you mentioned it by comment, the default Jquery event is bind using the class of the form.
By changing the default class, the event won't be triggered anymore in the default Jquery function.
Change:
<form id="redirect_form" class="abc-form">
By:
<form id="redirect_form" class="another-class">
Related
I'm having a little problem here.
I have a form with a jQuery that disables the submit input when the form is submited.The problem is: I use PHP to process the data when the input submit is clicked. But apparently the button is being disabled first, then PHP can not perform the processing. I need to find a way to prevent this, take a look in the code snippets:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='submit' name='finish' value='Send'/>
</form>
jQuery function to disable:
$('.send').on('submit', function()
{
$(this).find('input[type="submit"]').prop("disabled", true);
});
And then the PHP code to process:
if(isset($_POST['finish']))
{
//Do things
}
As I said, the PHP don't process the form because JS disabled the button to prevent multiple submitions. How to process PHP before disable the button? Thanks!
Since you are disabling the submit button it will not get send over to to server in the $_POST variable so your code doesn't work, as you have said.
Another way to do what you are looking for is to create a hidden HTML input
<input type="hidden" name="form">
Then when you check if the form is send, you will use
if(isset($_POST['form']))
{
//Do things
}
You can solve it easily changing your submit button by a simple button:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='button' name='finish' value='Send'/>
</form>
$('input[name="finish"]', '.send').on('click', function(){
$(this).prop('disabled', true);
$('.send').submit();
});
when a checkbox is checked, i want the form to submit. However I need parameters contained in my submit button to be part of the request.
This bit of script submits the form but not using the button. I guess because jquery submits it some other way.
$(e.target).find("input[type='radio']").attr("checked", true)
$(".edit_booking").submit()
I've tried pointing jquery to the button containing the params via it's ID and using a click event, but this doesn't work either.
$(e.target).find("input[type='radio']").attr("checked", true)
$("#bookings_next").click()
Bits of the form:
<form novalidate="novalidate" class="simple_form edit_booking" id="edit_booking_9486" action="/venues/plymouth/bookings/9486" accept-charset="UTF-8" method="post">
.............
<input type="submit" name="forward_button" value="Next step" id="bookings_next" />
Many thanks
aha, simple!
$('#bookings_next').trigger('click');
I have to trigger the event.
I've found this colorbox tutorial
and tried to make it work the same way with a POST action,
but it doesn't work, it just keeps loading.
here's a fiddle
The button is the POST action that doesn't work well,
and the text link is the original example that works ok.
I can't show this on the fiddle,
but basically I'm posting the form to a simple PHP file with a switch/case.
How can I make this work?
Because you cannot use the form as trigger the plugin is not done this way the only way is if you use on click event on the submit button.
In your form add id to the submit button:
<form action="ajax.html" method="POST" target="_blank" class="">
<input id="111" name="a" type="hidden" value="something-else" />
<input type="submit" id="cboxFormButton" class="button" value="Test">
</form>
and in your script add this:
$("#cboxFormButton").click(function(e){
e.preventDefault();
// Call the colorbox link from here...
$.colorbox({href:"/echo/html/"});
// if you want to the form action url do this
// $.colorbox({href: $(this).closest('form').attr('action') });
});
I have a search box that uses jQuery to submit the user's search and then display the results. However, for users that have JavaScript disabled this would not work so I have put the search box as a form so it will still work just by loading a different page instead.
However, now when I try and submit a search with JavaScript enabled it just submits the form and loads a new page as it would when JavaScript is disabled.
How can I resolve this? I hope you can understand my question.
I currently use the following jQuery code to submit my form:
$("#s").keyup(function(b){
if(b.keyCode==13){
if($(this).val().length>0){
And I have the following HTML:
<form action="/search" method="get">
<input type="text" id="s" maxlength="2048" name="q" autocomplete="off">
</form>
$('form').submit(function(Event) {
Event.preventDefault();
// Do your AJAX fancy submit stuff
...
});
Why did you delete and re-add?
Return false should be enough. The following would run on this page will prevent the stackoverflow search from firing.
$("#search').submit(function(){ return false;});
In your case: $('#s').parent().submit(function(){ return false;});
I have a form as
<form action="" method="post">
<input name="Descripcion" type="hidden" value="" id="Descripcion" runat="server" />
<input id="Submit1" type="submit" value="Comprar" />
Instead of clicking on submit button i want that the form should be posted without clicking submit button with hidden fields
You can submit an html form from javascript by calling the form's .submit() method. e.g.:
document.getElementById('myform').submit();
Of course, you still need an action in your example so the form has somewhere to submit itself to. Also, you tagged your question asp.net. If this is a webforms page you should use the default form rather then adding your own form to the html markup. You submit the asp.net form by calling the __doPostBack() method.
you can build and submit a form with javascript you can call from other events or when loading a page
myform=document.createElement('form');
myform.method='post';
myform.target='_top';
myform.action='';
input1=document.createElement('input');
input1.type='hidden';
input1.name='Descripcion';
input1.value='';
myform.appendChild(input1);
document.appendChild(myform);
myform.submit();
You can also accomplish the same using jQuery:
$('myform').submit();