|
JavaScript - Required Field In Html Form
Similar TutorialsHello all. I need to use javascript to validate 6 text inputs to make sure data is entered and they are not empty. However, there is a checkbox above this and if the checkbox is checked I need these areas to NOT validate as they become optional at that point. Here is what I have: Code: function validateCheckbox() {
if(document.forms["form1"].sales.checked) {
if(document.forms["form1"].input1.value.length < 1) { // x
return false;
}
else {
return true;
}
}
}
The above is if the box is checked to validate the field. I want it to do the opposite. How would you do the above with the If statement referring if the check box is NOT checked? And how could I add more fields to check then just one? I am new to javascript so any help or guidance is appreciated. i need help with the following problem : I installed a new extension on my website , that allows a customer to select a delivery date, by displaying a table where he chooses a date. The script works perfectly but has 1 big downside . I can't make it a *required field . I am running a flower shop so delivery date is mandatory. anyways, i want to know if i can set it to mandatory modifying this code.. Code: <?php
class MagentoTeam_Ddc_Block_Form extends Mage_Checkout_Block_Onepage_Abstract{
protected $delivery_date;
protected $customer_comment;
public function getDeliveryDate(){
if(is_null($this->delivery_date)){
$this->delivery_date = $this->getCheckout()->getQuote()->getDeliveryDate();
}
return $this->delivery_date;
}
public function getCustomerComment(){
if(is_null($this->customer_comment)){
$this->customer_comment = $this->getCheckout()->getQuote()->getCustomerComment();
}
return $this->customer_comment;
}
public function getConfigData($node){
return Mage::getStoreConfig(sprintf('magentoteam_ddc/%s', $node));
}
public function getFirstDay(){
return intval(Mage::getStoreConfig('general/locale/firstday'));
}
}
thank you in advance! Here is my validation script from dreamweaver i also have it in php for server side. But I trying to get a checkbox to make a text field required when you select it. Right now I have it so when you hit submit whether the text field is filled out or whether the checkbox is selected or not the error message comes up no matter what i do please help. the link to the page is http://www.mark-10.com/inquiries2 Code: function validateCheckbox() {
if(document.forms["form1"].sales.checked) {
if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
return false ;
}
else {
return true;
}
}
}
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
}
if(!validateCheckbox()) {
errors+="If checkbox checked, please include telephone number";
}
if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
//-->
Hi, I'm having a problem trying to get my html web form to work. I have a list of 8 radio button options for people to choose one option with the last option being other - and then I want if the user clicks other that the text field box next to it becomes a required field and the form will not submit until this text field is filled in. If the user selects one of the other radio button options then the text field is not compulsory. I am using a linked javascript validation file which checks that all fields on the form which I have stated as required - become required, but I am having problems getting this "Other" button and text field to work with it all and not have the submit continue without this text field being completed! any help would really be appreciated! Thanks in advance! I have an html page "PageA" which contains a "link" to another html page "PageB". The link is handled as a form submit because PageA sends some variables which it wants "processed". However, PageB is NOT a CGI script but simply another html page which happens to contain a form. This form handles the desired processing. I would appreciate some help getting some javascript in place, in PageA, in order to automatically fill in a form field in PageB with a variable supplied by PageA. The complications here a 1) PageB is not a CGI script and so sending variables via a query string does not work. (The variables never get read by PageB.) 2) PageB is maintained by another organisation so I cannot modify it. (Actually I could, as I have a local copy, but I would have to redo after every new release and so this is not acceptable.) It therefore needs to be treated as an independent page. 3) The variable is quite a lengthy one, it is extracted from a database and changes depending on how PageA was called, so I want to do this for repeated instances and cutting and pasting to a new page on each occasion is not attractive. 4) I would like to open PageB in a separate window or tab as I want to be able to reference both pages at once. (This is not essential to the key problem but may influence the solution. A solution which depended on the window being the same I would not regard as satisfactory.) The relationship between the documents is probably most accurately described as "PageB is a section of PageA". It is providing some additional information on aspects of what is in PageA. The output from submission of PageB can be quite lengthy. The actual form field in PageB I want to fill in is a textarea element and I know its name (call it name1) and also the name of the form (call it form1). But I don't think the field type should be important. I simply want to update its value (presumably after a page load?). Is this possible without editing PageB? I would appreciate some guidance if not a proven solution. Perhaps I have overlooked something but I can't find a working solution to this particular problem and my experiments to date don't work. Thanks Hi guys, I have a simple calculator on my website which has a few options selectable by radio buttons. When the user adds selections - the total price of their order is automatically calculated and displayed in a <div> for them to see. The client then can deselect options or add according to their budget. The code which deals with this is as follows (just sections of it but you get the point ....) In the <HEAD> Code: <script type = "text/javascript">
var allprices = [];
var index = 0;
function chkrads(frmName,rbGroupName) {
var chosen = "";
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
chosen = radios[i].value;
}
}
if (chosen == 0) {printprice = 0}
if (chosen == 1) {printprice = 99}
if (chosen == 2) {printprice = 150}
if (chosen == 3) {printprice = 250}
if (chosen == 21) {printprice = 200}
if (chosen == 22) {printprice = 300}
if (chosen == 30) {printprice = 50}
if (chosen == 41) {printprice = 50}
if (chosen == 42) {printprice = 70}
if (chosen == 43) {printprice = 90}
if (rbGroupName == "size") {index = 0}
if (rbGroupName == "colour") {index = 1}
if (rbGroupName == "frame") {index = 2}
if (rbGroupName == "glass") {index = 3}
if (rbGroupName == "hook") {index = 4}
if (rbGroupName == "delivery") {index = 5}
allprices[index] = printprice;
var totalprice = 0;
for (var i =0; i <allprices.length; i++) {
if (!isNaN(allprices[i])) {
totalprice = totalprice + allprices[i];
}
}
document.getElementById("result").style.display = "block";
document.getElementById("result").innerHTML = totalprice;
}
</script>
Then in the <BODY> Code: <form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;">
<input type = "radio" name = "size" value = "0" onclick = "chkrads('myform', 'size')"> <b>0</b>
<input type = "radio" name = "size" value = "1" onclick = "chkrads('myform', 'size')"> <b>1</b>
<input type = "radio" name = "size" value = "2" onclick = "chkrads('myform', 'size')"> <b>2</b>
<input type = "radio" name = "size" value = "3" onclick = "chkrads('myform', 'size')"> <b>3</b>
<br /><br /><br /><br />
<input type = "radio" name = "colour" value = "0" onclick = "chkrads('myform', 'colour')"><b>No</b>
<input type = "radio" name = "colour" value = "21" onclick = "chkrads('myform', 'colour')"><b>black</b>
<input type = "radio" name = "colour" value = "22" onclick = "chkrads('myform', 'colour')"><b>Multi Colour</b>
<br /><br /><br /><br />
<input type = "radio" name = "frame" value = "0" onclick = "chkrads('myform', 'logo')"><b>No</b>
<input type = "radio" name = "frame" value = "30" onclick = "chkrads('myform', 'logo')"><b>Yes</b>
<br /><br /><br /><br />
<input type = "radio" name = "glass" value = "0" onclick = "chkrads('myform', 'glass')"><b>No</b>
<input type = "radio" name = "glass" value = "51" onclick = "chkrads('myform', 'glass')"><b>Yes</b>
<br /><br /><br /><br />
<input type = "radio" name = "hook" value = "0" onclick = "chkrads('myform', 'hook')"><b>0</b>
<input type = "radio" name = "hook" value = "41" onclick = "chkrads('myform', 'hook')"><b>1</b>
<input type = "radio" name = "hook" value = "42" onclick = "chkrads('myform', 'hook')"><b>2</b>
<input type = "radio" name = "hook" value = "43" onclick = "chkrads('myform', 'hook')"><b>3</b>
<br /><br /><br /><br />
<input type = "radio" name = "delivery" value = "0" onclick = "chkrads('myform', 'delivery')"><b>No</b>
<input type = "radio" name = "delivery" value = "61" onclick = "chkrads('myform', 'delivery')"><b>Yes</b>
</form>
This all calculates the cost and then supplies the answer into this code: Code: <div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span> </div> This all works exactly as I want - my question is this .... I have added an HTML contact form at the bottom of the page which goes off to a Form2Email PHP script. (All working fine) I really want to autofill one of the sections of this form "QUOTED PRICE" with the value calculated by my earlier product calculator. The form looks like so: Code: <form id="ContactForm" method="post" action="FormToEmail.php" class="input2"> <label>Name: <input name="name" type="text" id="name" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label>QUOTED PRICE: <input name="QUOTED PRICE" type="text" id="QUOTED PRICE" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label> <input type="submit" class="submit" name="submit" id="submit" value="submit"/> </label> </form> Does anyone know how to achieve this?! It would be a massive help! Code: <script type="text/javascript">
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){
alert("Please Select Sex"); return false;}
var total=""
for(var i=0; i < document.form1.scripts.length; i++){
if(document.form1.scripts[i].checked)
total +=document.form1.scripts[i].value + "\n"
}
if(total=="")
alert("select scripts") else
alert (total)
return false;
} </script>
<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>
<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr>
<tr><td align=center bgcolor='#f1f1f1'><font face='verdana' size='2'><b>Scripts You know</b><input type=checkbox name=scripts value='JavaScript'>JavaScript <input type=checkbox name=scripts value='PHP'>PHP <input type=checkbox name=scripts value='HTML'>HTML </td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
In this code a checkbox is accessed as "document.form1.scripts[i].checked" If we see the tree view of this document, it is "table/form1/tr/td/scripts[i].checked" SO are we not required to add table elements in the path to the checkbox ? I guess its not required. But why ? Because cell, row and table are the parent elements in HTML tree, then why are they not required ? Hi All, I have a HTML table with combobox option in one of the column.when I select a value in dropdown the background color changes to red or green based on the selction.My Code looks like : Code: function OnHTMLTable1_ClickLink ( ) {
var irows = document.getElementById("HTMLTable1").getElementsByTagName('tr');
var iRowCount = irows.length;
for(i=0; i<=iRowCount; i++)
{
if(document.getElementById("list"+i).selectedIndex == 1)
{
document.getElementById("list"+i).options[1].style.backgroundColor = "green";
}
if(document.getElementById("list"+i).selectedIndex == 2)
{
document.getElementById("list"+i).options[2].style.backgroundColor = "Red";
}
}
}
When I select a value it is throwing me "Object Required error".Can anyone tell me where this code is misbehaving? Thanks, Anil Thanks for reading this thread. I'm looking for some information on a way to update HTML remotely that would be search engine friendly. It would do a replace similar to the google website optimizer scripts. Example... Page.html <head> <script>www.remotesite.com/updatekeywords.js</script> <script>replacekeywords</script> [would insert keywords here in a search engine friendly way] </noscript> </head> <body> <script>replacebody</script> [would insert body here in a search engine friendly way] </noscript> I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: ....
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
function validate(form)
{
var form = document.getElementById("reg");
var e = document.getElementById("error");
e.style.background = "red";
for(var i = 0; i < form.elements.length; i++)
{
var el = form.elements[i];
if(el.type == "text" || el.type == "password")
{
if(el.value == "")
{
e.innerHTML = "Please fill in all fields!";
el.style.border = "1px solid red";
el.focus();
return false;
} else {
el.style.border = "1px solid green";
return false;
}
}
}
var un = form.username;
un.value = un.value.replace(/^\s+|\s+$/g,"");
if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
{
e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
un.focus();
return false;
}
var pw = form.password;
pw.value = pw.value.replace(/^\s+|\s+$/g,"");
if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
{
e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
pw.focus();
return false;
}
e.innerHTML = "You filled in all the fields, well done!";
e.style.background = "green";
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="content">
<div class="padding">
<h2>Registration</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
<div id="error"></div>
<div><label for="username">Username</label></div>
<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
<div><label for="c_password">Confirm Password</label></div>
<div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
<div><label for="email">Email address</label></div>
<div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
<div><label for="c_email">Confirm Email address</label></div>
<div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
<div><label for="firstname">First name</label></div>
<div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
<div><label for="surname">Surname</label></div>
<div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
<div><label for="gender">Gender</label></div>
<div>
<div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="f" />Female</div>
</div>
<div><input type="submit" value="Register" name="submit" /></div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 My Cool Website</p>
</div>
</div>
</body>
</html>
How can I add a form field value to a url. I tried the below but it no work. Code: href="index2.php?q=4&id=+document.theForm.lists.value+&picklist" function checkValidFormInput() { if (document.getElementsByName('customerName').value != '') { document.getElementById('customerNameImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerNameImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } if (document.getElementsByName('customerEmail').length > 0) { document.getElementById('customerEmailImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerEmailImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } } Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript">
function textCounter1(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = 137;
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limiet: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin Hi there, I have a html form, and I need it so that when a user clicks a button, it adds a field into the form. I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table. How would I go about doing this? I've tried searching for the past two hours, but no luck. Many thanks, I appreciate it, Jason I need to learn how to clear form fields when a user clicks on them. Here is the site in question: http://www.yourvancouvermortgagebroker.ca/apply They used to work, but then I changed the field value and now it doesn't work on some of the fields (whichever ones I changed). Here is a link to the .js file: http://www.yourvancouvermortgagebroker.ca/js/apply.js I have a form which has various fields which are arrays (so the name of a field may be myField[]). The reason for this is that the form has add buttons to add another field or fields for the purpose of entering another email address, etc., to send invitations and do other things. The problem that I am running into is how to access the individual fields in an array of fields inside javascript to do form validation. So if I have an email address field name emailAddress[], and using the add button, the user of my site adds 3 other copies of the emailAddress[] field, I want to then do form validation onSubmit to ensure those email address are valid using standard procedures. However, inside the javascript code, how do I access the individual fields that make up emailAddress[]? I just cannot find anywhere online the proper way to get at these values. If anyone can help me, I would greatly appreciate it. Happy Holidays Is there a way to give an input or textarea field the focus and set the focus to begin right at the end of the current text in the field?
I have been staring at this code for too long and need some help. I want to pass a value received through the Url to another screen with new data by a form using the method="get". I have tried several different ways, my latest attempt was to use a hidden field hoping that would add to the url string but it isn't working. Thank you in advance Here is my code, its not pretty Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Field Location</title>
<link rel="stylesheet"
href="css/INTERPRETING_TR_CONTROL_ELECTRICAL_READINGS.css"
type="text/css" media="screen" />
</head>
<body>
<div>
<form id="form1" name="form1" method="get" action="./nameplateInformation.html">
<h3>Where is this field located?</h3>
<select name="fieldValue" id="fieldValue"
title="Where is this field located">
<option value="field1">Inlet Field</option>
<option value="field2">Second Field</option>
<option value="field3">Third Field</option>
<option value="field4 ">Outlet Field</option>
</select>
<script type="text/javascript">
(function(){ // Import GET Vars :D
document.getVars = [];
var urlHalves = String(document.location).split('?');
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
document.getVars[urlVarPair[0]] = urlVarPair[1];
}
}
}
})();
prceptType = document.getVars.preceptType;
document.write('<input type="hidden" name="preceptType" value='+preceptType+' />');
</script>
<input type="submit" value="Submit" />
<input type="button" name="backButton" value="Back"
onclick="parent.location = './welcome.html'" /> <input type="button"
name="homeButton" value="Home"
onclick="parent.location = '../index.html'" /></form>
</div>
</body>
</html>
Hi guys, This has been asked before, and i've seen many of the previous posts. And tried for hours. But finally i've broken and have to ask for help. What am I doing wrong here? Can someone please explain? Code: var u=document.forms["lead"]["name"].value;
var v=document.forms["lead"]["city"].value;
var x=document.forms["lead"]["country"].value;
var y=document.forms["lead"]["mobile"].value;
var z=document.forms["lead"]["email"].value;
if (u==null || u=="")
{
alert("Please enter your first name.");
return false;
}
if (v==null || v=="")
{
alert("Please enter your city.");
return false;
}
if (isNaN(lead.y.value))
{
alert("bloody work!");
return false;
}
if (x=="Argentina" && y.length < 11)
{
alert("Please enter a valid Argentinian phone number.");
return false;
}
Thanks in advance. |
|||||||