I need a form field that if a number under 21 and over 35 is entered there is a pop up up that tells them to enter a number between 21 and 35.
Firstly I have seen this one, it doesn't solve my requirements:
Form validation with Javascript - Field value must be between 2 specific numbers
I have the following and it doesn't work, any idea why?
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["daysCalc"]["days"].value;
if (x>=21 && x<=35) {
alert("Number must be between 21 and 35");
return false;
}
}
</script>
</head>
<body>
<form name="daysCalc" action="" onsubmit="return validateForm()" method="post">
Days: <input type="text" name="days">
<input type="submit" value="Submit">
</form>
</body>
</html>
Your help would be appreciated.
Thanks in advance
You're actually sending the error message when the user is entering a number within the given range, not outside the given range.
Try this:
function validateForm() {
var x = document.forms["daysCalc"]["days"].value;
if (x < 21 || x > 35) {
alert("Number must be between 21 and 35");
return false;
}
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["daysCalc"]["days"].value;
if (x<=20 || x>=36) {
alert("Number must be between 21 and 35");
return false;
}
}
</script>
</head>
<body>
<form name="daysCalc" action="" onsubmit="return validateForm()" method="post">
Days: <input type="text" name="days">
<input type="submit" value="Submit">
</form>
</body>
</html>
Related
I have a simplified HTML form that I would like to multiply entered amount by 100 and send it with GET method to any endpoint.
Here is my form:
<body>
<form method="get" action="https://endpoint/purchase.php">
<input type="text" name="description" value="description">
<input type="text" name="amount">
<input type="submit" value="pay">
</form>
</body>
And my Js
var $output = $("#output-value");
$("#input-value").keyup(function() {
var value = parseFloat($(this).val());
$output.val(amount*100);
});
I'm stuck here, as I don't know how to connect them to send a proper value where I want?
Thank You. That helps a lot, I have another problem, where, in which the URL passed in GET is shortened / cut out?
So below is an original URL
https://sklep.przelewy24.pl/zakup.php?z24_id_sprzedawcy=88696&z24_kwota=10000&z24_currency=pln&z24_nazwa=test&z24_opis=test&z24_return_url=http%3A%2F%2Fwww.przelewy24.pl&z24_language=pl&k24_kraj=PL&z24_crc=ca056736&
I would like to be able to dynamiclly trnasfer z24_kwota (/z24_amount) so my form can transfer the amount as I want.
After tweaking the code above to my needs:
<html>
<head>
<meta charset="utf-8">
<title>Formularz uproszczony</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<form id="testForm" method="get" action="https://sklep.przelewy24.pl/zakup.php?z24_id_sprzedawcy=88696&z24_currency=pln&z24_nazwa=test&z24_opis=test&z24_return_url=http%3A%2F%2Fwww.przelewy24.pl&z24_language=pl&k24_kraj=PL&z24_crc=ca056736&">
<input type="text" name="z24_kwota" value="Kwota">
<input type="submit" value="zapłać ">
<script>
$("#testForm").on('submit', function() {
var amount = $("#testForm input[name='z24_kwota']")
var value = parseFloat(amount.val());
value = value * 100 || 0; // set zero for non number
if (prompt("Kwota przekazywana do Przelewy24 to: ", value)) {
amount.val(value);
return true
}
else {
console.log('submission aborted, value not multiplied')
return false;
}
});</script>
</form>
</body>
</html>
I see that only first part is in the browser adress bar:
'''https://sklep.przelewy24.pl/zakup.php?z24_kwota=2000'''
Can someone tell me why that is, and how to fix it ?
This is common problem, please see browser console (F12) and check for error, you don't have element with ID #input-value, #output-value and variable amount
if you want to change input name amount before submit use submit event
$("#testForm").on('submit', function() {
var amount = $("#testForm input[name='amount']")
var value = parseFloat(amount.val());
value = value * 100 || 0; // set zero for non number
if (prompt("amount value now: ", value)) {
amount.val(value);
return true
}
else {
console.log('submission aborted, value not multiplied')
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm" method="get" action="https://endpoint/purchase.php">
<input type="text" name="description" value="description">
<input type="text" name="amount">
<input type="submit" value="zapłać z przelewy24.pl">
</form>
I came across some code involving a submit button, whose onclick attribute is: onclick="validateForm();return false". For example:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script>
function validateForm() {
var name = document.forms["myForm"]["fname"].value;
if (name.trim() == "") {
document.getElementById("demo").innerHTML = "Name must be filled out!";
}
else
document.myForm.submit();
}
</script>
</head>
<body>
<div id="demo" style="color:red"></div><br>
<form name="myForm" action="formHandler.jsp" method="post" target="_blank">
Name: <input type="text" name="fname"> <br>
<input type="submit" value="Submit" onclick="validateForm();return false">
</form>
</body>
</html>
I don't see any difference even if I remove return false in the above example. The return false does not stop the form from submitting as long as the text field is entered. So, what's the purpose of using "return false" immediately after the form is submitted by document.myForm.submit()?
It’s for when the form isn’t submitted by document.myForm.submit(), i.e. in the error case. A better way to write it would probably be to have validateForm control the return value:
function validateForm() {
var name = document.forms["myForm"]["fname"].value;
if (name.trim() == "") {
document.getElementById("demo").innerHTML = "Name must be filled out!";
// Error; cancel the form submission
return false;
}
// Just let the browser continue submitting; no need to .submit()
return true;
}
and
<form name="myForm" action="formHandler.jsp" method="post" target="_blank"
onsubmit="return validateForm()">
Name: <input type="text" name="fname"> <br>
<input type="submit" value="Submit">
</form>
Check Working example :
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
<form name="myform" method="post" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
I'm trying to validate a form I'm creating and can't seem to understand how this works. I'm trying to make sure the field isn't empty or contains no white-spaces I have validated it server side but not client side.
Could someone please show me the code like below to validate against being empty or having no white-spaces?
I see these below and this is what I thought they did:
x===null // means if field is empty
x==="" // on trying this means if the field is empty
x===" " // and this checks if there is 1 white space
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x===null || x===""|| x===" ") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
You can do this using javascript trim() function.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x.trim()==null || x.trim()==""|| x===" ") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
I want, If balance field is <0, If Recharge amount filed >0 then form not submit, Can you give me Java script or php code please. Here is my editing code but not working I dont understand. Please give me solutions
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
form.onsubmit = function(e){
if(document.getElementById("bal").value==30){
e.preventDefault();
alert("Value must not be equal to 30");
}
if(document.getElementById("bal").value<0){
e.preventDefault();
alert("error msg");
return false;
}
if(document.getElementById("amount").value>0){
e.preventDefault();
alert("error msg");
return false;
}
};
</script>
</head>
<body>
<form action = '' method='post' name="recharge">
<input type="text" id="bal" name="bal" value="">Balance</><br>
<input type="text" id=="number" name="number" value="">Rehcarge number</><br>
<input type="text" id="amount" name="amount" value="">Amount</><br>
<input type="submit" name="submit" value="SUBMIT">
</form>
</body>
</html>
Try:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery("input[name='button']").click(function(e){
//getting your balance amount
bal = jQuery("input[name='balance']").val();
//if balance is lesser than 0, form will be submitted
if(bal<0){
jQuery('form').submit();
}
});
});
</script>
Make sure your input fields are enclosed inside <form></form> tags.
You can check the submitted balance value like
$balance = $_REQUEST['balance']; if($balance <=30){ echo "cant submit form"; header("location: your form path ") ; }
Or you can user jQuery to check the value and show alert message to user
You can do this via javascript or using any of the js libraries, check on form submit as below:
Try
var form = document.getElementById("fr");
form.onsubmit = function(e){
if(document.getElementById("bal").value==30){
e.preventDefault();
alert("Value must not be equal to 30");
}
return true
};
See demo here
do in jquery like this
$("input[type=submit]").click(function(e){
if($("input[name=amount]").val() == "30")
{
alert("you have entered amount as 30. Form not submitted");
return false;
}
else if($("input[name=amount]").val() > $("input[name=balance]").val())
{
alert("you dont have enough balance");
return false;
}
});
And Add this
<script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script>
to head of html
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($)
{
jQuery("input[name='submit']").click(function(e)
{
balance = jQuery("input[name='balance']").val();
amount = jQuery("input[name='amount']").val();
if(balance < 0 && amount > 0)
{
alert('Balance is less than 0 and amount is greater than 0 : So not submitting');
jQuery('form').submit();
}
else
{
alert('Balance is greater than 0 : So not submitting');
}
});
});
</script>
<form action = '' method='post'>
<input type="text" name="balance" value="">Balance</><br>
<input type="text" name="number" value="">Rehcarge number</><br>
<input type="text" name="amount" value="">Amount</><br>
<input type="submit" name="submit" value="SUBMIT">
</form>
The text box should accept onli decimal values in javascript. Not any other special characters. It should not accept "." more than once. For ex. it should not accept 6.....12
Can anybody help???
You can use regex:
function IsDecimal(str)
{
mystring = str;
if (mystring.match(/^\d+\.\d{2}$/ ) ) {
alert("match");
}
else
{
alert("not a match");
}
}
http://www.eggheadcafe.com/community/aspnet/3/81089/numaric-validation.aspx
You can use Regex.test method:
if (/\d+(\.\d{1,2})/.test(myTextboxValue)) //OK...
JQuery Mask plug in is the way to go!
http://www.meiocodigo.com/projects/meiomask/#mm_demos
If you mean you do not want anything but an integer or a decimal to be typed into the field, you'll need to look at the value
as each key is pressed. To catch pasted input, check it again onchange.
textbox.onkeyup=textbox.onchange=function(e){
e= window.event? event.srcElement: e.target;
var v= e.value;
while(v && parseFloat(v)!= v) v= v.slice(0, -1);
e.value= v;
}
probably you want to validate a form input before sending it to the server. Here is some example:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate(){
var field = document.getElementById("number");
if(field.value.match(/^\d+(\.\d*)?$/)){
return true;
} else {
alert("Not a number! : "+field.value);
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return validate();">
<input type="text" id="number" width="15" /><br />
<input type="submit" value="send" />
</form>
</body>
</html>
I just whipped this up. Useful?
<html>
<head>
<script type="text/javascript">
function validNum(theField) {
val = theField.value;
var flt = parseFloat(val);
document.getElementById(theField.name+'Error').innerHTML=(val == "" || Number(val)==flt)?"":val + ' is not a valid (decimal) number';
}
window.onload=function(){
validNum(document.getElementById('num'));
}
</script>
</head>
<body>
<form>
<input type="text" name="num" id="num"
onkeyup="return validNum(this)" /> <span id="numError"></span>
</form>
</body>
</html>