|
JavaScript - How To Add Form Fields Dynamically.
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> Similar TutorialsI have a form with 3 fields that will allow a user to search a database of clients by either name, email, or client id number. However, I would like the user to only be able to put information in one field. It can be done be either deleting the other two fields when the user inputs information into a different field, or by disabling the other two fields when the user enters information in one (and also frees up all fields if the user ends up deleting what they entered). I've searched and found several helps that were close to what I need but not exactly. I was wondering if anyone would be able to help. Below is a start of what I had. Basically, it will disable the fields when I mouse out of them but won't re-enable them when I mouse back in. As you can see, I tried various combinations of events. (My code below also doesnt null out the other fields when the user opts to use a different field than the one they first began to enter info in). Any help is much appreciated and if this needs more explanation I will try to clarify better. Thanks Code: <html>
<head>
<script type="text/javascript">
function makeDisable($ID){
var x=document.getElementById($ID)
x.disabled=true
}
function makeEnable(){
var x=document.getElementById($ID)
x.disabled=false
}
</script>
</head>
<body>
<form name='selectclient' action='client_edit.php' method='get'>
<table>
<tr>
<td align='right'>Client ID:</td>
<td><input id='id' type='text' size='20' name='client_id' onmouseout="makeDisable('id')" onmouseover="makeEnable('id')" value='' /></td>
</tr>
<tr>
<td align='right'>Client Email:</td>
<td><input id='email' type='text' size='20' name='client_email' onblur="makeDisable('email')" onfocus="makeEnable('email')" value='' /></td>
</tr>
<tr>
<td align='right'>Client Name:</td>
<td>
<select id='name' name='client_name' onblur="makeDisable('name')" onmouseover="makeEnable('id')">
<option value=''>-- Select --</option>
<option value='1' >Ted</option>
<option value='2' >David</option>
<option value='3' >Zack</option>
</select>
</td>
</tr>
<tr>
<td align='left'><input value='Edit' type='submit' name='submit' /></td>
</tr>
</table>
</form>
</body>
</html>
I'd like to create a basic form where 3 text input fields are named with the following names referrerId, referrerId2 & referrerId3. My goal is once the text fields within the form are populated with the users data, then once the user clicks submit, a new browser window opens up (in parent window preferably), navigating to the following url exactly as shown. Highlighted in red is the dynamic information I'd like appended. Vacation Packages &referrerId=FIRSTNAME&referrerId2=LASTNAME&referrerId3=AGENTNUMBER Any help would be greatly appreciated. Thanks! I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution? Code: <script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(area);
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
//Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
//If the maximum number of elements have been reached, exit the function.
// If the given limit is lower than 0, infinite number of fields can be created.
if(count > limit && limit > 0) return;
//Older Method
field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
}
//-->
</script>
<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>
<input type="button" value="Add" onclick="addField('steps_area','',15);"/>
Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs. So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one. Here is my code.. Code: <img src="images/add.png" width="15" height="15" align="right" >
<div class="open">
<table width="200" border="0">
<tr>
<td class="propertyCol">Input: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
<table width="200" border="0">
<tr>
<td class="propertyCol">Output: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
</div
I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name. I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code Code: <html>
<head>
<title>form</title>
<content="text/html"; />
<script type="text/javascript">
<!--
window.onload = function () {
if (self.init)
init();
}
var counter = 0;
var counter1 = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
document.getElementById('moreFields1').onclick = moreFields1;
moreFields();
moreFields1();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readcomp').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writecomp');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function moreFields1() {
counter1++;
var newFields = document.getElementById('readsubgr').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter1;
}
var insertHere = document.getElementById('writesubgr');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>
<body>
<div id="readcomp" style="display: none">
Comp name<input type=text name="comp" value="" size="2"/>
Concentration<input type=text name="comp_qty" value="" size="2"/>
<input type="button" value="Remove comp"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/>
<span id="writesubgr"></span>
<input type="button" id="moreFields1" value="add subgroup" /><br/><br/>
</div>
<div id="readsubgr" style="display: none">
Subgroup Name<input type=text name="subgroup" value="" size="2"/>
Quantity <input type=text name="subgroup_qty" value="" size="2"/>
<input type="button" value="Remove subgroup"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form action="cgi_bin\show_input.pl" method="post">
<span id="writecomp"></span>
<input type="button" id="moreFields" value="add comp" /><br/><br/>
<input value="Run Program" type="submit"> <input value="Reset all fields" type="reset">
</form>
</body></html>
any help would be appreciated. thanks I have here a code that will automatically generate two text fields (Title & Price) when "Add another article" is pressed. I got this from the web, but I want instead of using a text field, I want it to create a drop down menu based on a mysql table, then update the price automatically (also based on the mysql table) on the other text field once a selection has been made on the drop down menu. Code: <link rel="stylesheet" type="text/css" media="screen" />
<style type="text/css"></style>
<script type="text/javascript">
var elCount = 2;
function add() {
var parent = document.getElementById('parent');
var article = document.createElement('DIV');
article.id = 'article_' + elCount;
article.name = 'article_' + elCount; // NEW LINE
var article_title_label = document.createElement('LABEL');
article_title_label.appendChild(document.createTextNode('Title ' + elCount + ': '));
var article_title_text = document.createElement('INPUT');
article_title_text.id = 'article_' + elCount + '_title';
article_title_text.name = 'article_' + elCount + '_title'; // NEW LINE
var article_textarea_label = document.createElement('LABEL');
article_textarea_label.appendChild(document.createTextNode('Price ' + elCount + ': '));
var article_textarea = document.createElement('INPUT');
article_textarea.id = 'article_' + elCount + '_price';
article_textarea.name = 'article_' + elCount + '_price'; // NEW LINE
article.appendChild(article_title_label);
article.appendChild(article_title_text);
article.appendChild(article_textarea_label);
article.appendChild(article_textarea);
parent.appendChild(article);
elCount++;
}
</script>
<body>
<div id="parent">
<div id="article_1">
<label for="article_1_title">Title 1: </label><input type="text" name="article_1_title" id="article_1_title" />
<label for="article_1_price">Price: </label><input type="text" name="article_1_price" id="article_1_price" />
</div>
</div>
any ideas? Thanks Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_validateForm() { //v4.0
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=MM_findObj(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 (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script
> Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="54%" class="subHeader">Full Name* </td>
<td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
</tr>
<tr>
<td class="subHeader">Company Name </td>
<td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
</tr>
<tr>
<td class="subHeader">Address</td>
<td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
</tr>
<tr>
<td class="subHeader">Postcode</td>
<td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
</tr>
<tr>
<td class="subHeader">Telephone Number* </td>
<td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
</tr>
<tr>
<td class="subHeader">Mobile Number </td>
<td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
</tr>
<tr>
<td height="25" class="subHeader">Email Address* </td>
<td class="subHeader"><input name="Email" type="text" id="Email" /></td>
</tr>
<tr>
<td height="30" class="subHeader">Status*</td>
<td class="subHeader"><select name="StatusClass" id="StatusClass">
<option selected="selected">Please Choose</option>
<option>Architect</option>
<option>Interior Designer</option>
<option>Private Client</option>
<option>Student</option>
<option>Trade Enquiry</option>
</select> </td>
</tr>
<tr>
<td height="23" class="subHeader">Project*</td>
<td class="subHeader"><select name="Project" size="1" id="Project">
<option selected="selected">Please Choose</option>
<option>Planning Stages</option>
<option>New Build</option>
<option>Refurbishment</option>
<option>Barn Conversion</option>
<option>No project - information only</option>
</select> </td>
</tr>
<tr>
<td height="37" class="subHeader">How did you hear about us?*</td>
<td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
<option selected="selected">Please Choose</option>
<option>Web Search</option>
<option>Grand Designs</option>
<option>Living Etc</option>
<option>Home Building & Renovation</option>
<option>Architect</option>
<option>Friend/Family</option>
<option>Magazine/Editorial</option>
<option>Newspaper Article</option>
<option>Trade Show/Exhibition</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td height="24" class="subHeader">Brochure Request </td>
<td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
</tr>
<tr>
<td class="subHeader">Message</td>
<td class="subHeader"><span class="style4">
<textarea name="Message" id="Message"></textarea>
</span></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" class="subHeader"><em>* Required fields</em></td>
</tr>
</table>
</form>
I am no javascript expert, very much a beginner. I am trying to incorporate some into a web-based form. The problem is the button I created to add extra fields does not work, and I can't find exactly where the problem is. I'm in need of some help from a javascript guru. Help me enjoy my Friday afternoon by solving this! The javascript is mostly borrowed and slightly altered, the "additem" I wrote myself so that is probably where the problem lies! Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function showAsset(id,str)
{
if (str=="")
{
document.getElementById("assetinfo"+id).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("assetinfo"+id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getasset.php?q="+str,true);
xmlhttp.send();
}
var noFields = "5";
function additem()
{
var fieldrow = document.createElement('tr');
var fieldcolumn1 = document.createElement('td');
var fieldinput = document.createElement('input');
fieldinput.name = "asset";
fieldinput.onChange = "showAsset("+noFields+",this.value)";
var fieldcolumn2 = document.createElement('td');
fieldcolumn2.id = "assetinfo"+noFields;
fieldcolumn1.appendChild(fieldinput);
var fieldcolumns = fieldcolumn1 + fieldcolumn2;
fieldrow.appendChild(fieldcolumns);
var addbefore = document.getElementById('fieldend');
document.body.insertBefore(fieldrow, addbefore);
noFields = noFields++;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input name="asset" onChange="showAsset(1,this.value)"></td>
<td id="assetinfo1"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(2,this.value)"></td>
<td id="assetinfo2"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(3,this.value)"></td>
<td id="assetinfo3"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(4,this.value)"></td>
<td id="assetinfo4"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(5,this.value)"></td>
<td id="assetinfo5"></td>
</tr>
<tr id="fieldend">
<td><input id="addfield" type="button" value="add item" onClick="addfield()"></td>
</tr>
</table>
</form>
</body>
</html>
Here is the associated getasset.php: Code: <?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', 'root');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("assettracking", $con);
$sql="SELECT * FROM assets WHERE assetID = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<b>".$row['make'] ." ".$row['model'] ." - ".$row['serialnumber']."</b> | Status: ".$row['statusID']." | Comments: ".$row['comments'];
}
mysql_close($con);
?>
Can someone see what is wrong with this code: Code: frm=document.createElement('form')
frm.action="/cgi-sys/formmail.pl"
frm.method="POST"
fld=document.createElement('textarea')
fld.appendChild(document.createTextNode(simpleCart.items))
frm.appendChild(fld)
It is supposed to dynamically create a textarea and fill it up with the return of simpleCart.items() I'm new here and this is my first post, I hope I can find help here. How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated. I have try to google for solution, but without success. I code in PHP, but i need it to integrate in my code. Thanks for your help. 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 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! Hello everyone, i am having a few problems with my form and i was hoping someone can help me understand what i am doing wrong. I'm new to java and scripting for forms. Usually i use Simfatic Forms to build my forms but this form requires special coding and work. I'm build a 5 table form with a dynamically add and remove function that will allow the user to add more Rows to the form. What i would like the add function to do is allow my users to pick from a Dropdown menu how many rows they would like to add to the form from 1,5,10,15,20,25 rows. I have gotten the form to allow the add function of one row only but i cant get the add function to allow the select from list. when the row repeats it wont repeat the datepicker to a workable map or the number system from 5+ in table ren5 i have the page up on my site for testing purposes so you can see what is going on. Another issue im having is when i submit the form to my formtools it takes all the input info and puts it in one line in the datebase. What im trying to do is have each table submit to its own row in the datebase. What im looking for is help understanding what i need to do to make this work. I have been reading a lot of tutorials and have been searching a lot of help sites but everything i have read and tried so far will not work for what im trying to do. I really need help getting this to work in the next couple of days. Here is the link to the page on my server so you can see what is going on.http://www.poweronlydispatch.com/FastPostLoad.html Any help would be very helpful. Thank you all in-advance for your help and understanding off my problem. Here is the first part of the code 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" />
<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<script src="development-bundle/jquery-1.6.2.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="development-bundle/demos/demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker1" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker3" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker4" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker5" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<form action="http://www.poweronlydispatch.com/transporters/process.php" method="post" id="FastPostLoad" name="FastPostLoad">
<input type="hidden" name="form_tools_initialize_form" value="1" />
<input type="hidden" name="form_tools_form_id" value="36" />
<table width="100%" cellspacing="0" id="info">
<tr>
<th width="20"> </th>
<th width="14"> </th>
<th width="110">Pickup Date</th>
<th width="140">Dispatch Number</th>
<th width="120">Trailer Type</th>
<th width="80">Pickup City</th>
<th width="70">Pickup State</th>
<th width="60">Pickup Zip </th>
<th width="80">Delivery City</th>
<th width="80">Delivery State</th>
<th width="60">Delivery Zip</th>
<th width="80">Pay Ammount</th>
<th width="60">Weight</th>
</tr>
</table>
<table id="ren" width="100%" cellspacing="0">
<tr>
<td width="20"><INPUT type="checkbox" name="chk"/></td>
<td width="16"> 1 </td>
<td width="180"><input type="text" name="datepicker" id="datepicker" size="20"></td>
<td width="123"><input name="DispatchNumber" type="text" id="DispatchNumber" size="20"></td>
<td width="148"><input name="TrailerType" type="text" id="TrailerType" size="25"></td>
<td width="91"><input name="PickupCity" type="text" id="PickupCity" size="15"></td>
<td width="89"><select name="PickupState" id="PickupState" size="1">
<option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select></td>
<td width="90"><input name="PickupZip" type="text" id="PickupZip" size="10"></td>
<td width="86"><input name="DeliveryCity" type="text" id="DeliveryCity" size="15"></td>
<td width="89"><select name="DeliveryState" id="DeliveryState" size="1">
<option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select></td>
<td width="90"><input name="DeliveryZip" type="text" id="DeliveryZip" size="10"></td>
<td width="88"><input name="PayAmount" type="text" id="PayAmount" size="10"></td>
<td width="90"><input name="Weight" type="text" id="Weight" size="10"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
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 Greetings experts, this is my first time here. So, please take easy on me. I have makup with 2 sections. The first section contains 5 form fields and are required. The second second has 2 form fields and are optional. Users can only choose from one section or the other but not both. The js script below ensures that if users select from section 2, section one will not challenge for validation and works a treat. The challenge I have now is to ensure that if users choose from section 1, the 2 form fields in section are automatically disabled so they won't be attempted to choose from it. Similarly, if users select from section 2, all form fields in section one are automatically disabled so they won't be tempted to choose from that section. Is this possible? If not possible, is it possible to raise an error? For instance, a user selects from section 1 and attempts to select from any of the 2 form fields in section 2, a message that says, "You can only select from one section but from both. Similarly if a user selects from section 2 first, same thing happens. Thanks very much for your assistance. function validate() { if(document.getElementById("<%=txtrequest.ClientID%>").value != "" && document.getElementById("<%=txtreceived.ClientID %>").value != "") { if (document.getElementById("<%=txtName.ClientID%>").value == "") { alert("Please enter name"); document.getElementById("<%=txtName.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtCity.ClientID %>").value == "") { alert("Please enter city"); document.getElementById("<%=txtCity.ClientID %>").focus(); return false; } if (document.getElementById("<%=txtState.ClientID%>").value == "") { alert("Please enter state"); document.getElementById("<%=txtState.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtZip.ClientID%>").value == "") { alert("Please enter zip"); document.getElementById("<%=txtZip.ClientID%>").focus(); return false; } if (checkradio() == false) { alert("Please enter contacts"); document.getElementById("<%=txtContacts.ClientID%>").focus(); return false; } } return true; } 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>
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;
}
}
Can someone please help me with my JavaScript, my code below works for BillingAddress2 but it doesn't for ShippingAddress2 (when you click off the ShippingAddress2 form field it alerts undefined) these form fields are in the same form JS Code: $("input").blur(function () {
if($(this).val() == '') {
if($(this).attr("id") != 'BillingAddress2' && $(this).attr("id") != 'ShippingAddress2') {
alert($(this).attr("item"));
}
}
});
html parts of the form Code: Billing Address Line 2:<br /><INPUT type="text" id="BillingAddress2" name="BillingAddress2" title="text" class="notrequired" value="<%=Session("BillingAddress2")%>" maxlength="30" tabindex="4">
Shipping Address 2:<br /><INPUT type="text" id="ShippingAddress2" name="ShippingAddress2" title="" class="notrequired" value="<%=Session("ShippingAddress2")%>" maxlength="30" tabindex="12">
|
|||||||