In the below code, I am trying to console.log the form input value when a button gets clicked. However, upon the button click, the value is only getting logged momentarily before disappearing.
why is this happening and how to resolve it?
document.querySelector("button").addEventListener("click",function(){
const listItem = document.querySelector("input").value;
console.log(listItem);
});
<body>
<form action="">
<input type="text">
<button class ="btn btn-lg btn-primary" type="submit"> ADD </button>
</form>
</body>
When submitting a form, the browser sends a request to the server and refreshes the page. To disable this behavior, you can use event.preventDefault() when clicking the button
document.querySelector("button").addEventListener("click",function(event){
event.preventDefault();
const listItem = document.querySelector("input").value;
console.log(listItem);
});
<body>
<form action="">
<input type="text">
<button class ="btn btn-lg btn-primary" type="submit"> ADD </button>
</form>
</body>
Others have explained that submitting a form reloads the page. But that doesn't really address the question about the console log.
Go to the Developer Tools settings, and in the Console section check Preserve log upon navigation. Then you won't lose log messages when the page reloads because of the form submission.
This is because browser reloads on the form submission. And your data is lost.
To prevent this simply use "event.preventDefault()" function after your log statement after passing "event" as a parameter in the event listener function.
Like this:
document.querySelector("button").addEventListener("click", function (event) {
const listItem = document.querySelector("input").value;
console.log(listItem);
event.preventDefault();
});
Related
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 have a web-form written in ASp.Net MVC5 which is used to gather some details from the user. However, before I get them to submit the form, I want them to have the option to look at another web-page (in a new window or tab) which gives them more information if they need it prior to submitting the page. To that end, on the web-form, I have a form with the following buttons:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button onclick="getMoreInfo()">More Information</button>
<button type="button">Submit Form</button>
</form>
Then, at the bottom of the page I have the following javascript defined:
<script>
function getMoreInfo()
{
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse);
return false; // trying to stop the form submission from occurring
}
</script>
My problem is that when this "More Information" button is clicked, it has the effect of submitting the form [which I don't want to do yet] - since there is a separate submit button for doing that task. Is there a way to use a button to jump to another page without actually submitting the current form?
thanks heaps,
David.
I found that answer #3 at this question helped me:
How do I cancel form submission in submit button onclick event?
My solution was to change the code thus:
I changed the button code to look like this:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button id="moreInformationButton" >More Information</button>
<button type="button">Submit Form</button>
</form>
And then I changed the javascript to look like this:
$("#moreInformationButton").click(function (event) {
event.preventDefault(); // This stops the submit form being triggered
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse); // open the help page
});
This allowed me to open up another window or tab with more information without actually submitting the form.
I am presenting terms and conditions modal to the user before registration but I am having an issue submitting the form. I think it might be because the submit button is outside of the form?
HTML
<form method="POST" id="registerUser" autocomplete="signupForm-noFill" action={{url("/register")}}>
...
<button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
</form>
Modal (outside the form above)
....
<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>
JavaScript
$('#registerButton').click(function() {
$("#legalModal").modal("show");
return false;
});
$(document).ready(function () {
$("#acceptTerms").click(function () {
$("#registerUser").submit();
});
});
What happens when I try to submit the form is refreshing the page and adding a ? to the end of the url: /signup?. If I try submitting it without the modal then it works fine.
Your button is type submit, so it will send data of the form, as the parent form tag tells him, and won't considere your click function since it change the page.
You need to prevent the natural behaviour of a submit button.
The way to do this is preventDefault:
$("#acceptTerms").click(function (event) {
event.preventDefault(); //prevent from natural behaviour
$("#registerUser").submit();
});
I have an web page that has a submit button. My submit button looks like the following:
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
When a user clicks the submit button, I want to disable the button and let the user know that something is happening. To do that, I have the following JavaScript:
$('.wait-on-click').click(function(e) {
e.preventDefault();
$(this).prop('disabled', true);
$('span', this).text('Please wait...');
});
The button disables. The text is updated. However, the submit does not actually get submitted to the server. If I comment out the body of my JavaScript function, it works fine. I do not understand how to fix this.
Thank you!
I believe your problem is with this line
e.preventDefault();
This is preventing the default behavior of the submit button, i.e., submitting! Therefore, remove it.
Update
After testing, I have found the problem.
I believe your problem is with this line
$(this).prop('disabled', true);
For some reason, this is preventing the form from submitting. Therefore, put it in the submit handler.
$('.wait-on-click').click(function(e) {
$('span', this).text('Please wait...');
});
$('form').on('submit', function() {
$('.wait-on-click').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input name="n" />
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
</form>
Suppose a form has multiple submit buttons:
...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...
I am intercepting the clicks for only the 2 delete buttons and disabling the form submit to trigger a custom modal dialog which has OK and CANCEL buttons on it to confirm user choice. If user presses OK, I want to submit the form. If cancel, then dialog dismissed and nothing happens.
I have the first part wired up to trigger the dialog but I am at a loss on how to get the OK button in the dialog to trigger the form submit contingent on which original submit button was pressed (e.g. if Delete button pressed, I want to confirm with user they want to delete, then if so, submit the form as normal.
I've searched around and look at jQuery docs but haven't found the answer yet so I must be missing something really straightforward.
Update: I don't want to use JS confirm function. In my original question above I'm looking to use a custom modal dialog for various reasons.
Check out the JS confirm function and put it as an onclick event.
You have a nice example here.
Why not have them be regular buttons and then onclick set a variable to determine the action type and then when the form submits include this hidden variable and check that to find what you're supposed to do
First, you'd have to intercept both (all) the buttons, you could do this easily by fetching any of the submit buttons within a specific form, then you can ask your question and given you still have the current event handler, you can figure out what button was pressed and do the callback you'd like. For example:
<form id="myform">
<button type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
</form>
--
$(function() {
$("form#myform button[type='submit']").click(function(ev) {
ev.preventDefault();
if (confirm("you sure")) {
var action = $(ev.currentTarget).val();
console.log(action);
}
});
});
JSLint is here: http://jsfiddle.net/r48Cb/
Basically, console.log(action) will output either "delete" or "Edit" based on the original click. How you handle that value is up to you. A switch statement, a simple if block could work, but it's up to you, I don't know the scope of your app.
The window.confirm function returns a true if the user selects okay and a false if the user cancels. Using this logic you could do something like this:
<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
//Submit the form here
}
else{
alert("Not deleted!");
}
I think you are making it too complex, you can do something as simple as:
<form >
<input name="foo" value="foo">
<button name="sub0" value="sub0" onclick="
return window.confirm('sure?');
">submit 0</button>
<button name="sub1" value="sub1" onclick="
return window.confirm('sure?');
">submit 1</button>
</form>
If the user clicks OK on the confirm dialog, the form submits from whichever button was pressed. If not, it doesn't.
My 2c:
... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>
...
function deleteFoo() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-foo');
$('#form-id').submit();
else-just-return
}
function deleteBar() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-bar');
$('#form-id').submit();
else-just-return
}
function allowEdit() {
whatever
}