Form Auto Submit on page load in Same Page Once jQuery - javascript

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

Related

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

How to validate a form without reloading the page and keep inhidden div intact?javascript, php, ajax

Got a problem with my program. Need help. I unhide a div element on a click of a button. The div contains a form. And of course, the form needs validating before using ajax to post something in the database. However, my main problem is that whenever I push submit to validate, using javascript, the page reloads, causing the div to hide again. I am having trouble with jquery, too. I mean, I am still learning jquery.
css
.divform{
visibility: hidden;
}
javascript
function unhide(){
document.getElementById("divform").style.visibility = "visible";
}
function validateform(){
//validation with focus() on if false
}
html
<input type='button' onclick='unhide()' value='unhide'/>
<div class='divform' id='divform'>
<form method='post' id='formid' name='formid' onsubmit='validateform();'>
<label>Name: </label> <input type='text' name='name' id='name'/>
<!-- more input type here-->
<input type='submit' name='submit' value='submit'/>
</form>
</div>
How do i submit the form successfully without reloading the page and not causing the div to hide again? thanks, really need help on this one.
Anything that haapens without reloading the page is using AJAX ....
Learn here AJAX TUTORIALS
Another Specific Example is Given here : AJAX FORM SUBMISSION EXAPMLE

Using HTML to submit a form if JavaScript is disabled

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

Posting a form with hidden fields without submit button click

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

Categories