Using HTML to submit a form if JavaScript is disabled - javascript

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;});

Related

Form Auto Submit on page load in Same Page Once jQuery

I created one form in PHP and I want to submit this form on the same page using jQuery. for this, I added the jQuery javascript code:-
This is working but my problem is that this loading page, again and again, infinite, because my Form is submitted on the same page.
window.onload = function () {
document.getElementById("wcv_stores_radial_search").submit();
}
<form action="" method="POST" id="wcv_stores_radial_search" name="wcv_stores_radial_search" class="standard-form">
<input type="text" size="40" id="wcv_stores_location" name="wcv_stores_location" placeholder="" value="ABC" />
</form>
Please give me a solution what i do for that, and if this is possible using AJAX then what will i used for AJAX code.
you should cread a hidden input with a variable and if that variable was true the script exit before it reloads

How to prevent ajax form submission written anywhere?

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">

How can I refresh a form page after the form submits to _blank?

I have an HTML form which targets _blank. I would like the page that form is on to reload after submitting.
So here's some sample markup:
<form method="POST" action="result.php" target="_blank">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="email">Email:</label>
<input type="email" name="email" />
<input type="submit" value="submit" />
</form>
So when you submit this form it will POST to result.php in a new window or tab. This leaves the form page as is. I want the form page to reload, or at least reset all fields.
I've tried <form onsubmit="location.reload()"... as well as onsubmit="window.location.reload()" but nothing changed.
Any suggestions?
(please no jquery)
Not sure why window.location.reload() doesn't work. I think it should. However, this does seem to work:
onsubmit="setTimeout(function () { window.location.reload(); }, 10)"
There are two ways to do this, one that you may not want to hear about.
FIRST:
In the form init tag, if you set action="" then the form will submit to the same page (to itself).
<form action="" method="post">
This allows you to add server-side code to the top of the page, like this (using PHP, for example):
<?php
If (empty($_POST)===false) {
//server side scripting to handle the submitted form
}else{
?>
//HTML to create/show the page with form for user input
<?php
//Close the if statement
}
?>
SECOND:
Use AJAX (javascript or jQuery) to "submit" the form, and then -- in the AJAX function's callback -- carry on with whatever changes you want to make to the page, including redirecting to a new page.
The accepted answer did not produce the desired results for me.
Accepted answer:
onsubmit="setTimeout(function () { window.location.reload(); }, 10)"
Changing the accepted answer from onsubmit to onclick did fix my issue;
Worked for me:
onclick="setTimeout(function () { window.location.reload(); }, 3)"
There may be undesirable results, or this may not be preferred but it performs as desired for me.
It should work if a callback is passed to the onsubmit event attribute. For example,
(Traditional anonymous function)
onsubmit="function() {location.reload()}"
or
(Arrow function)
onsubmit="() => location.reload()"
location.refresh(true);
will help

BlackBerry 10 browser submits form using browser submit button when using preventDefault

As I'm working on a mobile version of our company website I ran into, what I believe is, an issue with the BlackBerry 10 browser. (I'm using the Q10, version 10.1.0.4181)
I'm using jQuery to bind to the submit event on a form to do an AJAX call, so I have a preventDefault, but it seems that BB10 seems to ignore this when using the SUBMIT button the browser provides.
It works fine when pressing the enter key or pressing the submit button of the form, but when I press the Submit button which is at the bottom of my browser (alongside with the previous/next buttons) it ignores the preventDefault (and return false) and still continues on submitting the form.
I've set up a jsfiddle which demonstrates this:
http://jsfiddle.net/e4AHZ/4/
The code I'm using to bind is:
$(function () {
$(document).on('submit', 'form', function (e) {
e.preventDefault();
alert('done!');
return false; // as final resort, no luck =(
});
});
Anyone else who had this issue? Is there a possible fix/workaround?
Thanks!
I have worked around this by adding action="javascript:void(0);" to you form (see updated fiddle http://jsfiddle.net/e4AHZ/11/).
I do not know if this is good enough but action="javascript:void(0);" is in fact part of a solution given to a similar question.
<form method="post" action="javascript:void(0);">
<input type="text" name="field1" value="some msg" />
<input type="text" name="field2" value="some msg" />
<input type="submit" />
</form>
You can also set the action to "javascript:ajaxfunction();" where "ajaxfunction()" is the function you want to call to submit the form:
$('form').attr("action","javascript:ajaxfunction();");
This should allow you to take advantage of that submit button.

Onsubmit doesn't work in Chrome

I have two forms and a button. Everything works fine in Firefox. I get a new window, with a Paypal payment, and in the window where everything happened i get the send_mail form submitted that will send an e-mail to the user. How can I make this work in Chrome? Why it's not working? I've tried anything (or so I think)!
So:
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post" onsubmit="$('#send_mail').submit();">
...
</form>
<form name="send_mail" id="send_mail" action="" method="post">
...
</form>
<a onclick="$('#registerForm').submit()">Go to paypal and send confirmation mail</a>
Unless you have a really good reason to use a javascript-only submit, why set up the form to be unusable if there is a javascript error?
Use a standard form input of type submit, give it an id, alter the look or text of the submit via javascript as necessary, and create onclick & onsubmit events as a layer on top of that functionality and have them return false. Better fallbacks.
I'm not sure why you're trying to submit two forms at once, but how about this alternative (note that I haven't tested this code, but it should convey the idea):
<script type='text/javascript'>
$('#fallback-register-submit').hide(); // Hide the submit button.
$('#registration-link').show().click(function (){ // Show the link and attach the action.
$('#registerForm').submit();
return false; // Don't bother following the link anchor.
});
</script>
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post""><!-- Single form that does all of the submitting. -->
...
...
<input type='submit' id='fallback-register-submit'>Register</input><!-- In the event of a javascript error for their browser, they can still buy your stuff! -->
<a id='registration-submit' style='display:none'>Go to paypal and send confirmation mail</a>
</form>
why not just bind both submits to your a?
onclick="$('#send_mail').submit(); $('#registerForm').submit();"
if you want the other form to submit AFTER the first one:
onclick="$('#send_mail').submit( function() {$('#registerForm').submit();}); "
assuming you're using jquery here
As far as i understand, you want to submit the form using a link?
Why not use "plain" javascript then? Without jQuery: document.getElementById(....).submit()
Or link the submit event to the link in a normal jQuery way:
$(document).ready(function() {
$(".yourLinkClass").click(function() { // or "#yourLinkId" for that matter
$("#registerForm").submit();
});
});
And you also could use the submit button ;)

Categories