Develop Reference

Submit onclick not working

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>

need help, 2 submit forms in 1 ajax send post to 1 file.php

hello i need to post 2 forms using single ajax or jquery to 1 commun file, the code i have is this
<form id="filter-group1" class="form" target="remember" autocomplete="on" method="post">
<input pattern="[0-9]*" value="" name="ch1" maxlength="10" size="10" autofocus="" autocorrect="off" id="client-nbr" class="form-control numeric" rv-value-reactive="form.idTelematique" type="tel">
<a class="reset-input" href="#" id="initClient" onclick="change()"></a>
<input value="" id="memoriser" name="memoriser" type="checkbox">
<button type="submit" id="remember_button" class="hidden"></button>
</form>
<form id="filter-group2" method="post" class="form">
<div class="field-password">
<input rv-value="form.password | starPassword" readonly="" maxlength="6" name="staredPassword" id="secret-nbr" class="form-control" type="password">
<a class="reset-input" href="#" id="initPass" onclick="change1()"></a>
</div>
</form>
<div class="cell-password">
<div class="field-valid">
<button type="button" href="#" class="btn-primary btn-block" onclick="filterBy()" id="submitIdent" rv-text="config.app.identification.boutonTitle" >submit</button>
</div>
</div>
JS
function filterBy() {
// Construct data string
var dataString = $("#filter-group1, #filter-group2").serialize();
// Log in console so you can see the final serialized data sent to AJAX
console.log(dataString);
// Do AJAX
$.ajax( {
type: 'POST',
url: 'filter.php',
data: dataString,
success: function(data) {
console.log(data);
$('#message').html(data);
}
});
}
<button type="button" need to submit 2 the forms using ajax to post in single file php
problem not solve make me a full script if you can't, when i try to clik on <button type="button" href="#" class="btn-primary btn-block" onclick="filterBy()" function not execute

change to create your datastring:
var dataString = {
frm1 : $("#filter-group1").serialize(),
frm2 : $("#filter-group2").serialize()
};
and at the php end you can get the values with keys frm1, frm2.

Change text of submit button after form submission?

I have an email signup form, and want the submit button to change from 'submit' to 'thanks' when form is sent. Been digging and haven't been able to find a solution.
<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<fieldset>
<span id="response">
<? require_once('inc/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?>
</span>
</label>
<input type="text" name="email" id="email" placeholder="your e-mail address" />
<input type="submit" name="submit" value="submit" class="btn" alt="submit" />
<div id="no-spam"><!--We'll never spam or give this address away--></div>
</fieldset>
</form>
I'm using MailChimp's simple subscribe here: http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
thanks for your help!!

You could use a shorthand if statement to change the result, you don't need JavaScript to do it. Unless that is what you need?
<input type="submit" name="submit" value="<?=($_GET['submit'])? "Thanks" : "Submit"?>" class="btn" alt="submit" />

First, add an onsubmit attribute.
<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get" onsubmit="sayThanks()">
Add an id to the submit button:
<input type="submit" name="submit" id="submitButton" value="submit" class="btn" alt="submit" />
Finally, declare the sayThanks() function:
function sayThanks(){
document.getElementById("submitButton").value = "Thanks!";
}

try this
$("#signup").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$("input[type='submit']").val("Thanks");
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#signup").submit();

HTML Form Data When Opening a New Window

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>

jQuery form submit as per referenced 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?