How to fix? I've been struggling with this all day - looking at other posts and trying different methods. Any help is much appreciated... ~ newbie
The setTimeout() on this line of javascript breaks the code - causing a null value that is passed on for the custom URL.
The plan is
The user types a value in the text field.
The value is displayed on the webpage.
After a 4 second pause the user is automatically redirected to a new webpage based on the value they typed into the text field... this value being passed into the URL from submitting the form.
... Stuck at #3. The page pauses for 4 seconds, but no value is passed to the URL and it redirects to the home directory.
the code in question:
<form id="type_form" action="html-echo.php" method="post" onsubmit="setTimeout(function() { location.href='http://localhost:8888/vanity/site/' + document.getElementById('nav').value; return false; }, 4000);">
<input id="nav" maxlength="10" type="text" name="nav" autofocus placeholder="TYPE YOUR CHOICE... (spelling counts)">
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("nav").focus();
}
</script>
<button class="send" type="submit">SEND</button></form>
Thank you!
Try it more like this
<form id="type_form" action="html-echo.php" method="post">
<input id="nav" maxlength="10" type="text" name="nav" placeholder="TYPE YOUR CHOICE... (spelling counts)" autofocus />
<button class="send" type="submit">SEND</button>
</form>
<script type="text/javascript">
if (!( document.activeElement.id || document.activeElement.id == 'nav')) {
document.getElementById("nav").focus();
}
document.getElementById('type_form').onsubmit = function() {
setTimeout(function() {
document.location.href = 'http://localhost:8888/vanity/site/' + document.getElementById('nav').value;
}, 4000);
return false;
}
</script>
Also, returning false in the timeOut does not prevent the form from submitting, you have to return false rigth away.
You could try this:
<form id="type_form"
action="html-echo.php" method="post"
onsubmit="var redir='http://localhost:8888/vanity/site/'
+ document.getElementById('nav').value;
setTimeout(function() { location.href=redir; }, 4000);">
Related
Apologies if this question isn't layed out correctly (my first time using stack overflow).
I'm trying to validate if my inputs on a form are filled in when a user presses submit, it alerts the user when the inputs are empty but also when they are not, I'm not sure whats going wrong. Here is my Javascript:
<script>
function validation() {
var x = document.forms["bookingForm"]["id"].value;
if (x == "") {
alert("Ensure all fileds are filled");
return false;
} else {
sendSMS();
alert("Success");
return true;
}
}
</script>
Here is a link to an expanded part of the code for reference:https://pastebin.com/Dj5fA3gB
The general syntax for accessing a form element and element's value are:
document.forms[number].elements[number]
document.forms[number].elements[number].value
If you are using submitButton as in and you are calling validation on onSubmit of the form then you need to call event.preventDefault();
<!DOCTYPE html>
<html>
<body>
<form onsubmit="validation()" name="bookingForm">
First Name: <input type="text" name="id" value="Donald"><br>
Last Name: <input type="text" name="lname" value="Duck">
<input type="submit" value="Submit" />
</form>
<script>
function validation() {
event.preventDefault();
var x = document.forms["bookingForm"]["id"].value;
if (x == "") {
alert("Ensure all fileds are filled");
return false;
} else {
sendSMS();
alert("Success");
return true;
}
}
</script>
</body>
</html>
As suggested in my comment the most clean solution is to use the html attribute required by adding it to your inputs.
Looks something like this.
<form>
<input type="text" name="example" required>
<input type="submit" name="send">
</form>
The biggest advantage is that it works without any additional JS which is in my opinion always the prefered solution.
You didn't include return keyword in the form tag and adding unnecessary keyword "name" in the form tag.
<form onsubmit="return validation()" method="POST"
action="">
remove the "name" attribute from form tag and add action attribute.
Within the parenthesis in the action attribute, mention what happen if your validation success
Ex:(this code help you understand "action" attribute)
<form onsubmit="return productsvalidationform();" method="POST"
action="AddProductServlet">
when the form was successfully validated, I directed to AddProductServlet.(AddProductServlet is JSP servlet).
so that mention where do you need to redirect.
I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>
I have a website where people post links from Google+. I am trying to make sure that people can only post specific links from Google plus. An example would be, someone would need to post a link like
https://plus.google.com/games/907809777960/params/%22%7B%5C%22encPrms%5C%22%3A%5C%22eyJiYXBpVGlja2V0SWQiOiI4MzFhNGQ0Ny0yYTU4LTQ2OTktYmI1Yy1hN2ExYTAzY2U4ZTMiLCJsYW5kaW5nUGFnZSI6Im5ld3NmZWVkL2JvbnVzYWJsZUZlZWQvbWFydmVsY29tcGxldGUvNTQ3Mjc3LzEzMTQ0NzA0MjUvMCIsInJlZl9pZCI6IjEwOTkyODAzNzUzNzQ2Mjk5NzAxMCIsInRyYWNrIjoibmV3c2ZlZWQtYm9udXNfbWFydmVsQ29tcGxldGUtMCIsInNlbmRfdGltZXN0YW1wIjoiMTMxNDQ3MDQyNyJ9%5C%22%7D%22/source/3.
I want to make sure that the link starts with or at least contains https://plus.google.com/games/907809777960/params/, if not, it will not submit the link and alert that the link is invalid. The code I have so far is.
<script type="text/javascript" language="JavaScript">
function checkForm(theForm) {
if (form.bonuslink.indexOf("https://plus.google.com/games/907809777960/params/") == -1)
{ alert('You can only enter authentic Google + links'); return false; }
else {
return true; }
}
</script>
<form action="submitbonus.php" onsubmit="return checkForm(this);" method="post">
Bonus Link: <input name="bonuslink" type="text" size="40" /> <input name="Submit" type="submit" value="Submit Bonus" /><br />
</form>
I cannot get it to work for some reason. It submits every time regardless of what it typed. I am not that familiar with javascript, so any help would be appreciated.
edit edit: you have two problems you need to reference the bonuslink value not the DOM element itself and you need to call it as a member of the 'theForm' instead of 'form' since that is what you called the parameter. Other than that everything should be fine.
<script type="text/javascript" language="JavaScript">
function checkForm(theForm) {
if (theForm.bonuslink.value.indexOf("https://plus.google.com/games/907809777960/params/") == -1){
alert('You can only enter authentic Google + links');
return false;
} else {
return true;
}
}
</script>
<form action="submitbonus.php" onsubmit="return checkForm(this);" method="post">
Bonus Link: <input name="bonuslink" type="text" size="40" /> <input name="Submit" type="submit" value="Submit Bonus" /><br />
</form>
this regular expression will extract the domain name from any string.
basically it'll return the part starting from http:// etc.
/((https?|s?ftp|dict|www)(://)?)[A-Za-z0-9.\-]+)/gi
it'll detect the following forms:
http://www.google.com
https://www.google.com
ftp://www.google.com
dict://www.google.com
www.google.com
enjoy.
I am implementing search and when i put nothing in search box this must be remain on same page what will be java script coding for that.
i just create function in java script and return false if string is null on button click it is not working.
As your text makes no sense I must guess what you want to say.
You want your search form to not submit if field is empty and user clicks on search
on form attributes you use onsubmit
<form action="/" method="post" onsubmit="return checkForm(this)">
<input type="text" name="searchText" id="searchText" />
<input type="submit" value="search" />
</form>
now you check if searchText has any text and return true or false
<script type="text/javascript">
function checkForm(form){
if(form.searchText.value == ''){
return false;
}
return true;
}
</script>
I recommand to use JQuery for this kind of functionality, eg:
for the following form
<form action="/myaction" method="post" id="myForm">
<input type="text" value="" name="something1" />
<input type="text" value="" name="something2" />
<input type="submit" />
</form>
and in the same HTML file or in a separate JS file included via html HEADERS :
$(function () {
$("#myForm").submit(function() {
return ($(this).children("input").val()=='') ? false : true;
});
});
or if you don't like ternary expression:
$(function () {
$("#myForm").submit(function() {
doSubmit = true;
if ($(this).children("input").val()=='') {
doSubmit = false;
}
return doSubmit;
});
});
Using it this way, the function assume that all the fields of the form are not empty before posting data.
One other advantage of this method is that it doesn't alter the view code (this is some no intrusive javascript fashion) and can be much more easy to work with.
Hope it help.
I can't get the following code working: when I press enter in the text-box, the function is not called. I can't see why though...
<form>
<p align="center">
<input type="password" class="password" name="text1" onkeypress="submitonenter(text1.value,"money","cash",event)" /><br>
<input type="button" value="Enter" style="width: 100px" name="Enter" onclick=javascript:validate(text1.value,"money","cash") />
</p>
</form>
<script type="text/javascript">
function submitonenter(text1,text2,text3,evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
// process event here
if ( evt.keyCode==13 || evt.which==13 ) {
if (text1==text2)
load('money/welcome.html');
else
{
if (text1==text3)
load('cash/welcome.html');
else
{
load('failure.html');
}
}
}
}
}
</script>
<script language = "javascript">
function validate(text1,text2,text3)
{
if (text1==text2)
load('money/welcome.html');
else
{
if (text1==text3)
load('cash/welcome.html');
else
{
load('failure.html');
}
}
}
function load(url)
{
location.href=url;
}
</script>
I'm not sure why you need the submitOnEnter function at all.
Why not just change the input type='button' to type='submit' and change the onclick keyword to onsubmit?
EDIT:
Apologies, of course the 'onsubmit' would need to be placed in the form tags, not the input.
Giving the following:
<form onsubmit=validate(text1.value,"money","cash") >
<p align="center">
<input type="password" class="password" name="text1" /><br>
<input type="submit" value="Enter" style="width: 100px" name="Enter" />
</p>
</form>
I would rewrite it all, and use a input type="submit" instead a button (I also changed the access to the password field, for being able to use it at Firefox):
<form id="myForm" method="POST" action="failure.html" onsubmit="return validate(document.getElementById('text1').value,'money','cash');">
<p align="center">
<input type="password" class="password" name="text1" id="text1"/><br>
<input type="submit" value="Enter" style="width: 100px" name="Enter" />
</p>
</form>
<script language = "javascript">
function validate(text1,text2,text3) {
var form=document.getElementById('myForm');
if (text1==text2)
form.action='money/welcome.html';
else {
if (text1==text3)
form.action='cash/welcome.html';
else {
form.action='failure.html';
}
}
return true;
}
</script>
Edited: Implementing the onSubmit as recommended by #mway (thanks).
Like the others said - remove the onclick event, change the button to a submit button, and put the rest of your code inside a function referenced by an onsubmit tag on the form if you need to process/reformat data before you submit it.
After you have confirmed that the enter key has been pressed you want to call "evt.preventDefault()" to prevent the default action (ie form submission) from happening. I believe what is happening is that you are setting the location.href but then the form is submitting before that load happens so it reloads the same page instead.
Others have mentioned server side processing and from a security point of view this is probably a good idea. Currently this page has no security whatsoever. Anybody can look at your javascript and choose to navigate to either of the two welcome pages (or the failure page) as if they had put in the password correctly. If this is meant to be secure then you might want to go and read articles about security. In summary though do password checks and following logic on the server and don't have passwords that are that easy to guess. :) Also you might want to include checking they have given the correct password on every page (eg the welcome pages). This can easily be done by setting a session variable once you have confirmed their password.