I have an HTML code:
<form action="?" id="form1" method="POST" onsubmit="return g.submitForm();">
<input type="text" name="posX" id="formPosX" />
<input type="text" name="posY" id="formPosY" />
<input type="submit" value="Send" />
</form>
and JS code:
var g = {
submitForm: function () {
var form = document.forms.form1;
if ( form.posX.value > 100 )
{
form.posX.value = 100;
}
return false;
}
}
and this form is always sending after updating values. My goal is to update wrong values and stop submitting form (I'd like to do it via AJAX). When I remove the IF statement then code works fine, but I need to update some values (and also show an error, if is).
Hope you'll understand my very bad English :)
You're assuming the value in the form input is an integer, when in reality it will be treated as a string data type. Try converting the value to a number before applying the comparison.
if ( parseInt(form.posX.value) > 100 )
{
form.posX.value = "100";
}
I've adapted your code see below (You will need to include the Jquery library):
JS Fiddle
http://jsfiddle.net/boggey79/kN49d/
Form request stopped, because onSubmit return false. You need return true.
Check input value on keypress event:
<script>
function checkPosX(this) {
if ( parseInt(this.value) > 100 ) {
this.value = "100";
}
}
</script>
<form action="?" id="form1" method="POST">
<input type="text" name="posX" id="formPosX" onkeypress="checkPosX(this)" />
<input type="text" name="posY" id="formPosY" />
<input type="submit" value="Send" />
</form>
Then work fine.
Related
This is my code for my login page:
http://pastebin.com/RGVrW0Hi
It's the field right under the body tag.
All the way down there is a scipt tag with my function. I'm trying to check if the user has typed something inside the "Navn" field, if not it should return false.
I have tried it in a smaller page that look like this:
http://pastebin.com/d1vzyDvd
Can anyone point me in the right direction?
If you want to get any field by name use
var value = document.getElementsByName("navn")[0].value;
// By Id
var value = document.getElementsById("navn").value;
Use document.getElementsByName("navn").value[0] instead of document.famular.navn.value to get the value of an input field by its name.
function validerform125() {
if (document.getElementsByName("navn")[0].value == "") {
alert("NEEEJ!!!");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="famular" action="vanillahost.html" method="post" onsubmit="return validerform125()">
Navn
<input name="navn" type="text">
<br/>Email
<input name="email" type="email">
<br/>
<div>
<input type="submit" name="send" value="send">
</div>
</form>
You add [0] to document.getElementsByName("navn") because getElementsByName returns a NodeList object which represents a collection of elements with the specified name (In your case: "Navn"). By adding [0] you are basically returning the first element found.
better if you can include jquery in your html, will give you a nicer interface to interact with html elements.
In java-script you can try the following code
<body>
<div>
<form name="famular" action="vanillahost.html" method="post" onsubmit="return validerform125()">
Navn <input name="navn" type="text"><br/>
Email <input name="email" type="email"><br/>
<div>
<input type="submit" name="send" value="send">
</div>
</form>
</div>
</body>
<script>
function validerform125() {
var x = document.forms["famular"]["navn"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
Got a form that requires users to input an amount to donate. On clicking submit, a function is called and the function is meant to display the amount specified and prompt the user to confirm if the amount typed is the actual amount or not.
The Cancel option in the Confirm() keeps submitting the form instead of returning false.
function donationFormSend(){
get_donation_amount = document.getElementById("get_donation_amt").value;
if(get_donation_amount != ''){
return confirm("You have specified "+get_donation_amount+" as the amount you wish to donate. \n\n Are you sure you want to proceed with the donation?");
}
else{
alert("Amount must be specified to process your donation.");
return false;
}
}
<form method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input name="donation_submit" type="submit" id="Submit" value="Proceed" onclick="return donationFormSend();" />
</form>
Jsfiddle link
Would be pleased getting help with this.
I updated your jsfiddle so it's in the expected format (loading the js in the head) and returning the confirm result
return confirm('blah blah')
works perfectly well for me in FF! Just make sure you clear your cache and reload your page.
A way to do do it might be:
form :
<form id='test' method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input type="submit" value="submit" onClick="form_submit(this.value)">
<input type="submit" value="cancel" onClick="form_submit(this.value)">
</form>
javascript:
document.getElementById('test').addEventListener('submit',function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
})
form_submit= function (submited_by) {
if(submited_by == 'submit'){
alert('Submited')
}else if (submited_by == 'cancel'){
alert('cancelled')
}
}
I'd rather use a switch statement to make it expandable in the future but this should work.
Also I'm using jquery mostly because I'm not sure how to stop default action without it.
here's a JSFiddle with the code running.
EDIT: Updated to not use Jquery.
EDIT: well, I feel stupid now, realised it wasn't cancel button in a submit form but in a confirmation form.
In your HTML use : onclick="return donationFormSend();"
In Your Javascript: return confirm("Are you sure ....blah blah blah")
I have a javascript file that validates a form before posting, here's the form...
<form action="#" name="login" method="post" onsubmit="return validate(this);">
<input type="text" name="user"><input type="submit" class="submit">
</form>
Here's the javascript...
function validate(f) {
if (f.user.length < 27 || f.user.length > 34) {
document.getElementById("notice").innerHTML = "Invalid input";
return false;
}
return true;
}
It doesn't seemed to be firing the "notice" message, why can I not detect the length?
I assume you are trying to check the value of whatever is in the input...
Use the value length not the length of the element.
f.user.value.length
I need to send a variable returned from a javascript function with a form.
<form name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
</form>
function send()
{
var number = 5;
return number;
}
In the validate_accountinfo.php I want to return the value of the function. How to do this?
Place a hidden field in your form, and set its value in your javascript function.
Hidden field:
<input type="hidden" id="hdnNumber">
JavaScript:
function send(){
var number = 5;
document.getElementById("hdnNumber").value = number;
}
Add an <input hidden id="thevalue" name="thevalue" /> to the form, set its value using javascript and then submit the form.
<form id="RegForm" name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
<input hidden id="thevalue" name="thevalue" />
</form>
<script type="text/javascript">
function send()
{
var number = 5;
return number;
}
document.getElementById('thevalue').value = send();
document.getElementById('RegForm').submit();
</script>
Make a <input type="hidden" id="field" /> and update it's value with jQuery.
$("#field").attr({value: YourValue });
Add a hidden input and populate it before sending. Make sure you specify a name= attribute.
<form name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
<input type="hidden" name="myvalue"/>
</form>
function send()
{
var number = 5;
// jQuery
$('input[name=myvalue]').val( number )
return true;
}
Pls check code .html form gets submitted even if javascript returns false.
<form id="form1" name="form1" method="post" action="sub.jsp" onsubmit="return getValue()">
<input type="text" id="userName" name="userName" onkeyup="return getValue()" />
<input type="submit" name="Submit" value="Submit" />
</form>
<script type="text/javascript" >
function getValue()
{
var userName=document.getElementById("userName");
document.getElementById("userNamemsg").innerHTML="";
if(userName.value=="")
{
var mdiv=document.getElementById("userNamemsg");
mdiv.innerHTML="Error:Required Fields cannot be blank!";
form.userName.focus();
return false;
}
return true;
}
1) try changing line form.userName.focus(); to document.form1.userName.focus();
OR
2) try submitting from function itself:
<input type="button" name="Submit" value="Submit" onclick="getValue()" />
<script type="text/javascript" >
function getValue()
{
var userName=document.getElementById("userName");
document.getElementById("userNamemsg").innerHTML="";
if(userName.value=="")
{
var mdiv=document.getElementById("userNamemsg");
mdiv.innerHTML="Error:Required Fields cannot be blank!";
document.form1.userName.focus();//I think this is the problem
return false;
}
document.form1.submit();
}
</script>
I think there are errors in your JavaScript code that happen prior to your return statements. Fix those errors and your code should work.
alternatively, you make the click handler on the submit button to return false.