|
JavaScript - Javascript Prefill Form Using Wildcard Fields?
Ok, this is going to be a bit of an off the wall question and I'm not sure if it can even be done, but what I'm trying to do is prefill a form in an external iframe. The text fields in form that is in the external iframe all have a name of "U2FsdGV + a random generated string". There are 5 text fields all following the same pattern, I would like for it to post the value 1 in the first wildcard case it detects, then value 2 in the 2nd, etc...
Here is my code so far: PHP Code: <script> function load() { var btn = document.getElementById('btnTest'); btn.onclick = function(){ var ifrm = document.getElementById('myiframe'); ifrm.contentWindow.document.forms['postingForm'].U2FsdGV*.value = 'Hello world!'; }; } window.onload = load; </script> Similar TutorialsHello, A quick summary to inform you on what I'm trying to accomplish and then the question. If you want to skip to the question first, I have it in red letters lower down. Just figured I'd answer the "why are you doing it this way" question first. I am writing a tool in JavaScript in which a user selects various options via checkboxes and then a pre-engineered scenario image for a product matching those selections is displayed. Here is the basic workflow of the code: 1. The code runs through the checkboxes and based on whether the boxes are checked or not, adds a value of "1" or "0" to a string. There are some dashes added into the string to visually divide some categories of options. Here is an example of the resulting string: 0-0011100-101100 2. A variable named scenarioID holds the value of the resulting string. A switch statement is run which assigns a name to the scenario based on the scenario ID. Here is an example: PHP Code: switch(scenarioID){ case "0-0011100-101100": var scenarioName="Scenario 1"; break; } 3. The scenarioName variable is then used to pull up an image with the corresponding name. For example, if the scenarioName variable has a value of "Scenario 1" then an image named "Scenario 1" is displayed. --------------------------------------------- So here is where I am running into an issue: I have some scenario names that multiple scenario ID's match because they apply whether a specific checkbox is selected or not. Currently, I am still able to apply the correct name to the scenario by simply having multiple switch statements apply to the same scenario name. For example: PHP Code: switch(scenarioID){ case "0-0011100-101100": var scenarioName="Scenario 1"; break; case "0-1110011-101101": case "1-1110011-101101": var scenarioName="Scenario 2"; break; } However, I have some scenarios in which up to 3 options may apply whether or not they are checked. This means that I have to have 8 different switch cases (scenario ID's) for a single scenario name. Is there a way for me to wildcard the switch cases so that I can specify which items don't matter for a scenario? Something like the following example? PHP Code: switch(scenarioID){ case "0-0011100-101100": var scenarioName="Scenario 1"; break; case "*-1110011-101101": var scenarioName="Scenario 2"; break; } Hey, I'm working on an auto-suggest for our search function, but I am running into a wall (possibly due to lack of sleep). Basically, the user enters a search term, which searches our mySQL db, and if the search matches with a part number or description, it will output those results. My jam is that I would like the output to highlight the matching input, which I've gotten to work 95% correct. Code: for (var i=0;i<arr.length;i++) // Loop through results to indicate highlighting
{
// Test condition to see if input matches part number
if (this.sInp.toLowerCase()==arr[i].value.toLowerCase()) // Tests to see if input matches part number and highlights input to match
{
var val = arr[i].value;
var st = val.toLowerCase().indexOf( this.sInp.toLowerCase());
var output = val.substring(0,st) + "<em>" + val.substring(st, st+this.sInp.length) + "</em>" + val.substring(st+this.sInp.length);
var span = _b.DOM.cE("span", {}, output, true);
if (arr[i].value != "")
{
var br = _b.DOM.cE("br", {}); // Inserts line break
span.appendChild(br);
var small = _b.DOM.cE("small", {}, arr[i].info); // Produces second line (info or value)
span.appendChild(small);
}
var a = _b.DOM.cE("a", { href:"#" });
var tl = _b.DOM.cE("span", {className:"tl"}, " ");
var tr = _b.DOM.cE("span", {className:"tr"}, " ");
a.appendChild(tl);
a.appendChild(tr);
a.appendChild(span);
a.name = i+1;
// Modified to submit on click
a.onclick = function () { pointer.setHighlightedValue();
var formName = (pointer.oP.whereSubmit);
if (formName != null) {
var form = document.getElementById(formName);
form.submit();
}
return false; };
// End submit modification
a.onmouseover = function () { pointer.setHighlight(this.name); };
var li = _b.DOM.cE( "li", {}, a );
ul.appendChild( li );
}
else // Tests if input matches any part of description and highlights input to match
{
var val = arr[i].info;
var st = val.toLowerCase().indexOf( this.sInp.toLowerCase() );
var output = val.substring(0,st) + "<em>" + val.substring(st, st+this.sInp.length) + "</em>" + val.substring(st+this.sInp.length);
var span = _b.DOM.cE("span", {}, output, true);
if (arr[i].info != "")
{
var br = _b.DOM.cE("br", {});
span.appendChild(br);
var small = _b.DOM.cE("small", {}, arr[i].value);
span.appendChild(small);
}
var a = _b.DOM.cE("a", { href:"#" });
var tl = _b.DOM.cE("span", {className:"tl"}, " ");
var tr = _b.DOM.cE("span", {className:"tr"}, " ");
a.appendChild(tl);
a.appendChild(tr);
a.appendChild(span);
a.name = i+1;
// Modified to submit on click
a.onclick = function () { pointer.setHighlightedValue();
var formName = (pointer.oP.whereSubmit);
if (formName != null) {
var form = document.getElementById(formName);
form.submit();
}
return false; };
// End submit modification
a.onmouseover = function () { pointer.setHighlight(this.name); };
var li = _b.DOM.cE( "li", {}, a );
ul.appendChild( li );
}
}
// End Input Highlight
My issue seems to be my conditional statement. Basically, the user's input must match the part number ("value") exactly for it to output the results is a specific format. I would like it to be able to have something similar to mySQL's wildcard ("%") it will search the entire part number ("value") and not just the beginning to find a match. Sorry if this doesn't make much sense, I will attempt to clarify if needed, but again running on 0 sleep. Thanks for any help. I'm trying to understand how forms, data, php, javascript all work together. So 1) I hardcoded some html form fields with values using php using "echo", then 2) I dynamically created some more html form fields with values using javascript using "createElement" and appending to the html form element. When I click on the submit form, the php created form fields still show on the webpage, but the javascript dynamically created form fields disappear. Can anyone shed some light for me? Why are the javascript created form fields disappearing when I click on submit and not the PHP created form fields? Thank you! Code: <form method="post" id="commentform" action="<?php echo $PHP_SELF?>"> Afternoon All, I have managed to secure some JavaScript code from another site that allows me to access values from within my Google Analytics cookie: <!-- begin Referer Check --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>"); </script> <script type='text/javascript'> var pageTracker = _gat._getTracker("UA-1-1"); pageTracker._trackPageview(); // // This is a function that I "borrowed" from the urchin.js file. // It parses a string and returns a value. I used it to get // data from the __utmz cookie // function _uGC(l,n,s) { if (!l || l=="" || !n || n=="" || !s || s=="") return "-"; var i,i2,i3,c="-"; i=l.indexOf(n); i3=n.indexOf("=")+1; if (i > -1) { i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; } c=l.substring((i+i3),i2); } return c; } // // Get the __utmz cookie value. This is the cookies that // stores all campaign information. // var z = _uGC(document.cookie, '__utmz=', ';'); // // The cookie has a number of name-value pairs. // Each identifies an aspect of the campaign. // // utmcsr = campaign source // utmcmd = campaign medium // utmctr = campaign term (keyword) // utmcct = campaign content // utmccn = campaign name // utmgclid = unique identifier used when AdWords auto tagging is enabled // // This is very basic code. It separates the campaign-tracking cookie // and populates a variable with each piece of campaign info. // var source = _uGC(z, 'utmcsr=', '|'); var medium = _uGC(z, 'utmcmd=', '|'); var term = _uGC(z, 'utmctr=', '|'); var content = _uGC(z, 'utmcct=', '|'); var campaign = _uGC(z, 'utmccn=', '|'); var gclid = _uGC(z, 'utmgclid=', '|'); // // The gclid is ONLY present when auto tagging has been enabled. // All other variables, except the term variable, will be '(not set)'. // Because the gclid is only present for Google AdWords we can // populate some other variables that would normally // be left blank. // if (gclid !="-") { source = 'google'; medium = 'cpc'; } // Data from the custom segmentation cookie can also be passed // back to your server via a hidden form field var csegment = _uGC(document.cookie, '__utmv=', ';'); if (csegment != '-') { var csegmentex = /[1-9]*?\.(.*)/; csegment = csegment.match(csegmentex); csegment = csegment[1]; } else { csegment = '(not set)'; } // // One more bonus piece of information. // We're going to extract the number of visits that the visitor // has generated. It's also stored in a cookie, the __utma cookis // var a = _uGC(document.cookie, '__utma=', ';'); var aParts = a.split("."); var nVisits = aParts[5]; /* function populateHiddenFields(f) { f.source.value = source; f.medium.value = medium; f.term.value = term; f.content.value = content; f.campaign.value = campaign; f.segment.value = csegment; f.numVisits.value = nVisits; alert('source='+f.source.value); alert('medium='+f.medium.value); alert('term='+f.term.value); alert('content='+f.content.value); alert('campaign='+f.campaign.value); alert('custom segment='+f.segment.value); alert('number of visits='+f.numVisits.value); return false; } */ document.forms["cforms2"].elements["cf2_field_1"].value = source; </script> The key outputs from this code are the vars: source medium term content campaign csegment nVisits My question is, how can I get the source var into the hidden field in the form in my footer http://www.yogaholidays.co? I have tried to pass just the source var from within the <script> tags. document.forms["cforms2"].elements["cf2_field_1"].value = source; I have commented out part of original code that I did not think I needed. Any help that can be offered I would be grateful, ultimately I would like to be able to pass all these values to hidden fields. Thanks Paul Brown Hi All, Simple newbie question here - I want to initialize an array with "myString.length" elements, and I want every element to be prepopulated with "*" instead of blank. Is there any way of doing this? Code:
var myString = '123456';
var trialVar = new Array[myString.length]
document.write('TEST ' + '<BR><BR>' + trialVar);
(I want every element of trialVar to be "*", I cant just manually add them as myString.length will vary) Any help would be mega appreciated - thank you I am working on a page where the user will select a location from a dynamically generated dropdown list. I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form. For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields. php array creation: Code: if ($row_locations)
{
while ($row_locations = mysql_fetch_assoc($locations))
{
$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
}
}
javascript function - this should create the array and send variables to text fields. Code: function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}
Where is this breaking? Thanks in advance. 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);
?>
How would i use a wildcard in String.match()? For example, I would like to see if a variable contains www.*.com, where the * can be replaced with anything. How could i go about doing that? Hi ya all, is it possible for Javascript to recognise 100 different labeled divs as one unit, so that I can unhiliten them onmouseout(on mouse over they are hilited). I realise that * is an operator and it can't be used as a wildcard, so is there some kind of substitue that can be used. I am trying to do something like this: Code: function goaway(id, status) {
document.getElementById(id).style.visibility = status;
goaway.onmouseout( fo-test * , 'hidden');
}
the divs Id's are fo-test 1 thru to fo-test 100 most appriciate any help 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 I have used a Javascript to prepopulate text fields and checkbox's etc. However I can't make it populate a text area. Would anyone be kind enough to help me with the code for it? Any help would really be appreciated: (source code below) Code: // preset.js Copyright 2009 by Richard L. Trethewey - All Rights Reserved
// Permission is granted to use this code as long as this copyright notice
// is left intact. For more information, see http://www.rainbodesign.com/pub/
// First, get the query string contents from the URL used by lopping off the "?"
var query = location.search.substr(1, location.search.length-1);
function findForm(theForm) {
var formCount = document.forms.length;
if (document.getElementById) { formElement = document.getElementById(theForm);
} else {
for (i=0; i<formCount; i++) {
if (document.forms[i].name == theForm) { formElement = document.forms[i]; }
} // endFor
} // endif document.getElementById
return formElement;
} // end findForm
function setOption(theOption,choice) {
max = theOption.length;
for (i = 0; i < max; i++) {
if (theOption.options[i].value == choice) { theOption.options.selectedIndex = i; }
} // end for i
} // end setOption
function setRadio(theOption,optionName) {
max = theOption.length;
for (i = 0; i < max; i++) {
// alert(theOption[i].name + ' ' + theOption[i].checked);
if (theOption[i].value == optionName) { theOption[i].checked = true; }
} // end for i
} // end setRadio
function fixQString(theStr) {
pattern = '\\+';
flags = 'g';
reg_exp = new RegExp(pattern, flags);
theStr = theStr.replace(reg_exp, ' ');
theStr = unescape(theStr);
return theStr
} // end fixQStr
function populate(formName) {
if (query) { // Was there a query string?
var params = query.split("&"); // Yes! Split them up
var theForm = findForm(formName); // Locate the form with the correct name/ID
if (theForm != null) { // Did we find the form?
for (q=0; q<params.length; q++) {
xy = params[q].split("="); // Split the command into name/value pair
paramName = xy[0];
newValue = fixQString(xy[1]);
if (theForm.elements[paramName]) { // does named element exist?
// alert(theForm.elements[paramName].type + ' ' + paramName);
switch(theForm.elements[paramName].type) {
case 'text':
theForm.elements[paramName].value = newValue;
break;
case 'hidden':
theForm.elements[paramName].value = newValue;
break;
case 'select-one':
setOption(theForm.elements[paramName], newValue);
break;
case undefined: // a kludge to handle radio buttons
setRadio(theForm.elements[paramName], newValue);
break;
case 'checkbox':
theForm.elements[paramName].checked = true;
break;
} // end switch
} // endif theForm.elements[paramName]
} // end for q
} // endif {theForm)
} // endif (query)
} // end populate()
Hello, I have a survey with hundred of input boxes. I want to make a script that will validate all fields not empty and maybe jump to the empty box. I made the validation with php but i'm not so good at javascript (if is possible to validate by input not by input name). Thank in advance. 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 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
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 |
|||||||