|
JavaScript - How To Enable Dynamic Form Fields If Js Turned Off.
I have a form that only shows the submit (update) buttons if the value select field beside it is changed. But what is someone has JS disabled, how can I enable them?
Code: <select title="3553" name="3553" onchange="JavaScript:document.cart.add3553.disabled=false;"> 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>
Am integrating a Barclays epdq shopping cart into an existing website, part of the regulations with this system is that you can only submit from one 'allowed url'. To enable access from multiple url's I need to create a 'jump page'. This needs to be a simple page that takes any variables posted to it and re-posts them (onload) onto the epdq shopping cart. The problem is I am unable to populate the form dynamically and submit onload. I have tested and it all works fine if hardcoded. Is it possible to submit a dynamically generated form using javascript? PHP Code: foreach ($_POST as $name => $value){ $newVars .= '<INPUT value="' . $value . '" name="' . $name .'" type="hidden" />'; } Code: <html> <head></head> <body onLoad="document.epdqformer.submit();"> <FORM name="epdqformer" id="epdqformer" action="https://secure2.epdq.co.uk/cgi-bin/CcxBarclaysEpdq.e" method="POST"> PHP Code: From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. Dear all Gurus, I'm stucked with below logic. Wanna get your advice to find out where I went wrong.Please help.... Below is my Coding done. A dynamic HTML table is generated text boxes in table Rows(Dissable mode) with EDIT & DELETE buttons. When user clicks on Edit button, particular row(Text Box) should be enable to edit the values generated. But Unfortunately in my coding, always the fist row only gets enabled. <script type="text/javascript"> function m(id){ document.getElementById('Record_id').disabled=false; document.getElementById('file_number').disabled=false; return false; } </script> PHP Code: while ($rw = mysql_fetch_array($query1)) {$k = $rw['Record_id'];echo '<tr>';echo'<form name = "t_data">';echo '<td>'.'<input type="text" id="Record_id" name="Record_id"value="'.$rw['Record_id'].'" disabled="true" size ="5"/>'.'</td>';echo '<td>'.'<input type="text" id="file_number" name="file_number" value="'.$rw['file_number'].'" disabled="true" size = "9"/>'.'</td>';echo '</tr>'; echo '<tr>';echo' <td>';echo'<form action="dlt_grid.php" method = "GET">';echo'<input type="submit" value="Delete">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</form> ';echo'</td>'; echo' <td>';echo'<input type="submit" id="'.$k.'" value="Edit" onclick = "return m(this.id)">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</td>';echo '</tr>';echo'</form>'; I am using a script that duplicates a fieldset and an onBlur event that updates a sub total when you enter a value into 3 fields in the set but I am having one glitch that I can not figure out and would appreciate any insight you can provide. Here is the trouble: The duplication of the fieldset works great. I have another script which is creating a sum ("sum") of the fields named "unitPrice" in the original fieldset. When I duplicate the fieldset that has the new "unitPrice" fields they do not get calculated into that sum. I am sure the "unitPrice" fields are being renamed in the new fieldset but what name would I use and how do I write it into the calculation so that the sub total ("sum") is updated with all of the "unitPrice" fields? Thanks for your help. Code: <!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
// Suffix + Counter
var suffix = ':';
var counter = 1;
// Clone nearest parent fieldset
function cloneMe(a) {
// Increment counter
counter++;
// Find nearest parent fieldset
var original = a.parentNode;
while (original.nodeName.toLowerCase() != 'fieldset') {
original = original.parentNode;
}
var duplicate = original.cloneNode(true);
// Label - For and ID
var newLabel = duplicate.getElementsByTagName('label');
for (var i = 0; i < newLabel.length; i++) {
var labelFor = newLabel[i].htmlFor
if (labelFor) {
oldFor = labelFor.indexOf(suffix) == -1 ? labelFor : labelFor.substring(0, labelFor.indexOf(suffix));
newLabel[i].htmlFor = oldFor + suffix + counter;
}
var labelId = newLabel[i].id
if (labelId) {
oldId = labelId.indexOf(suffix) == -1 ? labelId : labelId.substring(0, labelId.indexOf(suffix));
newLabel[i].id = oldId + suffix + counter;
}
}
// Input - Name + ID
var newInput = duplicate.getElementsByTagName('input');
for (var i = 0; i < newInput.length; i++) {
var inputName = newInput[i].name
if (inputName) {
oldName = inputName.indexOf(suffix) == -1 ? inputName : inputName.substring(0, inputName.indexOf(suffix));
newInput[i].name = oldName + suffix + counter;
}
var inputId = newInput[i].id
if (inputId) {
oldId = inputId.indexOf(suffix) == -1 ? inputId : inputId.substring(0, inputId.indexOf(suffix));
newInput[i].id = oldId + suffix + counter;
}
}
// Select - Name + ID
var newSelect = duplicate.getElementsByTagName('select');
for (var i = 0; i < newSelect.length; i++) {
var selectName = newSelect[i].name
if (selectName) {
oldName = selectName.indexOf(suffix) == -1 ? selectName : selectName.substring(0, selectName.indexOf(suffix));
newSelect[i].name = oldName + suffix + counter;
}
var selectId = newSelect[i].id
if (selectId) {
oldId = selectId.indexOf(suffix) == -1 ? selectId : selectId.substring(0, selectId.indexOf(suffix));
newSelect[i].id = oldId + suffix + counter;
}
}
// Textarea - Name + ID
var newTextarea = duplicate.getElementsByTagName('textarea');
for (var i = 0; i < newTextarea.length; i++) {
var textareaName = newTextarea[i].name
if (textareaName) {
oldName = textareaName.indexOf(suffix) == -1 ? textareaName : textareaName.substring(0, textareaName.indexOf(suffix));
newTextarea[i].name = oldName + suffix + counter;
}
var textareaId = newTextarea[i].id
if (textareaId) {
oldId = textareaId.indexOf(suffix) == -1 ? textareaId : textareaId.substring(0, textareaId.indexOf(suffix));
newTextarea[i].id = oldId + suffix + counter;
}
}
duplicate.className = 'duplicate';
insertAfter(duplicate, original);
}
// Delete nearest parent fieldset
function deleteMe(a) {
var duplicate = a.parentNode;
while (duplicate.nodeName.toLowerCase() != 'fieldset') {
duplicate = duplicate.parentNode;
}
duplicate.parentNode.removeChild(duplicate);
}
</script>
<script>
function myFunction(){
var the_fields = document.getElementsByName("unitPrice");
var the_sum = 0;
for (var i=0; i<the_fields.length; i++){
if (the_fields[i].value != "" && !isNaN(the_fields[i].value)) {
the_sum += Number(the_fields[i].value);
}
}
document.repairform.sum.value = (the_sum.toFixed(2));
}
</script>
<SCRIPT LANGUAGE="JavaScript">
function CalculateTotal() {
firstnumber = document.repairform.sum.value/100;
secondnumber = document.repairform.tax.value;
total = (firstnumber * secondnumber -0) + (document.repairform.sum.value -0);
document.repairform.grandTotal.value = total.toFixed(2)
;
}
</SCRIPT>
<script>
function checkDecimal(obj, objStr){
var objNumber;
if(isNaN(objStr) && objStr!=''){
alert('Value entered is not numeric');
objNumber = '0.00';
}
else if(objStr==''){
objNumber = '0.00';
}
else if(objStr.indexOf('.')!=-1){
if(((objStr.length) - (objStr.indexOf('.')))>3){
objStr = objStr.substr(0,((objStr.indexOf('.'))+3));
}
if(objStr.indexOf('.')==0){
objStr = '0' + objStr;
}
var sLen = objStr.length;
var TChar = objStr.substr(sLen-3,3);
if(TChar.indexOf('.')==0){
objNumber = objStr;
}
else if(TChar.indexOf('.')==1){
objNumber = objStr + '0';
}
else if(TChar.indexOf('.')==2){
objNumber = objStr + '00';
}
}
else{
objNumber = objStr + '.00';
}
obj.value = objNumber;
}
</script>
</head>
<body>
<form id="item_details" name="repairform" method="post" action="#" onSubmit="return false;">
<h2>Contact Information</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td>
<label for="name">
Name:
</label>
</td>
<td>
<input type="text" id="name" name="name" />
</td>
<td>
<label for="form-phone">
Phone:
</label>
</td>
<td>
<input id="form-phone" type="tel" required> </td>
</tr>
<tr>
<td>
<label for="form-date">
Date:
</label>
</td>
<td>
<input id="form-date" type="date"required>
</td>
<td>
<label for="form-datewanted">
Date Wanted
</label>
</td>
<td>
<input id="form-datewanted" type="date" required>
</td>
</tr>
<tr>
<td>
<label for="form-address">
Address
</label>
</td>
<td>
<input id="form-address" type="text">
</td>
</tr>
</table>
</fieldset>
<h2>Vehicle Information</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td>
<label for="form-ymc">
Year-Model-Color</label>
</td>
<td>
<input id="form-ymc" type="text" required>
</td>
<td>
<label for="form-make">MAKE</label>
</td>
<td>
<input id="form-make" type="text">
</td>
</tr>
<tr>
<td><label for="form-bodytype">BODY TYPE</label>
</td>
<td>
<input id="form-bodytype" type="text">
</td>
<td>
<label for="form-unitno">UNIT NO.</label>
</td>
<td>
<input id="form-unitno" type="text">
</td>
</tr>
<tr>
<td>
<label for="form-serialno">SERIAL NO.</label>
</td>
<td>
<input id="form-serialno" type="text">
</td>
<td>
<label for="form-motorno">MOTOR NO.</label>
</td>
<td>
<input id="form-motorno" type="text">
</td>
</tr>
<tr>
<td>
<label for="form-mileage">MILEAGE</label>
</td>
<td>
<input id="form-mileage" type="text">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</fieldset>
<h2>Repair Estimate</h2>
<fieldset>
<span class="tab">
<a href="#" onClick="cloneMe(this); return false;" class="cloneMe" title="Add">+</a>
<a href="#" onClick="deleteMe(this); return false;" class="deleteMe" title="Delete">x</a>
</span>
<table cellspacing="10">
<tr>
<td>
<label for="repair_replace">Repair/Replace</label>
</td>
<td class="mainText">
<input class="radio" name="repair_replace" type="radio" value="Repair" />Repair<br>
<input class="radio" name="repair_replace" type="radio" value="Replace" />Replace
</td>
<td>
<label for="form-description">Description:
</label>
</td>
<td >
<textarea id="form-description" name="form-description" cols="5" rows="5" ></textarea>
</td>
</tr>
<tr>
<td>
<label>PARTS AND MATERIALS </label>
</td>
<td><input name="unitPrice" value="" id="parts" onBlur="myFunction(); checkDecimal(this,this.value)" onFocus="this.focus();" class="dollar" />
</td>
<td>
<label>LABOR </label>
</td>
<td ><input name="unitPrice" value="" id="labor" type="text" onblur="myFunction(); checkDecimal(this,this.value)" class="dollar"/>
</td>
</tr>
<tr>
<td>
<label>REFINISHING </label>
</td>
<td><input name="unitPrice" id="refinishing" type="text" onBlur="myFunction(); checkDecimal(this,this.value)" class="dollar"/>
</td>
<td>
</td>
<td >
</td>
</tr>
</table>
</fieldset>
<h2>Price Estimate</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td><label>SUB TOTAL </label>
</td>
<td><input type="text" name="sum" class="dollar" readonly/>
</td>
<td>
<label>Tax %</label>
</td>
<td>
<input class="tax" type="text" name="tax" onBlur="CalculateTotal()" />
</td>
</tr>
<tr>
<td>
<label>GRAND TOTAL </label>
</td>
<td>
<input type="text" name="grandTotal" class="dollar" readonly/>
</td>
<td>
</td>
<td >
<p>
<input type="submit" value="Send Estimate" onClick="myFunction()">
</p>
</td>
</tr>
</table>
</fieldset>
<p>
<input type="submit" value="Submit" class="button" /><input type="reset" value="Reset" class="button" />
</p>
</form>
</body>
</html>
i have a script which i found on the internet. i modify that script according to my needs. what is in that script is there are three form fields with two buttons. one button is "Give me more fields" clicking on this button will give you more fields. and second button is submit so the data goes to server side and will be added to db. the problem is when i click give me more fields it gives me three more fields which is right but when i fill all these fields and click submit button it adds to the db but the data in the first three fields adds in the one row and the other three fields data adds in separate row which is not fine for me. so how can i do this so all the data will be added to only one row. here is js code Code: var counter = 0;
//Start a counter. Yes, at 0
function add_phone() {
counter++;
// I find it easier to start the incrementing of the counter here.
var newFields = document.getElementById('addQualification').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;
// This will change the 'name' field by adding an auto incrementing number at the end. This is important.
}
var insertHere = document.getElementById('addQualification');
// Inside the getElementById brackets is the name of the div class you will use.
insertHere.parentNode.insertBefore(newFields,insertHere);
}
here is my form Code: <form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="phone">
Degree:
<input type="text" name="degree_0" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_0" value="" /><br>
Institute:
<input type="text" name="institute_0" value="" /><br>
</div>
<div id="addQualification" style="display: none;">
Degree:
<input type="text" name="degree_" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_" value="" /><br>
Institute:
<input type="text" name="institute_" value="" /><br>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />
</fieldset>
</form>
here is my php Code: <?php
if(isset($_POST['submit']))
//This checks to make sure submit was clicked
{
echo "You clicked submit!<br>";
echo "Here is your data<br>";
echo "<br>";
if ($_POST['cgpa_0'])
//This checks that the proper field has data
{
$continue = FALSE;
$i = 0;
while ($continue == FALSE)
{
if (isset($_POST['degree_'.$i]))
//This looks for an entry after 0 and increments
{
echo $_POST['degree_'.$i] . " = " . $_POST['cgpa_'.$i] . "<br>";
//Echoing the data
$degree1 = $_POST['degree_'.$i];
$cgpa1 = $_POST['cgpa_'.$i];
$institute1 = $_POST['institute_'.$i];
$db = mysql_connect("localhost");
mysql_select_db("test", $db);
$query = "INSERT INTO cv
(
degree1,
cgpa1,
institute1
)
VALUES
(
'$degree1',
'$cgpa1',
'$institute1'
)";
$result = mysql_query($query);
//The four lines above is the example on how the data would be put into a MySQL database. It's not used here
}
else
{
$continue = TRUE;
}
$i++;
}
}
}
?>
hi i am newbie to js please help me like a newbie thanks. i want to make a form. the form will have three text fields and with two buttons. what i want with this form is when the user enters the first three fields and if he wants to add more then he will click on add more button and on the same page three more fields will appear below the first three fields. the user will then enter these three fields then if he wants to add more then he will click on add more button. so three more fields will appear below the first six fields. user will enter these fields. he will be allowed to enter upto eight or less than eight times. once he finishes with this then he will click the second button to insert this data into db. hi guys kindly assist in this i have the code below used to generate additional dynamic fields how can i save data entered in mysql??? <HTML> <HEAD> <TITLE>New Task</TITLE> <link rel="stylesheet" href="style1.css" type="text/css"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <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 = rowCount + 1; 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> </HEAD> <BODY> <br> <br> <h2>INPUT NEW TASK</h2> <table border="1" width="100%"> <tr> <td> <fieldset> <legend></legend> <table border="0" width="100%"> <tr> <td>User:</td> <td><input type="text" size="20" name=""disabled></td> <td>Start Date:</td> <td><input type="text" size="20"></td> </tr> <tr> <td>Client name:</td> <td><select name=""></select></td> <td>Process</td> <td><select name=""></select></td> <td>Day?</td> <td><input type="text" size="5"></td> </tr> </table> </fieldset> <fieldset> <legend>Tasks</legend> <table border="0" width="100%"> <th width="5">select</th><th width="5">No</th><th width="150">Task</th><th width="400">Description</th><th width="100">Start Time</th> <th width="100">End Time</th><th width="100">Worked hrs</th><th width="90">Action</th> <tr> </table> <TABLE id="dataTable" width="100%" border="1"> <TD><INPUT type="checkbox" name="chk"/></TD> <td width="5"><input type="text" size="5"name=""disabled></td> <td width="150"><select name=""></select></td> <td><textarea rows="2" cols="30"></textarea></td> <td><input type="text" size="10"name=""></td> <td><input type="text" size="10"name=""enabled></td> <td><input type="text" size="10"name=""disabled></td> <td><input type="button"type="button" value="+" onclick="addRow('dataTable')"></td> <td><input type="button"type="button" value="-" onclick="deleteRow('dataTable')"></td> </tr> </table> </fieldset> <table border="0" width="100%"> <tr> <td width="122"><input type="button" value="SAVE"></td> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </BODY> </HTML> 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 Hi to all, I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear. How do I get all this data to PHP? Code: <script type="text/javascript">
var counter = 3;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "text";
newText.value = "DD/MM/AAAA";
newText.name = counter++;
var newText1 = document.createElement('input');
newText1.type = "text";
newText1.value = "DD/MM/AAAA";
newText1.name = counter++;
var newText2 = document.createElement('input');
newText2.type = "text";
newText2.value = "0";
newText2.name = counter++;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
newDiv.appendChild(newText2);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
</script>
<table style="margin-left:200px" border="0">
<tr><!-- Row 1 -->
<td width="140"><b>Start Date</b></td><!-- Col 1 -->
<td width="142"><b>End Date</b></td><!-- Col 2 -->
<td width="140"><b>Price per week</b></td><!-- Col 3 -->
</tr>
</table>
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>
So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {
var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(id,cid) {
var strURL="findSub.php?source="+id+"&cid="+cid;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT Hi, jI have a javascript script that adds/deletes input in a form. I'd like to calculate the volume for each ligne : l*h*d Then a total of all the volume fileds The data will be inserted in a php table. Thanks for your help (I hope you can understand my english) I have trouble with php but even more with javascript versions. PHP Code: -- Structure of mysql table named 'tbox' -- CREATE TABLE IF NOT EXISTS 'tbox' ( 'tboxid' int(11) NOT NULL AUTO_INCREMENT, 'tboxidtproid' int(11) NOT NULL, 'tboxdate' date NOT NULL, 'tboxL' int(11) NOT NULL, 'tboxD' int(11) NOT NULL, 'tboxH' int(11) NOT NULL, 'tboxnet' float NOT NULL, 'tboxgros' float NOT NULL, PRIMARY KEY ('tboxid') ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=55 ; The html page wiith js : PHP Code: <html> <head> <script type="text/JavaScript"> // add a box <!-- function create_champ(i){ var l = document.getElementById('l_1').value; var d = document.getElementById('d_1').value; var h = document.getElementById('h_1').value; var v = document.getElementById('v_1').value = (l * d * h) ; var i2 = i + 1; document.getElementById('champs_'+i).innerHTML = '<span id="ligne_'+i+'">L <input type="text" size="9" maxlength="9" name="l[]" id="l_'+i+'" \/> D <input type="text" size="9" maxlength="9" name="d[]" id="d_'+i+'" \/> H <input type="text" size="9" maxlength="9" name="h[]" id="h_'+i+'" \/> Volume : <input type="text" size="9" maxlength="50" name="v[]" id="v_'+i+'" value = "" " disabled="true" \/> <input type="button" value="x" id="boutton_'+i+'"onclick="delete_champ('+i+')" \/><br \/><\/span>'; document.getElementById('champs_'+i).innerHTML += '<span id="champs_'+i2+'"><input type="button" value="Add a box" onclick="create_champ('+i2+')" \/><\/span>'; } function delete_champ(i){ document.getElementById("ligne_"+i).innerHTML=""; } </script> </head> <body> <form id="1" name="addalbum" method="post" action=""> <td width="250" valign="top"><fieldset> <legend>Boxes Dimensions(mm)</legend> <table width="95%" border="0" cellspacing="0" cellpadding="3"> <tr> <span id="ligne_1"> L <input type="text" name="l[]" id="l_1" size="9" maxlength="9" value="" /> D <input type="text" name="d[]" id="d_1" size="9" maxlength="9" value="" /> H <input type="text" name="h[]" id="h_1" size="9" maxlength="9" value="" /> Volume : <input type="text" name="v[]" id="v_1" size="9" maxlength="9" value="" disabled="true" /> <input type="button" value="x" id="boutton_1" onclick="delete_champ(1)" /> <br /> </span> <span id="champs_2"> <input type="button" value="Add a box" onclick="create_champ(2)" \/></span> </table> </fieldset></td> <label> <input type="submit" name="button" id="button" value="Envoyer"> </label> </form> <?php /* insert fields in table tbox */ ?> </body> </html> Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong 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 trying to make an order form I am working on accessible for users who have javascript turned off in their browser, and to do this I would like to hide a div if JS is disabled. Searching the Web has led me to think that styling the div to not display is the way forward and then using JS to display it. It is the JS bit I am struggling with! The div in question is a set of radio buttons to allow a purchaser to choose how many gift memberships they want to buy: Code: <div id="giftmember-buttons" style="display:none";> <h2 class="threepeaksform">How many gift memberships do you wish to purchase?</h2> <fieldset class="threepeaksform"> <legend>Please select the number of people you are buying a gift membership for using the buttons below.</legend> <div class="generalcontactform-group"> <label>1</label><input name="numbergift" type="radio" value="1" checked="checked" onClick="showhidefields(this.value)" /> <label>2</label><input name="numbergift" type="radio" value="2" onClick="showhidefields(this.value);"/> <label>3</label><input name="numbergift" type="radio" value="3" onClick="showhidefields(this.value);"/> <label>4</label><input name="numbergift" type="radio" value="4" onClick="showhidefields(this.value);"/> </fieldset> </div> <br /> </div> I have used a JS switch function lower down the page but that relies on onClick to make it work, I want the above div to display as the page loads - would I do this with the switch function and onLoad applied to the body to make the div display when JS is on? The full page is at: http://yd97.peak1.titaninternet.co.u...sform-gift.htm Thanks for any help. Cheers Stu My page has a form which has some sections that do not show unless needed, but if JS is turned off then these section will never show, so looking for a way to test if it is on or not and if not allow the page to display everything that would normally be hidden unless needed.
|
|||||||