I am trying to code a post form which sends the form to another window and then reloads the window in which the form was submitted in.
page2 is not on the same domain as page1 and i can't access the code of page2.
My current form on page1 looks like this:
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit" onclick="function1();window.location.refresh()">
</form>
The form is being send successfully and the function is being executed but the tab won't refresh.
Try this..
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit"onclick="window.location.reload();">
</form>
While your use case is not obvious at the moment, this might be useful.
Handle submit using script, prevent the default action, post the form and then reload the page.
<form id="myForm" target="_blank">
<input type="submit" value="Submit" onclick="wait(event);" >
</form>
script
function wait(e)
{
e.preventDefault();
document.getElementById('myForm').submit();
console.log('done!')
window.location.reload();
}
try this code this will refresh you page 1.
function function_one(){
$.ajax({
url: 'show.php',
type: 'POST',
data: {'value': $("#input1").val()},
success: function(data){
window.location.refresh();
}
});
}
<form target="_blank">
<input type="text" name="input1" value="input1value" id="input1">
<input type="submit" value="Submit" onclick="function_one()">
</form>
<p id="asfasf"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Related
I have to post data to php but when I do, the page reloads. I have tried fixing this using answers given in similar questions but none of them yield proper results. Thanks for your help.
<!--HTML-->
<form method="post" action="index.php" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
Another way that I was recommended was by using ajax:
<form id="form" >
<input style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">
<input type="submit" href="#" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" onclick =" sendForm(event);" value="Enter">
</form>
<script>
$('#form').on('click', function(e){
e.preventDefault();
var name = $(#code).val(),
$.ajax({
type: 'post',
url: 'header_php.php',
});
});
</script>
Try to add onclick = "sendForm(event);" in button instead of form
you could change onsubmit instead of onclick in the form
function sendForm(e) {
e.preventDefault();
}
<form method="post" action="index.php" onsubmit="sendForm(event);"><!--changes-->
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
Change button type="submit" to button Type="button" and
Use jquery ajax
$("#btnid").click(function(){
$.ajax({
method: "POST",
url: "some.php",
data: { name: $('#code').val()}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
})
Also remove action from form
Add onsubmit="return false;" to your form. In you js function e is clickEvent not is SubmitEvent, submitEvent make page reload.
<!--HTML-->
<form method="post" action="index.php" onsubmit="return false;" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
Html:
<form class="allforms" method="POST" action="/auth/myaccount/personal">
<input type="hidden" name="_method" value="PATCH">
...
</form>
<button id="allsubmit" class="btn btn-info">Continue</button>
jquery:
$(document).ready(function(){
$("#allsubmit").click(function(){
$('.allforms').submit();
});
});
I have 3 forms in my html code like above.
My button is out of any my forms.
How to have one submit button for all my forms. I tried the click function but it doesn't work. Why?
Form submission is a synchronous action, so when you submit a form and then immediately submit a different form in your page, the first form's submission is canceled.
What you can do instead is make sure the forms are submitted asynchronous (using ajax):
$(function() {
$("#allsubmit").click(function(){
$('.allforms').each(function(){
valuesToSend = $(this).serialize();
$.ajax($(this).attr('action'),
{
method: $(this).attr('method'),
data: valuesToSend
}
)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH1">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH2">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH3">
<input type="submit" />
</form>
<br />
<button id="allsubmit" class="btn btn-info">Continue</button>
A few notes
This will not work with forms that have file-uploading (enctype="multipart/form-data")
You need to decide what to do after the submission is done (because nothing in the page will change).
You can't submit forms in stackoverflow-snippets, so don't try to run this here :)
I didn't test it but try this one:
$("#allsubmit").on("click", function(){
$('.allforms').each(function(){
$(this).submit();
});
});
Note that all of your forms have to have class="allforms" attribute
I can't figure out why I'm not able to properly do the ajax magic with this code. It just redirects to a new page as the server handle the request. I tried put a console.log("test"); in the jquery function, but it's never called. So I'm guessing the form submit never go through my ajax but directly to the server.
$("#startTest").submit(function(e)
{
console.log("test"); //This is never called
e.preventDefault();
$.ajax(
{
url : 'handler',
type: "POST",
data : $(this).serialize(),
success:function(data)
{
alert(data);
},
error: function()
{
alert("failure");
}
});
});
<form id="startTest" method="POST" action="handler">
<input type="hidden" name="answer" value="startTest">
<input type="text" name="firstname" value="" placeholder="Navn" id="navn" autocomplete="off"><br>
<input type="submit" name="submit" value="Start test">
</form>
Empty your form action. If your form has an action then when you submit your script follows that action. But you want to achieve that process via ajax so you don't fill action tag.Something like this
<form id="startTest" method="POST" action="">
<input type="hidden" name="answer" value="startTest">
<input type="text" name="firstname" value="" placeholder="Navn" id="navn" autocomplete="off"><br>
<input type="submit" name="submit" value="Start test">
Let's say I'm doing a POST form, so I set my method and action like this:
<form method="post" action="page.php">
<textarea name="content"></textarea>
<input type="submit" value="Submit">
</form>
My data is successfully transferred and everything is great. Now let's say I want to open a new window upon submission. Typically you'd do something like this:
<form method="post" action="page.php" onSubmit="window.open('page.php', 'Submission', 'width=600,height=400,status=yes,resizable=no,scrollbars=no'>
<textarea name="content"></textarea>
<input type="submit" value="Submit">
</form>
But here is the conundrum: when you click submit, the pop-up window opens AND the form submits in the original window.
Question: does this window.open JS method work with the the POST action? Is my syntax wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<textarea id="text" name="content"></textarea>
<input type="submit" onclick="submit()" value="Submit">
<script>
function submit()
{
var text = document.getElementById("text").value;
$.ajax({
type: "POST",
url: "post.php?text="+text,
success: function(html){ alert('POST OK'); window.open('http://www.google.com'); }
});
}
</script>
With return false, the form won't submit.
<form method="post" action="page.php" onSubmit="window.open('page.php', 'Submission', 'width=600,height=400,status=yes,resizable=no,scrollbars=no'); return false;">
<textarea name="content"></textarea>
<input type="submit" value="Submit">
</form>
Here is one form example. It is working good without any issue.
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>
Now I have to create the same form but a little modification needed. I have my markup like this
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
<button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
</form>
To submit the form I have used this jQuery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('button[type=submit]').click(function() {
var Id = jQuery(this).attr('data-value');
var Name = jQuery(this).attr('data-name');
alert(Name);
})
});
</script>
But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?
Update
Yes I can change my markup if you think so.
First of all, your HTML is not correct. Move the inputs inside of the form:
<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
</form>
You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.
$(document).ready(function () {
$("form").on("submit", function () {
$.ajax({
type: "POST",
url: formUrl,
data: $(this).serializeArray(),
success: function (data) {
/* handle success */
},
error: function (data) {
/* handle error */
},
dataType: "json" // remove this if the server doesn't send json data
});
return false; // prevent default browser behavior
});
});
Note $(this).serializeArray() - this returns an array like this:
[{
name: "some-input-name",
value: "some-input-value"
}, ...
Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?