Hi Please find the below form validation code. I've used html5 input attributes for most of the validation except where i need all letter for the first name and last name. The below cose is what i wrote for first name...but looks like it's not entering the if condition. Can anyone please help
and lemme know where I went wrong.....Thanks Guys!!
<!DOCTYPE html>
<html>
<head>
<script>
function formvalid(){
var uname=document.form1.usrname.value;
var letters=/^[a-zA-Z]+$/;
if (uname.value.match(letters)){
alert("Your details have been saved.Please submit the course fee at the cash counter before 13/12/2014 and collect your id card.The training will start on 23/12/2014 from 10.30am to 4.40 pm");
return true;
}else{
alert("Please Enter a valid Username");
uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="form1">
<h1> Register Online</h1>
<Table>
<tr>
<td>First Name</td>
<td><input type="text" name="usrname" required></td>
</tr>
<tr>
<td> Last Name</td>
<td><input type="text" id="usrname1" required></td>
</tr>
<tr>
<td> Email ID</td>
<td><input type="email" id="mail" pattern="[^#]+#[a-zA-Z]+\.[a-zA-Z]{2,6}" required></td>
</tr>
<tr>
<td> Roll Number</td>
<td><input type="number" min="1" id="roll" required></td>
</tr>
<tr>
<td>Training Program</td>
<td><select id="sel">
<option value="movie">Select Training</option>
<option value="andro">Android</option>
<option value="java">Java</option>
<option value="C">Robotics</option>
<option value="hack">Ethical Hacking</option>
</select></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input type="number" min="1" id="number" required></td>
</tr>
<tr><td>
<Button type="submit" onclick="return formvalid()">Submit</BUTTON></td>
<td><BUTTON type="reset">Reset</BUTTON>
</td></tr>
</table>
</form>
</body>
</html>
Related
I´m making an inventory control program for a veterinary, but in one of the windows to control the stock provider I have a select input and the idea is, when I select that the purchase is for credit, a new input will appear (type date) to select when the invoice payment term expires. I've tried whit jQuery and javaScript, but it still not working, any idea?
This is the form:
<form method="post" action="guardaArt.php">
<tr> <td>Codigo</td> <td><input type=text name="codigo"></td> </tr>
<tr> <td>Nombre</td> <td><input type=text name="nombre"></td> </tr>
<tr> <td>Gravado o Exento</td> <td><select name="select">
<option value="1" selected>Gravado</option>
<option value="2">Exento</option>
</select></td> </tr>
<tr> <td>Precio de Compra</td> <td><input type=text name="precioComp"></td> </tr>
<tr> <td>Precio de Venta</td> <td><input type=text name="precioVent"></td> </tr>
<tr> <td>Precio de Venta por Unidad</td> <td><input type=text name="precioUni"></td> </tr>
<tr> <td>Contenido</td> <td><input type=text name="cont"></td> </tr>
<tr> <td>Codigo del Proveedor</td> <td><input type=text name="codProv"></td> </tr>
<tr> <td>Usos</td> <td><input type=text name="usos"></td> </tr>
<tr> <td>A Crédito</td>
<td>
<select name="tipo" id="mylist">
<option value="0" selected>No</option>
<option value="1">Sí</option>
</select>
</td>
</tr>
<tr> <td>Vencimiento</td><td></td>
</tr>
<tr> <td align= "center"><input type='submit' name='articulo' value='Guardar Artículo' formaction='guardaArt.php'/></td><tr> <td align= "center"><input type='submit' name='articulos' value='Guardar Artículo a Crédito' formaction='ing_art.php'/></td> </tr>
</form>}
and the jQuery
<script>
$('#mylist').change(function(){
if( $(this).val() == '1'){
$('body').append('<input id="myInput" name="vence" type="date" />');
}
else{
$('#myInput').remove();
}
});
</script>
I have to disable a input in a td, based in the selection in the td select, the td target is the next one, but when I select a option it changes all the next td in the column. I´m new in this u_u
<table id="tabla">
<!-- Cabecera de la tabla -->
thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2" onchange="funcSelect()"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work
function funcSelect(){
var idSel = $("select").attr("id");
console.log(idSel);
var valSel = $("#"+idSel).val();
var id = "#"+idSel;
console.log(id);
console.log(valSel);
if(valSel === "4"){
$("td.especial").next("td").children().removeAttr("disabled");
}else{
$("td.especial").next("td").children().attr("disabled", "disabled");
}
}
Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....
HTML:
<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
Javascript/Jquery:
$(document).on('change', 'select', function(event) {
var val = $(this).val();
if (val == 4) {
$(this).parent().next('td').children().removeAttr('disabled');
}else{
$(this).parent().next('td').children().attr('disabled', 'disabled');
}
});
You should use $("#"+idSel).closest("td.especial") instead of $("td.especial") to find just the first ancestor matching td.especial selector.
Your current code is just matching everything existing in DOM matching given selector `td.especial.
I'm trying to get certain optional fields to be required via JavaScript validation, if any of these are empty then the form should not be sent off. I have tried numerous fixes but the code still does not work. What am I doing wrong? code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Contact us | Bhutan</title>
<link rel="stylesheet" href="style.css" />
<script>
function validate() {
//checks to see whether the required fields are filled.
//if comment AND checkboxes AND Newsletter are empty the form will not send.
if (document.commentFrm.Comment.value=="" && document.commentFrm.newsletter.checked==false && document.commentFrm.brochure1.checked==false && document.commentFrm.brochure2.checked==false && document.commentFrm.brochure3.checked==false) {
alert("Please enter required information");
return false;
}
return true;
}
</script>
</head>
<body>
<script>
// Script that asks a user for a number and subsequently compares it to a randomly generated number.
num=prompt("Enter a number between 1 and 10");
document.write(num + "<br />");
var x=(Math.floor((Math.random()*10)+1));
if (num==x) {
alert("You have won a place on the shuttle! Your cryogenic chamber is being prepared! ");
}
else
{
alert("Go home. I'm afraid that your number " + num +" is not today's lucky number and you will not be permitted to colonise new planets.");
}
</script>
<!-- Main page header -->
<header>
<h1>Religion and Culture in Bhutan</h1>
</header>
<!-- Page Navigation -->
<nav>
<ul>
<li> Home </li>
<li>Happiness</li>
<li>Face Of Rule</li>
<li>Health</li>
<li>Religion</li>
<li>Contact Us</li>
</ul>
</nav>
<article>
<!-- Form that takes users information and emails it for marketing purposes. -->
<form name="commentFrm" onSubmit="validate()" action="mailto:connor.bulmer#live.co.uk" enctype="text/plain" method="post">
<table>
<tr>
<td>Title: </td>
<td>
<select>
<option value="Mr">Mr</option>
<option value="Mrs" selected>Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</select>
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input type="text" name="firstname" size="20" maxlength="20" id="firstname" required></td>
<td>Comment:</td>
</tr>
<tr>
<td>Surname: </td>
<td><input type="text" name="surname" size="20" maxlength="20" id="surname" required></td>
<td rowspan="7"><textarea name="comment" rows="12" cols="50"></textarea></td>
<td>Brochure</td>
</tr>
<tr>
<td>Email: </td>
<td><input type="email" name="email" size="50" required></td>
<td> <input type="checkbox" name="brochure1" value="luxury" ></td>
<td>luxury</td>
</tr>
<tr>
<td>Phone: </td>
<td><input type="text" name="phone" size="50" required></td>
<td><input type="checkbox" name="brochure2" value="family" ></td>
<td>family</td>
</tr>
<tr>
<td>Address 1: </td>
<td><input type="text" name="address1" size="50" required></td>
<td><input type="checkbox" name="brochure3" value="18-30"></td>
<td>18-30</td>
</tr>
<tr>
<td>Address 2: </td>
<td><input type="text" name="address2" size="50"></td>
<td>Newsletter</td>
<td><input type="checkbox" name="newsletter" value="newsletter"></td>
</tr>
<tr>
<td>Town: </td>
<td><input type="text" name="town" size="50" required></td>
</tr>
<tr>
<td>Post code: </td>
<td><input type="text" name="postcode" size="50" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="submit" onClick="validate()" value="click here to submit" style="float: right;"></td>
</tr>
</table>
</form>
</article>
<!-- Footer leading to contact form -->
<footer>
<p>Developed for Bhutan, get in touch </p>
</footer>
</body>
</html>enter code here
change all && (and) to || (or) in the if;
change onsubmit="validate()" to onsubmit="return validate()"
change .Comment.value to .comment.value since that is the name and JS is case sensitive;
lastly remove onClick="validate()" from the button
More readable: remove all inline handlers, change name="commentFrm" to id="commentFrm" and have this in the head
window.onload=function() {
document.getElementById("commentFrm").onsubmit=function() {
//checks to see whether the required fields are filled.
//if comment OR checkboxes OR Newsletter are empty the form will not send.
if (this.comment.value=="" ||
this.newsletter.checked==false ||
this.brochure1.checked==false ||
this.brochure2.checked==false ||
this.brochure3.checked==false) {
alert("Please enter required information");
return false;
}
return true;
}
}
PS: The prompt script should use innerHTML of some container instead of document.write.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This script is supposed to allow the user to calculate their total bill for all items they would like to order.
When the user selects an item and quantity, the products and related fields should be added to the next available row in the list. Also, the Unit Price and Price field should be automatically calculated and filled in.
My question is, where do I start? I'm confused on which method to use for JavaScript.
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<title>The Irish Homeland Micro-Brewery</title>
<script type="text/javascript">
function calcList() // *** call "Add to List" button to function ***
{
var BeverageItem = document.getElementById("beverageSelection").value;
var QuantitySelection = document.getElementById("quantitySelection").value;
}
</script>
</head>
<body align="center">
<h1>Irish HomeLand Micro-Brewrey Cost Calculator</h1>
<p>Order Some Beverage(s) below</p>
<p>
Beverage:
<select id="beverageSelection">
<option value="24.99" id="shama">Shamrock Ale - $24.99/case</option>
<option value="27.99" id="lucky">Lucky Pillsner - $27.99/case</option>
<option value="27.99" id="irishw">Irish Wheat - $27.99/case</option>
<option value="32.99" id="irishm">Irish Malt - $32.99/case</option>
<option value="35.99" id="shamr">Shamrock Rye - $35.99/case</option>
</select>
Quantity:
<select id="quantitySelection">
<option value="1" id="opt1">1</option>
<option value="2" id="opt2">2</option>
<option value="3" id="opt3">3</option>
<option value="4" id="opt4">4</option>
</select>
<!--- use the button to add together --->
<input type="button" value="Add to List" id="addList" onClick="calcList()">
<input type="reset" id="resetBtn" value="Clear All">
</p>
<table align="center" border="1" style="width:50%">
<tr >
<td>Item Description</td>
<td>Unit Price</td>
<td>Qty</td>
<td>Price <sup>(unit*qty+ship)</sup></td>
</tr>
<tr>
<td><input type="text" id="txtItem1" readonly></td>
<td><input type="text" id="txtUnit1" readonly></td>
<td><input type="text" id="txtQty1" readonly></td>
<td><input type="text" id="txtPrice1" readonly></td>
</tr>
<tr>
<td><input type="text" id="txtItem2" readonly></td>
<td><input type="text" id="txtUnit2" readonly></td>
<td><input type="text" id="txtQty2" readonly></td>
<td><input type="text" id="txtPrice2" readonly></td>
</tr>
<tr>
<td><input type="text" id="txtItem3" readonly></td>
<td><input type="text" id="txtUnit3" readonly></td>
<td><input type="text" id="txtQty3" readonly></td>
<td><input type="text" id="txtPrice3" readonly></td>
</tr>
<tr>
<td><input type="text" id="txtItem4" readonly></td>
<td><input type="text" id="txtUnit4" readonly></td>
<td><input type="text" id="txtQty4" readonly></td>
<td><input type="text" id="txtPrice4" readonly></td>
</tr>
<tr>
<td><input type="text" id="txtItem5" readonly></td>
<td><input type="text" id="txtUnit5" readonly></td>
<td><input type="text" id="txtQty5" readonly></td>
<td><input type="text" id="txtPrice5" readonly></td>
</tr>
<tr>
<td><input type="text" id="txtItem6" readonly></td>
<td><input type="text" id="txtUnit6" readonly></td>
<td><input type="text" id="txtQty6" readonly></td>
<td><input type="text" id="txtPrice6" readonly></td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">Total</td>
<td><input type="text" id="total" readonly></td>
</tr>
</table>
</body>
</html>
The core of your problem is that you can't access values from select boxes like you do text inputs. You need to find the selectedIndex to get it's value.
So, change
document.getElementById("beverageSelection").value;
to
var fld = document.getElementById("beverageSelection");
var fldval = fld.options[fld.selectedIndex].value;
then you can do your math in the calc function to get your totals from the fldval variable
When the people fill my from, I want them to use an enter button like a tab button to fill all the form. So i have put javascript code into my form. But it doesn't work....
Can someone tell me why this code didn't work? I use internet explorer 9, Google chrome and Mozilla Firefox to try it, but doesn't work also...
<!--<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>-->
<script type="text/javascript">
function noenter() {
if(window.event && window.event.keyCode == 13);
myform.submit();
else
return true;}
</script>
</head>
<body>
<form name="form1" method="post" action="berjaya.php" onSubmit="return submitOK">
<table width="35%" border="1" align="center">
<tr>
<td colspan="3">Please fill the form bellow</td>
</tr>
<tr>
<td width="21%">first name</td>
<td width="2%">:</td>
<td width="77%"><label>
<input type="text" onkeypress="return noenter()" name="fname" id="fname">
</label></td>
</tr>
<tr>
<td>last name</td>
<td>:</td>
<td><label>
<input type="text" onkeypress="return noenter()" name="lname" id="lname">
</label></td>
</tr>
<tr>
<td>age</td>
<td>:</td>
<td><label>
<input type="text" onkeypress="return noenter()" name="age" id="age">
</label></td>
</tr>
<tr>
<td>date of birth</td>
<td>:</td>
<td><label>
<input type="text" onkeypress="return noenter()" name="dobirth" id="dobirth">
</label></td>
</tr>
<tr>
<td>home town</td>
<td>:</td>
<td><input type="text" onkeypress="return noenter()" name="htown" id="htown"></td>
</tr>
<tr>
<td colspan="3"><label>
<input type="submit" name="button" id="button" value="Submit" onClick="submitOK=true">
</label></td>
</tr>
</table>
</form>
</body>
</html>-->
If you'd actually bothered to READ that JavaScript you've copypastaed into your form, you'd reliaze that it actually TRIGGERS the form submission anytime the enter key is pressed on any of your input boxes.
If you want to disable the enter key, then you have to return false, not do form.submit().