I'd like to submit the update form with javascript.
I made them as follows:
<form:form id="update" method="post" action="/profile/update/${uname}">
</form:form>
I add this below on top menu.
<button type="submit" class="save"></button>
I want to submit this update form through save button within top menu which is not included in form.
How can I submit this form with javascript at outside of form?
Try invoking this submitForm() function from your button.
<script type="text/javascript">
function submitForm()
{
document.update.submit();
}
</script>
Try to get the form element by id in your javascript method and add this method as onclick for your button.
<script type="text/javascript">
function submitForm()
{
document.getElementById("update").submit();
}
</script>
Change your button tag like this
<button type="submit" class="save" onClick="submitForm();"></button>
Related
I need to open from the index.php receipt.php and hide the button as receipt is already made, ie. two events in one submit button. This hides the button but the submit doesn't trigger.
<action =receipt.php target="_blank"><input type="submit" value="Receipt" onClick="hideme();this.form.submit()" id="abc"> ... *rest of the form inputs* </form>
<script>
function hideme() {
,document.getElementById("abc").innerHTML = "";
}
</script>
If you use the hideme function to submit the form in addition to hiding/modifying the submit button you could try like this:
Add an event argument to the inline onclick function call - that allows the function to access all the properties of the event and the important one here is the target
This should disabled the button and modify the value AND submit the form to a new window with a single event..
You could uncomment the line that removes the button as alternative or simply set the button's value as empty.
function hideme(e) {
e.preventDefault();
e.target.parentNode.submit();
//e.target.parentNode.removeChild(e.target);//to remove the button completely or...
e.target.value='Submitted';
e.target.disabled=true;
}
<form action='receipt.php' target='_blank'>
<input type="submit" value="Receipt" onclick="hideme(event);" />
<!--
*rest of the form inputs*
-->
</form>
I'm working with an embedded app on our dev site and when I click the submit button inside the iframe, I am triggering a manual submission event on another form (not in an iframe) on that page. If I manually click the submit button for the form, my data posts and everything works correctly. However, I want to eliminate an extra user click and submit the external form automatically when a user submits the other form inside the iframe.
I've got everything working correctly on a base level. When a user clicks the submit button in the iframe, I am using JQuery to grab values from inside the iframe and set values in this external form. Using the jquery 'submit()' event, I am then able to submit that external form. The problem is, the page refreshes and the data doesn't go anywhere. If I remove the 'submit()' event and manually click the submit button, the form posts and in this case, adds a product with custom data to the product cart.
As a proof of concept, this is my 'iframed' HTML.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Proof of Concept</h1>
<p>Total cost: $<span id="cust_price">222.22</span> plus shipping.</p>
<p>Quote number: <span id="quot_num">1546751962211</p>
<form method="POST" enctype="multipart/form-data" id="newQuoteForm">
<button type="submit" class="btn btn-primary" name="new-app-btn">Add to Cart</button>
</form>
</body>
<footer>
</footer>
</html>
Here is my on-page form that is OUTSIDE the iFrame.
<form method="POST" enctype="multipart/form-data" id="outer-quote-form" action="/checkout/">
<label class="quote_number">Quote Number:
<input type="text" id="quote_number" name="quote_number" value="">
</label>
<label class="custom_price">price:
<input type="text" id="custom_price" name="custom_price" value="">
</label>
<button type="submit" class="btn btn-primary" name="ws-add-to-cart">Add to Cart</button>
</form>
Then, I have JQuery working to grab the iframed values and puts them in the exterior form. Afterwards, it fires a 'submit()' event on that form.
<script>
jQuery('#newQuoteApp').load(function() {
var iFrameDOM = jQuery("iframe#newQuoteApp").contents();
jQuery('#newQuoteApp').contents().find('#newQuoteForm').submit(function() {
jQuery("input#custom_price").val(jQuery('#newQuoteApp').contents().find('#cust_price').text()); // updated
jQuery("input#quote_number").val(jQuery('#newQuoteApp').contents().find('#quot_num').text());
jQuery("#outer-quote-form").submit();
return true; //return false prevents submit
});
});
</script>
Except when the jquery submit() event fires, the form appears to submit and the page refreshes but no data is posting as it does when I manually submit the form. Is there an extra step here or a better way to fire the form submit with post data?
Edit: Adding the PHP function that isn't firing on jquery submit() for context.
if (isset($_POST['ws-add-to-cart'])) {
add_action( 'init', 'add_product_to_cart' );
function add_product_to_cart() {
global $woocommerce;
global $product;
$product_id = 138;
$woocommerce->cart->add_to_cart($product_id);
}
header("Location:https://www.devsite.com/checkout/");
}
The reason for the form not submitting because you are submitting the whole form without the submit button which is <button type="submit" class="btn btn-primary" name="ws-add-to-cart">Add to Cart</button> which you have declared in php to get a post request like this
if (isset($_POST['ws-add-to-cart'])) {...
When you call submit(); on the form via the get method, you see '/new-quote/?quote_number=1546751962211&custom_price=222.22'
but where's ws-add-to-cart, it's not submitting and that's the reason why php isn't getting your request
The fix will be to add .click() on the submit button instead of submitting the form
<script>
function enterVals($val){
var price = $val.price;
document.getElementById("quote_number").value = $val.num
document.getElementById("custom_price").value = $val.price
document.getElementsByName("ws-add-to-cart").click();
}
</script>
Or in your script in case you want to use jquery, this is the fix
<script>
jQuery('#newQuoteApp').load(function() {
var iFrameDOM = jQuery("iframe#newQuoteApp").contents();
jQuery('#newQuoteApp').contents().find('#newQuoteForm').submit(function() {
jQuery("input#custom_price").val(jQuery('#newQuoteApp').contents().find('#cust_price').text()); // updated
jQuery("input#quote_number").val(jQuery('#newQuoteApp').contents().find('#quot_num').text());
jQuery("button[name=ws-add-to-cart]").click();
return true; //return false prevents submit
});
});
</script>
This is definitely the answer and sorry for my stupidity, i didn't pay required attention before
try removing return true from your js code
if that doesn't work, try changing the <form method="POST" to <form method="GET" to debug the values in the url just for checking that the form actually fires up with values
Alternative method: Old school method
code for page OUTSIDE the Iframe
<script>
function enterVals($val){
var price = $val.price;
document.getElementById("quote_number").value = $val.num
document.getElementById("custom_price").value = $val.price
document.getElementById("outer-quote-form").submit();
}
</script>
code for the Iframe file
<script type="text/javascript">
$('#newQuoteForm').on('submit', function(event) {
var Page = window.parent;
var allVals = {
price:$('#cust_price').text(),
num:$('#quot_num').text()
}
Page.enterVals(allVals);
event.preventDefault();
});
</script>
Explanation
window.parent refers to the parent window where the iframe is loaded on, with reference to this we can trigger functions that are in the parent window so by this, we created a variable and added the information which is sent by the function enterVals() to the window
The enterVals() function just puts the values and submits the form without any jQuery.
What is the proper way to submit a form with JS?
This might not be the 'best' way to submit a form with js but is cross-browser which is good
I'm struggling this submit form after clicking the submit button where the submit button is outside the form. Submit button has a click listener which will perform function and I want to submit the form inside the function of the button.
Here is my code..
HTML...
<form action="quiz_insert.php" method="POST" id="myform">
<input type="hidden" name="checking" id="myScore">
<button form="myform" id="submit">Submit Quiz</button></br>
</form>
and here is the function inside the javascript.
(function() {
function redirect() {
//JSON.stringify(checkAnswer) is generated in another function.
document.getElementById("myScore").val("MYSCORE");
document.getElementById("myform").submit();
}
const submitButton = document.getElementById("submit");
submitButton.addEventListener("click", redirect);
})();
Any help is much more appreciated.
Associate the button with the form. You can do that with the form attribute:
<button form="myform" id="submit">Submit Quiz</button>
… it would be better to just put the submit button inside the form in the first place though.
I'm trying to manipulate form submission with couple of submit buttons using jQuery. The code goes like this:
<form id="cf" action="" method="POST" target="">
<button id="preview">Preview</button>
<button name="submit" id="submit">Save</button>
</form>
<script>
$("#preview").on("click",function(e) {
$(this).attr('name','submit');
e.preventDefault();
$("#cf").attr({
'action':'/preview/',
'target':'_blank'
}).submit();
});
</script>
Changing attribute values seemed to work when "Preview" button is clicked, but it doesn't submit. What's wrong with the code?
Every form has a submit function attached to it, it's referenced as form.submit.
When you name something inside the form submit it too is attached to the form, and it overwrites the native form.submit so the form can no longer be submitted with the submit function.
Rename the button to anything other than submit, and remove the line that sets the name to submit
<form id="cf" action="" method="POST" target="">
<button id="preview">Preview</button>
<button name="my_submit" id="my_submit">Save</button>
</form>
<script>
$("#preview").on("click",function(e) {
e.preventDefault();
$("#cf").attr({
'action':'/preview/',
'target':'_blank'
}).submit();
});
</script>
I have a button example below
<button id="startrunning">go</button>
There is no form or anything I'm using on the same page java script to detect it's click. It will work like I want it to when I click it. I want to see when the page is loaded it will automatically submit it's self is there a way?
Thank you
jsFiddle: http://jsfiddle.net/QEu84/10/
<script type="text/javascript">
function submit()
{
document.getElementById("startrunning").click(); // Simulates button click
document.submitForm.submit(); // Submits the form without the button
}
</script>
<body onload="submit()">
<form id="submitForm">
<button id="startrunning">go</button>
</form>
</body>
You can automatically click it when the page loads, using the code below, but you need a form to submit something (you submit a form, not a button)
<body onLoad="document.getElementById('startrunning').click();">