I am an absolute begginer to web developing and I want to simply do a chance calculator in the online tool: jsfiddle. I got the error:"Shell form does not validate" and some strange errors after. Here is my HTML code:
<body>
<form method="post">The chance of succes:
<input type="number" name="chance">
<br>How many tries:
<input type="number" name="tries">
<br>
<input type="submit" value="Calculate!">
<br>
</form>
</body>
And my javascript code is:
function calculate(chance, tries) {
console.log(chance / tries * 100);
}
As I said, I am new to this so please try to explain step by step.
You have a few problems. One is that your form is trying to submit itself to itself. Another is that your calculate function is never called.
Your parameters for the function are never called either. Let's change the inputs to have an id instead of a name. For example:
<input type="number" id="chance">
This makes it easier to get the value from the input when clicking the button. I've made the input a button instead of a submit, just to make sure that your form data isn't getting sent anywhere.
<input type="button" onclick="return calculate(getElementById('chance').value, getElementById('tries').value)" value="Calculate!">
Here is a jsfiddle with a possible solution for you. http://jsfiddle.net/0dmkxcab/
Related
Okay, so I asked a variant of this question before, but I think the thread has died at this point, and I have a followup question:
Using a Form to Dynamically Change the URL in the Address Bar
So, I was looking to find a way to use a form to quickly add a product to a Volusion cart by entering it's product code. Turns out, if you're on the cart page, the solution is this snippet:
<form action="ShoppingCart.asp" name="form" method="get">
<input type="text" value="" name="ProductCode">
<input type="submit" value="Add To Cart">
</form>
Well, this doesn't work at all on other pages...knowing very little about how GET forms work, I'd love to better understand why this is, and what I can do to make this work on, say, the homepage.
The site (currently) is: http://ezndb.cwjea.servertrust.com/
As you can see, I have the red area sporting the code that I used on the check out page, but it doesn't work...any suggestions? I know other threads have suggested javascript/jquery or php methods of getting this to happen...
any form with the method ="get" will append data to the url in name value pairs ( the name being the input name
<form action="#" name="form" method="get">
<input name="q" />
<input name="q2" />
<input type="submit" value ="click and look at the address bar, Probably won't work on stack though" />
</form>
It doesn't work because your store is a members only site so the customers cannot add items to the cart until they are confirmed members.
I have a form with some input buttons(type="text") and submit button. I also want to implement rate function, so I have found plenty of jQuery plugins (for example this one http://www.jqueryrain.com/?ws9XtnKy). But I can't understand, how can I send rate value to .php handler together with other data, which is in a different form, when submit button is clicked. Can somebody explain it to me? Do you have any ready solutions?
<form method="POST" action="test.php">
<input type="text" name="booktitle" placeholder="Title"/>
<input type="submit"/>
</form>'
<script>
var x;
</script>
I'm writing a cms page for my site. part of it is writing a preview component for my blog. I have a form, and a preview button, that activates a Javascript, which places the html typed in the text-area in a div element to test it. Everything works fine but the problem is that it only works once for each pageload. So I can't test something, add some code and retest it. Any ideas how to make multiple testing possible ?
Code Form:
<form>
<textarea rows="30"cols="30" name="blogpost" style="width:500px;resize:none;" autofocus placeholder="Enter your new blogpost here!"></textarea>
</br>
<input type = "submit" value="post">
<input type = "button" id="testknop" value="previeuw" onclick="previeuwpost(this.form, this.form.blogpost);">
<input type="reset" />
</form>
Javascript Code:
function previeuwpost(form, text){
$("#previeuwbox").replaceWith(text.value);
}
Thanks a lot folks
replaceWith means replaced.
Therefore, after you click, the $("#previeuwbox") is gone.
Please use :
$("#previeuwbox").html(text.value);
I have a website where I want people to be able to type something in a text box and get sent to that directory based on what they entered.
Say customer numbers, so we have customer # 155. His invoices are in folder /invoices/155 directory. I want him to be able to type in his customer # and be directed with a button click to his directory with all his invoices.
Now I have coded the below code but it only works when I click on the button with the mouse. In Internet Explorer When I press enter it gives me a bunch of gook in the address bar and doesn't do anything. It looks like this in the address bar:
file:///C:/Users/My%20Name/Desktop/test.html?dir=%2Finvoices%2F&userinput=155
Instead of loading the folder /invoices/155/.
<html>
<head>
<title>test</title>
</head>
<form name="goto" action="">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="button" value="try me" onclick="window.location=this.form.dir.value+userinput.value">
</form>
Can anyone tell me what is wrong with the code and what can I do to fix it? Thanks in advance.
In some browsers the form will be posted when you press enter, eventhough there is no submit button. Use a submit button, and catch the submit, then you handle all cases:
<form name="goto" action="" onsubmit="window.location=this.dir.value+this.userinput.value;return false;">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="submit" value="try me">
</form>
It won't work, if you use file protocol. Especially in IE. You need a real web server.
And to let a customer type in his on id is extremely insecure. Anyone could type in any id. Use a login.
It is really*** important to sanitize every user input to prevent abuse.
It is a long way to go.
I think you should go for onsubmit on <form>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function handleFormSubmit(form)
{
window.location = form.dir.value + form.userinput.value;
return false;
}
</script>
</head>
<body>
<form onsubmit="return handleFormSubmit(this)">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text">
<input type="submit" value="try me" >
</form>
</body>
</html>
BTW:
Inlining javascript is not so good. Use script tag or external .js-file.
Edit:
Oops! OK, the error was that I wrote this.form.dir but it needed to be this.dir because this already referred to the form, now that the javascript handler was on the form tag (onsubmit="<handler-code>"). That works - http://jsfiddle.net/Q875a/
Edit 2:
Inlining javascript means that you write javascript code in your html tags (form, input,...) in the onXXX attributes - it's not readable. Having your script in a script tag within a handler-function (i.e. handleFormSubmit) makes it much more readable especially if your site gets more and more script in it - see current script and onsubmit-attribute.
Finally, if you want to to take a step further to crossbrowser, powerful javascript development you should take a look at jQuery - it's imho the door to really professional and exiting javascript programming!
JSFiddle to test:
http://jsfiddle.net/yNTK5/
jQuery-links concerning the topic:
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/
I'm working on a simple javascript login for a site, and have come up with this:
<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
<input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
<input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>
</form>
<script language = "javascript">
function validate(text1,text2,text3,text4)
{
if (text1==text2 && text3==text4)
load('album.html');
else
{
load('failure.html');
}
}
function load(url)
{
location.href=url;
}
</script>
...which works except for one thing: hitting enter to submit the form doesn't do anything. I have a feeling it's cause I've used "onclick" but I'm not sure what to use instead. Thoughts?
Okay yeah so I'm well aware of how flimsy this is security-wise. It's not for anything particularly top secret, so it's not a huge issue, but if you guys could elaborate on your thoughts with code, I'd love to see your ideas. the code i listed is literally all I'm working with at this point, so I can start from scratch if need be.
There are several topics being discussed at once here. Let's try to clarify.
1. Your Immediate Concern:
(Why won't the input button work when ENTER is pressed?)
Use the submit button type.
<input type="submit".../>
..instead of
<input type="button".../>
Your problem doesn't really have anything to do with having used an onclick attribute. Instead, you're not getting the behavior you want because you've used the button input type, which simply doesn't behave the same way that submit buttons do.
In HTML and XHTML, there are default behaviors for certain elements. Input buttons on forms are often of type "submit". In most browsers, "submit" buttons fire by default when ENTER is pressed from a focused element in the same form element. The "button" input type does not. If you'd like to take advantage of that default behavior, you can change your input type to "submit".
For example:
<form action="/post.php" method="post">
<!--
...
-->
<input type="submit" value="go"/>
</form>
2. Security concerns:
#Ady mentioned a security concern. There are a whole bucket of security concerns associated with doing a login in javascript. These are probably outside of the domain of this question, especially since you've indicated that you aren't particularly worried about it, and the fact that your login method was actually just setting the location.href to a new html page (indicating that you probably don't have any real security mechanism in place).
Instead of drudging that up, here are links to related topics on SO, if anyone is interested in those questions directly.
Is there some way I can do a user validation client-side?
Encrypting Ajax calls for authentication in jQuery
3. Other Issues:
Here's a quick cleanup of your code, which just follows some best practices. It doesn't address the security concern that folks have mentioned. Instead, I'm including it simply to illustrate some healthy habits. If you have specific questions about why I've written something a certain way, feel free to ask. Also, browse the stack for related topics (as your question may have already been discussed here).
The main thing to notice is the removal of the event attributes (onclick="", onsubmit="", or onkeypress="") from the HTML. Those belong in javascript, and it's considered a best practice to keep the javascript events out of the markup.
<form action="#" method="post" id="loginwindow">
<h3>Login to view!</h3>
<label>User ID: <input type="text" id="userid"></label>
<label>Password: <input type="password" id="pass"></label>
<input type="submit" value="Check In" />
</form>
<script type="text/javascript">
window.onload = function () {
var loginForm = document.getElementById('loginwindow');
if ( loginwindow ) {
loginwindow.onsubmit = function () {
var userid = document.getElementById('userid');
var pass = document.getElementById('pass');
// Make sure javascript found the nodes:
if (!userid || !pass ) {
return false;
}
// Actually check values, however you'd like this to be done:
if (pass.value !== "secret") {
location.href = 'failure.html';
}
location.href = 'album.html';
return false;
};
}
};
</script>
Put the script directly in your html document. Change the onclick value with the function you want to use. The script in the html will tell the form to submit when the user hits enter or press the submit button.
<form id="Form-v2" action="#">
<input type="text" name="search_field" placeholder="Enter a movie" value=""
id="search_field" title="Enter a movie here" class="blink search-field" />
<input type="submit" onclick="" value="GO!" class="search-button" />
</form>
<script>
//submit the form
$( "#Form-v2" ).submit(function( event ) {
event.preventDefault();
});
</script>
Instead of <input type="button">, use <input type="submit">. You can put your validation code in your form onsubmit handler:
<form id="loginwindow" onsubmit="validate(...)">
it's because it's not a form submitting, so there's no event to be triggered when the user presses enter. An alternative to the above form submit options would be to add an event listener for the input form to detect if the user pressed enter.
<input type="password" name="text1" onkeypress="detectKey(event)">
Maybe you can try this:
<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
<input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
<input type="submit" value="Check In"/>
</p>
</form>
As others have pointed out, there are other problems with your solution. But this should answer your question.
Surely this is too unsecure as everyone can crack it in a second ...
-- only pseudo-secure way to do js-logins are the like:
<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
Name: <input type="text" name="theName"><br>
Password: <input type="password" name="thePassword"><br>
<input type="submit" value="Login now">
</form>
My Thought = Massive security hole. Anyone can view the username and password.
More relevant to your question: - You have two events happening.
User clicks button.
User presses enter.
The enter key submits the form, but does not click the button.
By placing your code in the onsubmit method of the form the code will run when the form is submitted. By changing the input type of the button to submit, the button will submit the form in the same way that the enter button does.
Your code will then run for both events.