I have looked carefully through other questions to find an answer, and I haven't had any luck, so if this has already been asked and I've missed it, my apologies in advance. I have a very simple page:
<script type="text/javascript">
function setFormField(data) {
document.getElementById('searchTextField').value = data;
document.getElementById("lookupForm").submit();
}
function formSubmit() {
alert('in');
var proceed = false;
return proceed;
}
</script>
</head>
<body>
<form action="page2.php" method="post" id="lookupForm" name="lookupForm" onSubmit="return formSubmit();">
<input type="text" name="location" id="searchTextField" >
<input type="submit" value="Submit">
</form>
click me
</body>
The idea is that when you click the "click me" link, it enters some data into the form and then submits the form, which should then call the onSubmit script - but the formSubmit() function never gets called - the form just submits itself.
Why doesn't the formSubmit() function get called? Seems like it should...?
Related
Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
My research is pointing me to Ajax and/or JQuery, but I wanted to ask to make sure I understand and move in the right direction.
I've been looking to use a javascript onclick function to create a popup(alert) asking to confirm that I want to proceed and show the changes I'm about to make.
I hoped that I could use PHP $_POST or GET to echo the change in the popup/alert window. However without the page refresh it appears I can't do this, but looking for a confirmation? Should I be looking for Ajax to do this? Any thoughts/suggestions would likely give me a head start as php/ajax is sort of foreign to me.
Sample code:
<script>
function clicked() {
if (confirm('Do you want to submit? <?php if(isset($_POST['city'])){$city = $_POST['city'];echo $city;}?>'))
{
yourformelement.submit();
} else {
return false;
}
}
</script>
</head>
<form action="output.php" method="post">
<input name="city">
<input type="submit" onclick="clicked();" value="Button" />
</form>
</html>
You can get the input value with jQuery before submitting:
<form action="output.php" method="post" id="form">
<input name="city" id="city_input">
<input type="submit" value="Button" />
</form>
<script>
$('#form').submit(function(e) {
e.preventDefault();
let cityInputVal = $('#city_input').val();
if (confirm('Do you want to submit ' + cityInputVal + '?'))
{
this.submit();
} else {
return false;
}
});
</script>
The preventDefault() function stops the form submission and therefore, page refresh.
I've got on my index.php form with POST method.
Action is form.php, so it's different file, but I'm using iframe to show my result, still being at index.php.
One more thing that I need, is to show one of my text inputs, still on index.php, when I do click submit button. I've tried to use onClick action:
<script type="text/javascript">
function showamount()
{
var price = document.getElementById('amount').value;
document.getElementById("some_p").innerHTML = price;
}
</script>
<input type="text" id="amount" />
<input type="submit" value="Podlicz" onclick="showamount()" />
<p id="some_p"></p>
It does not work there, when submit button is dedicated to form, with an action (I suppose, because it works without form, when is pure like above)
What is wrong? Thanks!
Try this <form id="form" onSubmit="return showamount();" action="form.php" target="_blank">
That will open a new window to run the form.php and will also update current page with inputed value.
javascript
<script>
function showamount()
{
var price = document.getElementById('amount').value;
document.getElementById("some_p").innerHTML = price;
return true;
}
</script>
html
<form id="form" onSubmit="return showamount();" action="form.php" target="_blank">
<input type="text" id="amount" />
<input type="submit" value="Podlicz" onclick="showamount()" />
</form>
<p id="some_p"></p>
I have been battling for the past two days with the evil onbeforeunload function in JavaScript. I have a function that warns the user when they are about to close a page.
However before the page close I would like to submit the form using JavaScript's .submit().
This is my code:
function setPopUpWindow(submitForm){
window.onbeforeunload = function () {
if (submitForm == false ) {
//alert("It worked"); --This code gets called so I know it works
document.getElementById("CancelScripting").submit();
//return "Unsaved Data would be lost";
}
}
}
In my html I have two buttons, one is (supposed to) trigger the .submit() and the other will just ignore it.
<body>
<form action=tett.html id="popUpForm" method=POST>
<script>setPopUpWindow();</script>
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</body>
The `setPopWindow value for the second input is not defined so it would be false.
For some reason the submit is not working well.
------------------------Edit to my question-----------------------------------------------
I would like to submit the form even if the user leaves the page by closing the X button on their window. This is the reason why I have the hidden button... Looks like people misunderstood my question.
The only thing you can do is to ask the user if they really want to leave the page:
<head>
<script type="text/javascript">
var submitForm = false;
window.onbeforeunload = function () {
if(submitForm == false){
return 'You have an unfinished form ...';
}
}
function setPopUpWindow(type){
submitForm = true;
}
</script>
</head>
<body>
<form action="" method="post" name="SubmitForm" id="SubmitForm">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
</form>
</body>
I think that what you want to do is submit the form rather than the button by doing something like:
document.forms["formId"].submit();
where formId is the id of the form.
Also, I dont see anywhere in your code where your form is but your buttons should be inside of form tags.
For example, it should look like this:
<body>
<script>setPopUpWindow();</script>
<form id="formId" action="" method="post">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</form>
</body>
I have made a short demo of a javascript problem. When the Submit button is clicked, the alert pops up informing the user that a blank value is not allowed, which is good. But then the page submits anyways, which is bad.
It seems this behavior is only happending on hidden fields.
(Its more clear if you enter any value into the name field. Click Submit. I know the page submits because the value in Name clears out.)
Can anyone see what is wrong here?
<html>
<body>
<form action="" method="post" name="form" onsubmit='return validate()'>
Name: <input type="text" name="name" id="name">
<br><br>Signature: Hidden <input type="hidden" name="poa_esign_signature" id="poa_esign_signature">
<br><br><button type="submit">Sign</button>
</form>
<script type="text/javascript">
function validate() {
var element=document.getElementById('poa_esign_signature');
if (element.value=='') {
alert('Signature may not be blank.');
element.focus();
return false;
}
}
</script>
</body>
</html>
Check your console. I bet the element.focus() is failing, because its a hidden input. Seems odd to focus on a hidden element.
Try using an <input type="submit"> rather than a <button type="submit">. I'm not sure if it'll make a difference, but it might be it.
Try this:
<html>
<body>
<script type="text/javascript">
window.onload = function()
{
var _form = document.getElementById("_form");
_form.addEventListener("submit", validate, false);
}
function validate(ev)
{
var element=document.getElementById('poa_esign_signature');
if (element.value=='')
{
alert('Signature may not be blank.');
element.focus();
ev.preventDefault();
}
}
</script>
<form action="www.google.it" method="post" name="form" id="_form">
Name: <input type="text" name="name" id="name">
<br><br>Signature: Hidden <input type="hidden" name="poa_esign_signature" id="poa_esign_signature">
<br><br><button type="submit">Sign</button>
</form>
</body>
</html>
Bye
onsubmit='return validate()'
should be
onsubmit='validate()'