I have two numbers, 20 and 0.
My code is supposed to display an alert box based on either of two numbers entered and submitted. But nothing happens once I click submit when I enter either of the two numbers.
Not sure if form action attribute is the reason but it's a single page html document named compact.html, hence the value of the action attribute.
<!DOCTYPE html>
<html>
<head>
<title>Check PIN</title>
<script type="text/javascript">
function userCode {
if (document.registration.pincode.value == "20") {
alert("Congrats, you passed!");
document.registration.pincode.focus();
return false;
}
if (document.registration.pincode.value =="0") {
alert("Sorry, you failed!");
document.registration.pincode.focus();
return false;
}
return (true);
}
</script>
</head>
<body>
<form action="compact.html" name="registration" onsubmit = "return(userCode());">
<label>Please enter your PIN:</label><br>
<br>
<input type="text" name="pincode"><br>
<br>
<input type="button" name="Submit" value="Submit">
</form>
</body>
</html>
you could use html's onclick event to fire the JS function; for that the following line needs to change :
<input type="button" name="Submit" value="Submit">
with following:
<input type="button" name="Submit" value="Submit" onclick="userCode()">
Note: You can always debug your code on Browser console (By Pressing function key - f12)
Related
I have page with form on it, I am trying to disable the button on submit with a custom disable message on it, and submit the form after using jquery.
<form>
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
I have try both form submit or form[0] submit neither submits the form, I try logging the form, the form is logged correctly to console, and there are no errors in console when clicking submit.
$(document).ready(function() {
$('.send').click(function(e) {
e.preventDefault();
e.stopPropagation();
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
console.log(form); //Logs form fine
form[0].submit();
// form.submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="run" />
<input type="submit" class="send" value="Save" data-attr-message="Sending..." />
</form>
Your form does not have an "action" and "method".
It should look like:
<form action = "http://example.com/backendScript" method = "POST">
if your goal is to "simulate" the time that it takes to send data, and you want to see the button to be disabled until that time, one way is to use "setTimeout()" method of javascript. you do not need to use "e.preventDefault()" because it prevent the form from submitting. I posted the code below that I think does what you expected:
$(document).ready(function() {
$('.send').click(function(e) {
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
setTimeout(function() {
form.submit();
}, 1000)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="submit.html">
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
<script src="jquery-3.5.1.js"></script>
<script src="script.js"></script>
</body>
</html>
the "submit.html" is simply an html file with a message that you can add to your folder yourself to see that the form is submitting.
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
So, I have written this form and this simple javascript to validate the user input.
The thing is, it works perfectly until I add a third function, validateHash, that takes the hashtag inputed into the textbox and checks if it has an hashtag at the beginning.
I sent the code to a friend, and he said that on his PC it works fine (Checks if the fields are filled, and then checks if the hashtag is correct), while on mine it just skips every function and submits the data to the php page without checking anything.
I am using Firefox, and he's using Chrome, but I tried even with the latter with the same results.
Is there something wrong in the code itself?
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script language="JavaScript" type="text/javascript">
function validateForm() {
if(validate(document.form.song.value) && validate(document.form.hashtag.value))
if(validateHash(document.form.hashtag.value))
return true;
else
{
alert("Please fill all the fields");
return false;
}
}
function validate(text) {
if(text==null || text=="")
return false;
else
return true;
}
function validateHash(text) {
if(text.charAt(0) != "#") {
alert("Insert hashtag correctly");
return false;
}
else
return true;
}
</script>
<form action="format.php" name="form" method="post" class="basic-grey" onsubmit="return validateForm()">
<h1>Anisongs Form
<span>Fill all the text in the fields</span>
</h1>
<label>
<span>Song lyrics :</span>
<textarea id="song" name="song" placeholder="Max 120 characters" maxlength="120"></textarea>
</label>
<label>
<span>Anime hashtag :</span>
<input id="hashtag" type="text" name="hashtag" placeholder="#loghorizon" maxlength="20"/>
</label>
<span> </span>
<input type="submit" class="button" value="Submit" />
<input type="reset" class="button" value="Cancel" />
</form>
Well, the issues were the brackets. JS really fancies them, and without them even on single lines ifs it wouldn't start to work.
I'll be honest, I don't really know what the best approach here is. I've got no Javascript knowledge, but I don't think should be necessary here...It's stupidly simple.
I have a simple form. I want the user to be able to type a word and press enter or click "submit." When "X" is entered, I want them to be redirected to 'www.MyURL.com/X.html'. The only solution I could find looked like this:
<form>
<input name="solution" type="text" id="solution" maxlength="10" /><br />
<input type="button" value="submit" onclick="window.location='http://www.MYURL.com/' + this.form.solution.value + '.html'"/>
</form>
However, this doesn't allow the user to hit Enter to submit the form. I tried the below to make it a submit input, but I don't know anything about the potential operations of "onsubmit", and this one isn't working.
<form onsubmit="window.location='http://www.MYURL.com/' + this.form.solution.value + '.html'">
<input name="solution" type='text' id="solution" maxlength="10" /><br />
<input type="submit" value="submit" />
Should I be using "action=" for this event? And I don't know if "method=" plays into it.
My issue is that I can't figure out how to make the form submit its text content to a URL and then link to that URL.
You can do this all in javascript without a form. Just check the key code with each keyboard press - if it's the Enter key (13), then do your redirect.
Here's a full working page:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="solution" onkeyup="doSomething(event);">
<input type="button" value="Click Me" onclick="redirect();">
<script type="text/javascript">
function doSomething(e) {
var keyCode = e.keyCode || e.charCode;
if (keyCode === 13) {
redirect();
}
}
function redirect() {
window.location.href = "http://www.MYURL.com/"
+ document.getElementById("solution").value
+ ".html";
}
</script>
</body>
</html>
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>