JavaScript - Removing Case Sensitive When Comparing Form Fields

Hi all, I'm new to here and JS but I have question for you! So I have this form with inputs that are considered arrays in my PHP code:

Code:

<input type="checkbox" name="1" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="2" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="3" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="4" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="5" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="6" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="7" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="8" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="9" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="10" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="11" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="12" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="13" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="14" /> <input name="ii[]" type="text"> <br /> 
<input type="checkbox" name="15" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="16" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="17" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="18" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="19" /> <input name="i[]" type="text"> <br /> 
<input type="checkbox" name="20" /> <input name="i[]" type="text"> <br />

I don't want to keep adding in new spots every time a user want to add a new field. I would like them to be able to press a button that will add another one of those fields and so on. I'm not sure how this can be achieved but that's why I am turning to you! Thanks!

Hi, i have this code that generate 10 rows with form fields:

Code:

<form>
<?php for($i=1;$i<=10;$i++) {?>
<div id="rowz-rep">
<div class="row1"><?=$i?></div>
<div class="row2a"><input name="title[]" type="text" class="fieldSubmit"/></div>
<div class="row3a"><input name="url[]" type="text" class="fieldSubmit"/></div>
<div class="row4a"><select name="type[]" class="dropSubmit"><? foreach($allowed_types as $at) { echo '<option value="'.$at.'">'.$at.'</option>'; }?></select></div>
</div>
<? }?>
</form>

I need that onclick with JS add 10 more rows so i get something like

Code:

<?php for($i=1;$i<=20;$i++) {?>

Hi guys, I created a form that contains about 10 form fields and would like to add the option to dynamically add more sets of those 10 fields if a user clicks a word or a button but I need help. I'm a beginner when it comes to JavaScript and would appreciate any help. This is what I need to generate dynamically. Can someone give me an idea of how to get started please?

Code:

<div id="dynamicInput">
<ul>
<li>1</li>
<li><input name='textfield1' type='text' size='10' /></li>
<li><select name='commodity' width='100' style='width: 100px'>
<option>Option 1</option>
</select></li>
<li><input name='textfield2' type='text' size='5' /></li>
<li><input name='textfield3' type='text' size='10' /></li>
<li><input name='textfield4' type='text' size='10' /></li>
<li><input name='textfield5' type='text' size='10' /></li>
<li><input name='textfield6' type='text' size='5' /></li>
<li><input name='textfield7' type='text' size='5' /></li>
<li><input name='textfield8' type='text' size='5' /></li>
</ul>
</div>

Here's what I have so far in my validation part.

However, I need help as to how to validate the following fields when the user clicks the submit button.
-Radio Button
*title (4 options)
*member (3 options)
*vegetarian (2 options)

-Drop down lists
*regstartdate (3 options)
*regenddate (3 options)
*confdinner (2 options)
*paymethod (3 options)


-UK Post Code (text box with maxlength=8)


My current code shows 1 popup with all the error messages. Here's what I have so far:

Redacted

Hello everyone! I hope you can help me. I am writing a submit form that has to have an indication if a form is information is missing. I have followed along the steps with my text and I can't seem to figure out what I am doing wrong. Can anyone help me?

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD.HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/htm14/loose.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>Kudler Fine Foods Contact Page</title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">



<!---Kami Demnyan

21 December 2009-->



<script type="text/javascript">

/*<![CDATA[*/

<!--This code ensures that the zip code and telephone numbers are actual numerical digits, not letters-->

function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert ("Please enter a numerical value");
return false;
}
}

<!--This code ensures that all of the fields contain text, its not functioning, I'm using page 263 in the text as my

guide-->

function submitForm() {
if (document.forms[0].name.value == ""
|| document.forms[0].address.value == ""
|| document.forms[0].city.value == ""
|| document.forms[0].state.value == ""
|| document.forms[0].zip.value == ""
|| document.forms[0].phone.value == ""
|| document.forms[0].email.value == "") {
window.alert("Please enter your missing information");
return false;
}
else
return true;
}


/*]]>*/

</script>

</head>


<body>


<h1> KUDLER FINE FOODS </h1>

<h2> JOIN OUR MAILING LIST</h2>

<!--This is where the user will input all of their information to join the mailing list-->

<form action="completeform.html" method="get" onsubmit="return onSubnit();"

enctype="application/x-www-form-urlencoded">


<p>Name<br />

<input type="text" name="name" size="50" /></p>



<p>Address<br />

<input type="text" name="address" size="50" /></p>



<p>City, State, Zip <br />

<input type="text" name="city" size="30" />

<input type="text" name="state" size="3" />

<input type="text" name="zip" size="10"; onchange="return checkForNumber(this.value)"; /></p>



<p>Telephone<br />

<input type="text" name="phone" size="25" onchange="return checkForNumber(this.value)"; /></p>



<p>Email Address<br />

<input type="text" name="email" size="50" /></p>

<!--This is where the submit and reset buttons are located-->


<p><input type="submit" value="Submit Form" />
<p><input type="reset" value="Reset Form" />


</form>

</body>

</html>

ALSO: My instructor does not want me to use the onchange tag, is there a suitable replacement for that?

Any help would be greatly appreciated, thank you.

Kami

I'm trying to make a site where when you click the submit button it puts an asterisk next to all of the incomplete fields while also displaying an alert box.

I'm having no luck with it so far since I don't know how to get a script to print something to a specific part of a page.

Here is what the whole thing looks like so far. I tried using page-jumping but that didn't work:
Code:

<html>
<head>
<title>Sortomatic 5000 </title>

<script type="text/javascript">
function Sort(form){
	var fruits = [form.One.value, form.Two.value, form.Three.value];
	if (form.One.value!=""&&form.Two.value!=""&&form.Three.value!=""){
		document.writeln(fruits.sort());
	}
	if(form.One.value=""){
		alert("Please enter at least one character into all fields.");
		parent.location='#first';
		document.writeln("*");
	}
	if(form.Two.value=""){
		alert("Please enter at least one character into all fields.");
		
	}
	else{
	alert("Please enter at least one character into all fields.");
	
	}

}
</script>
</head>
<body>
<form name="Sortform" > 
<input type="text" name="One"><A NAME="first"></A><br>
<input type="text" name="Two"><br><A NAME="second"></A>
<input type="text" name="Three"><br><A NAME="third"></A>
<input type="submit" onClick="Sort(this.form)">
</form>
</body>

</html>

I have a drop down selection where it shows and hides form inputs depending on selection. When the page loads it shows the drop down selections with no form inputs. After user selects drop down it shows the form fields. It works great but I want it to show the same form fields after the user hits the submit button which submits the page to itself. It currenlty goes back to the default selection list and doesnt show any of the form fields. Basically it hides all the form fields after the user hits submit button. How do I make it keep the last shown form fields after the user hits the submit button?

test3.html looks like this:
Code:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
</script>
</head>

<body>
<form name="tester" action="test3.html" method="get">
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">

<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

</body>
</html>

I have 2 types of addresses

1. Permanent address > Postal code, Street, City, State, Country
2. Current address > Postal code, Street, City, State, Country

and a check box 'Copy from Permanent address' with Current address

when i checked that check box then all values from 'Permanent address' will be copy to 'Current address'

Please send me the code

Hi all!

I have a form which has some checkboxes and the name of every checkbox is email_(a counting number) . Lets say I have no access to the counting number because it is changed every time the page reloads. How can i create a script to return how many email_ checkboxes is in the form?

Code:

<script>
// here i want a script to count how many checkboxes is in the form. //
 
</script>
<form>
 
<script>
counter = 2 // I dont have access to this number because it is changing every time I reload the page.
 
for(i=0;i<counter;i++) {
test.innerHTML += "<input type='checkbox' value='' name='email_"+i+"'>";
}
</script>
<div id="test"></div>
</form>

please help!

Several posts here are almost what I need, but I can't put it all together.... thank you for your help, this is for a pet rescue charity!

When selecting "mini" option, my form should should only allow typing in 6 out of 10 text input fields (the first 3 on the front, and the first 3 on the back too if its selected). Other sizes would allow typing in all 10. The NAME must be the same due to the shoppingcart used, but ID can be different. Also, if mini the maxlength of each should be 14, other sizes each maxlength is different.

I will try to put the relevant code below, but one entire form is he
http://wooftags.com/bone-iframe.html

Code:

<select name="product1[]">
  <option value="mini">mini</option>
  <option value="small">small</option>
  <option value="medium">medium</option>
  <option value="large">large</option>
    </SELECT>

        <input type="text" name="product1[]2" size="14" maxlength="14" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="18" maxlength="18" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="25" maxlength="25" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />


      <INPUT TYPE="HIDDEN" NAME="price2" VALUE="1">
          <input id="back1" type="text" name="product2[]2" size=14 maxlength=14 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back2" type="text" name="product2[]2" size=18 maxlength=18 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back3" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back4" type="text" name="product2[]2" size=25 maxlength=25 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back5" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>

I have two slightly different forms on the same page, but I want the values in form1 to auto populate the same form fields in form2. 1 field is a text field, the rest are drop down menus. How would I accomplish this? Link to tutorial would be much appreciated. Thanks

So, I'm trying to make a function that marks a specific form field if it triggers an error when the form submits. Doesn't seem to work, though. The function to mark the form field resides in a .js file separate from the function that validates the form. Not sure if that matters, but thought I'd post it here just to be sure. Here's the code for the field marking script:

Code:

function markFormField(fieldInError)
{

   // start by changing its background color
   
   fieldInError.style.backgroundColor = "#FF99FF";
   
   // check the parent tag to make sure it's a label
   
   if (fieldInError.parentNode.tagName == "LABEL")
   {
   
      // if it is, change the font color
      
      fieldInError.parentNode.style.color = "#FF0000";
      
   }
   
}

Here's the code that validates the form:
Code:

function checkNewsInput()
{

   // see if the DOM can be used
   
   if (!document.getElementById)
      return;
      
   // otherwise, set up the variables
   
   var newsCat = document.getElementById("category");
   var newsTitle = document.getElementById("title");
   var newsBody = document.getElementById("body");
   var newsDesc = document.getElementById("desc");
   var newsTags = document.getElementById("tags");
   var newsInfo = document.getElementById("info");
   var newsPwd = document.getElementById("pwd");

   /* NOTE: cursorToEnd is a function I got from a helpful member of this
       forum. Its code is not listed in this post. */
   
   if (newsCat.value == "")
   {
   
      window.alert("Please select a category.");
      
      return false;
      
      markFormField(newsCat);
      
   }
   
   else if (newsTitle.value.length < 5 || newsTitle.value == "")
   {
   
      window.alert("The title must be at least 5 characters in length.");
      
      return false;
      
      markFormField(newsTitle);
      
      cursorToEnd(newsTitle);
      
   }
   
   else if (newsBody.value.length < 10 || newsBody.value == "")
   {
   
      window.alert("The body of the post must be at least 10 characters in length.");
      
      return false;
      
      markFormField(newsBody);
      
      cursorToEnd(newsBody);
      
   }
   
   else if (newsDesc.value.length < 10 || newsDesc.value == "")
   {
   
      window.alert("The description must be at least 10 characters in length.");
      
      return false;
      
      markFormField(newsDesc);
      
      cursorToEnd(newsDesc);
      
   }
   
   else if (newsTags.value.length < 5 || newsTags.value == "")
   {
   
      window.alert("The tags field must be at least 5 characters in length.");
      
      return false;
      
      markFormField(newsTags);
      
      cursorToEnd(newsTags);
      
   }
   
   else if (newsInfo.value.length < 10 || newsInfo.value == "")
   {
   
      window.alert("The info must be at least 10 characters in length.");
      
      return false;
      
      markFormField(newsInfo);
      
      cursorToEnd(newsInfo);
      
   }
   
   else if (newsPwd.value == "")
   {
   
      window.alert("Please enter your password.");
      
      return false;
      
      markFormField(newsPwd);
      
      cursorToEnd(newsPwd);
      
   }
   
   else
   {
   
      // all is good, so let the form submit
     
      return true;
     
   }
   
}

This is what I'm trying to do.

CONDITIONS:
If a person selects a Friday Class but not a Saturday Class the Total Cost Field will automatically enter $99.

If a person selects a Saturday Class but not a Friday Class the Total Cost Field will automatically enter $99 as well.

If a person selects both a Friday & Saturday Class the Total Cost field will automatically be $159.

I found the following code and so far only have it changing when a Friday class is entered. I have no idea where to go from here. Please help.


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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

</head>
<body>

  <div>
    <p><span class="style1">Friday Class:</span> 
        <select id="fridayClass" >
          <option>  </option>
                <option value="Class1"> Class 1 </option>
                <option value="Class2"> Class 2</option>
                <option value="Class3"> Class 3 </option>
          </select>
    </p>
    <p>  <span class="style1">Saturday Class:</span> 
        <select id="saturdayClass" >
          <option>  </option>
                <option value="Class1"> Class 1 </option>
                <option value="Class2"> Class 2</option>
                <option value="Class3"> Class 3 </option>
          </select>
    </p>
</div>
  <div><span class="style1">Total Cost:</span>
    <input type="text" id="totalCost"/></div>

<script>
window.onload = function () {
  var friday = document.getElementById('fridayClass'),
      saturday = document.getElementById('saturdayClass');

   friday.onchange = function () {
    totalCost.value = '$99.00';
  };
};
</script>