|
JavaScript - Problems Creating A New Option Element In A Form
Hi,
I'm trying to automatically generate a new <option> tag in a html form using the below code, but it's not working. Does anyone have any ideas? The get_lightboxes function is being called via the add_to_lightbox functon. Javascript: function get_lightboxes(title, new_lightbox_id){ var new_option = document.createElement('option'); new_option.text = title; new_option.value = new_lightbox_id; var select_box = document.getElementByID('lightbox_select'); try { select_box.add(new_option, null); } catch(ex) { select_box.add(new_option); } } HTML: <form method="post" action="<?=$_SERVER['PHP_SELF']?>" name="lightbox_form" onsubmit="add_to_lightbox('<?=$_GET['id']?>', '<?=$_GET['media_urn']?>', lightbox_select_<?=$_GET['id']?>.value); return false;"> <input type="hidden" name="submitted" value="1" /> <input type="hidden" name="user_email_<?=$_GET['id']?>" value="<?=$_GET['user_email']?>" /> <input type="hidden" name="record_id_<?=$_GET['id']?>" value="<?=$_GET['id']?>" /> <input type="hidden" name="media_urn_<?=$_GET['id']?>" value="<?=$_GET['media_urn']?>" /> <h2>Add/Delete from existing lightbox:</h2> <p> <select name="lightbox_select_<?=$_GET['id']?>" id="lightbox_select"> <? foreach ($get_lightboxes as $lightbox) : ?> <? $lightbox_id = $lightbox["lightbox_id"]; ?> <? $title = $lightbox["title"]; ?> <? if(strlen($title) > 25) $title = substr($title, 0, 25) . "…"; ?> <option value="<?=$lightbox_id?>"><?=$title?></option> <? endforeach; ?> </select> <input type="submit" name="submit" value="Add" /> </p> </form> Similar TutorialsGreetings! I'm trying to disable some form elements using the onclick from a radio input element. It ain't working so great! I googled around and finally scraped together some code that in theory 'I' think should work. I'm no javascript guru! It has to be some tiny tiny thing I'm missing. Here's my code and mind you this is a project in the making! I still have along way to go! Thanks for you time and help! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Empty Page</title>
<script type='text/javascript'>
function setReadOnly(obj)
{
if(obj.value == "1")
{
document.shiftreport.artprogs.disabled = true;
document.shiftreport.artprog_stat.disabled = true;
} else {
document.shiftreport.icprogs.disabled = true;
document.shiftreport.icprog_stat.disabled = true;
}
}
</script>
</head>
<body>
<?php
include_once('form_input_functions.php');
$artprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$artprog_wfls = array('no_job' => '------- select a job -------',
'ARTPROG/WFL/DAILY/BATCH' => 'ARTPROG/WFL/DAILY/BATCH',
'ARTPROG/WFL/OPERATIONS/IMAGE' => 'ARTPROG/WFL/OPERATIONS/IMAGE',
'ARTPROG/WFL/WKLY/BATCH' => 'ARTPROG/WFL/WKLY/BATCH',
'ARTPROG/WFL/DAILY/CLAIMS' => 'ARTPROG/WFL/DAILY/CLAIMS'
);
$bllyprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$bllyprog_wfls = array('no_job' => '------- select a job -------',
'BLLYPROG/WFL/DAILY/SISCHEDPAY' => 'BLLYPROG/WFL/DAILY/SISCHEDPAY',
'BLLYPROG/WFL/DAILY/REPORTS' => 'BLLYPROG/WFL/DAILY/REPORTS',
'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM' => 'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'$UTIL/O/AUDIT/CLOSE/BLLY' => '$UTIL/O/AUDIT/CLOSE/BLLY',
'DATASIWH/EXTRACTALL/DAILY/AUD/WFL' => 'DATASIWH/EXTRACTALL/DAILY/AUD/WFL',
);
$sbwcprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$sbwcprog_wfls = array('no_job' => '------- select a job -------',
'WORKPROG/WFL/DAILY/WAREHOUSE' => 'WORKPROG/WFL/DAILY/WAREHOUSE',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'$UTIL/O/AUDIT/CLOSE/WORKCOMP' => '$UTIL/O/AUDIT/CLOSE/WORKCOMP'
);
$tcsprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$tcsprog_wfls = array ('no_job' => '------- select a job -------',
'TCS/WFL/DAILY/BATCH' => 'TCS/WFL/DAILY/BATCH',
'BLPROG/WFL/COPY/REMOVE/GLCHECKS' => 'BLPROG/WFL/COPY/REMOVE/GLCHECKS'
);
$icprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$icprog_wfls = array ('no_job' => '------- select a job -------',
'BLPROG/WFL/DAILY/INDCONT' => 'BLPROG/WFL/DAILY/INDCONT',
'INDCON/WFL/PRINT/IDCARDS' => 'INDCON/WFL/PRINT/IDCARDS',
'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT' => 'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT'
);
$truckprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$truckprog_wfls = array('no_job' => '------- select a job -------',
'TRUCKPROG/WFL/DAILY/TKINTMARSH' => 'TRUCKPROG/WFL/DAILY/TKINTMARSH',
'TRUCKPROG/WFL/DAILY/TKINTERNET' => 'TRUCKPROG/WFL/DAILY/TKINTERNET',
'TRUCKPROG/WFL/DAILY/BATCH' => 'TRUCKPROG/WFL/DAILY/BATCH',
'TRUCKPROG/WFL/DAILY/TKSCHEDPAY' => 'TRUCKPROG/WFL/DAILY/TKSCHEDPAY',
'TRUCKPROG/WFL/DAILY/REPORTS' => 'TRUCKPROG/WFL/DAILY/REPORTS',
'BLPROG/WFL/DAILY/CLAIMS' => 'BLPROG/WFL/DAILY/CLAIMS',
'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM' => 'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM',
'TRUCKPROG/WFL/DAILY/BALRPT' => 'TRUCKPROG/WFL/DAILY/BALRPT',
'PROG-MEDICAL/WFL/DAILY/PMCLMEXT' => 'PROG-MEDICAL/WFL/DAILY/PMCLMEXT',
'AGPROG/WFL/DAILY/AGNUCOPREM' => 'AGPROG/WFL/DAILY/AGNUCOPREM',
'BL/WFL/WKLY/FEDEX/0005' => 'BL/WFL/WKLY/FEDEX/0005',
'TRUCKPROG/WFL/WKLY/DE542' => 'TRUCKPROG/WFL/WKLY/DE542',
'TRUCKPROG/WFL/WKLY/FDXDISAB' => 'TRUCKPROG/WFL/WKLY/FDXDISAB',
'TRUCKPROG/WFL/WKLY/FDXDISERR' => 'TRUCKPROG/WFL/WKLY/FDXDISERR',
'BL/WFL/ONLINE/DUMP/TRUCKING' => 'BL/WFL/ONLINE/DUMP/TRUCKING',
'DATATKWH/EXTRACTALL/DAILY/WFL' => 'DATATKWH/EXTRACTALL/DAILY/WFL',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'
);
$smallprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$smallprog_wfls = array('no_job' => '------- select a job -------',
'SMALLPROG/WFL/DAILY/BATCH' => 'SMALLPROG/WFL/DAILY/BATCH',
'SMALLPROG/WFL/DAILY/CERTS' => 'SMALLPROG/WFL/DAILY/CERTS',
'SMALLPROG/WFL/OPERATIONS/PRINT' => 'SMALLPROG/WFL/OPERATIONS/PRINT',
'SMALLPROG/WFL/WKLY/BATCH' => 'SMALLPROG/WFL/WKLY/BATCH',
'SFCLAIMS/WFL/DAILY/DWHCLAIMS' => 'SFCLAIMS/WFL/DAILY/DWHCLAIMS',
'SFCLAIMS/WFL/DAILY/REPORTS' => 'SFCLAIMS/WFL/DAILY/REPORTS',
'SFCLAIMS/WFL/WEEKLY/REPORTS' => 'SFCLAIMS/WFL/WEEKLY/REPORTS',
'BL/WFL/ONLINE/DUMP/SFDB/1WORKER' => 'BL/WFL/ONLINE/DUMP/SFDB/1WORKER',
'$UTIL/O/AUDIT/CLOSE/SFDB' => '$UTIL/O/AUDIT/CLOSE/SFDB',
'DATASFWH/EXTRACTALL/DAILY/WFL' => 'DATASFWH/EXTRACTALL/DAILY/WFL',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'
);
$persauto_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$persauto_wfls = array('no_job' => '------- select a job -------',
'PERSAUTO/WFL/DAILY/BATCH' => 'PERSAUTO/WFL/DAILY/BATCH',
'PERSAUTO/WFL/OPERATIONS/IMAGE' => 'PERSAUTO/WFL/OPERATIONS/IMAGE',
'PERSAUTO/WFL/OPERATIONS/PRINT' => 'PERSAUTO/WFL/OPERATIONS/PRINT',
'PERSAUTO/WFL/WKLY/BATCH' => 'PERSAUTO/WFL/WKLY/BATCH',
'PERSAUTO/WFL/DAILY/CLAIMS' => 'PERSAUTO/WFL/DAILY/CLAIMS',
'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL' => 'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL',
'$UTIL/O/AUDIT/CLOSE/DB1' => '$UTIL/O/AUDIT/CLOSE/DB1',
'DATAWH/EXTRACTALL/DAILY/WFL' => 'DATAWH/EXTRACTALL/DAILY/WFL',
'BL/WFL/OFFLINE/DUMP/WAREHOUSE' => 'BL/WFL/OFFLINE/DUMP/WAREHOUSE'
);
$isoprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$isoprog_wfls = array('no_job' => '------- select a job -------',
'ISOPROG/WFL/BATCH/ISOSAGDAILY' => 'ISOPROG/WFL/BATCH/ISOSAGDAILY'
);
$bkuplive_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$bkuplive_wfls = array('no_job' => '------- select a job -------',
'BL/WFL/ONLINE/DUMP/BLDB' => 'BL/WFL/ONLINE/DUMP/BLDB',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'$UTIL/O/AUDIT/CLOSE/BLDB' => '$UTIL/O/AUDIT/CLOSE/BLDB',
'DATARDWH/EXTRACTALL/DAILY/REIN/WFL' => 'DATARDWH/EXTRACTALL/DAILY/REIN/WFL',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'BL/WFL/FICHE/DISK' => 'BL/WFL/FICHE/DISK'
);
$testsite_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$testsite_wfls = array('no_job' => '------- select a job -------',
'WFL/TESTLYON/DATABASE/ONLINE/DISABLE' => 'WFL/TESTLYON/DATABASE/ONLINE/DISABLE',
'UTIL/WFL/REMOVE/TESTLYON/BDFILES' => 'UTIL/WFL/REMOVE/TESTLYON/BDFILES',
'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => 'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'
);
?>
<form method="POST" name="shiftreport" action="<?php print $_SERVER['PHP_SELF']; ?>">
<p>1st Shift <?php input_radiocheck('radio','shift','0','1','1'); ?></p>
<p>2st Shift <?php input_radiocheck('radio','shift','0','2','1'); ?></p>
<p>3st Shift <?php input_radiocheck('radio','shift','0','3','1'); ?></p>
<table>
<thead>
<tr>
<th>Application</th>
<th>Job Stream</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>ARTISAN</td>
<td>
<?php input_select('artprogs',$artprog_wfls['no_job'], $GLOBALS['artprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('artprog_stat', $artprog_status['none'] , $GLOBALS['artprog_status']); ?>
</td>
</tr>
<tr>
<td>SELF INSURED</td>
<td>
<?php input_select('bllyprogs',$bllyprog_wfls['no_job'], $GLOBALS['bllyprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('bllyprog_stat', $bllyprog_status['none'] , $GLOBALS['bllyprog_status']); ?>
</td>
</tr>
<tr>
<td>SBWC</td>
<td>
<?php input_select('sbwcprogs',$sbwcprog_wfls['no_job'],$GLOBALS['sbwcprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('sbwcprog_stat', $sbwcprog_status['none'] , $GLOBALS['sbwcprog_status']); ?>
</td>
</tr>
<tr>
<td>TCS</td>
<td>
<?php input_select('tcsprogs',$tcsprog_wfls['no_job'], $GLOBALS['tcsprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('tcsprog_stat', $tcsprog_status['none'] , $GLOBALS['tcsprog_status']); ?>
</td>
</tr>
<tr>
<td>IC</td>
<td>
<?php input_select('icprogs',$icprog_wfls['no_job'], $GLOBALS['icprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('icprog_stat', $icprog_status['none'] , $GLOBALS['icprog_status']); ?>
</td>
</tr>
<tr>
<td>TRUCKING</td>
<td>
<?php input_select('truckprogs',$truckprog_wfls['no_job'], $GLOBALS['truckprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('truckprog_stat', $truckprog_status['none'] , $GLOBALS['truckprog_status']); ?>
</td>
</tr>
<tr>
<td>SMALL FLEET</td>
<td>
<?php input_select('smallprogs',$smallprog_wfls['no_job'], $GLOBALS['smallprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('smallprog_stat', $smallprog_status['none'] , $GLOBALS['smallprog_status']); ?>
</td>
</tr>
<tr>
<td>PERSONAL AUTO</td>
<td>
<?php input_select('persauto',$persauto_wfls['no_job'], $GLOBALS['persauto_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('persauto_stat', $persauto_status['none'] , $GLOBALS['persauto_status']); ?>
</td>
</tr>
<tr>
<td>ISO</td>
<td>
<?php input_select('isoprog',$isoprog_wfls['no_job'], $GLOBALS['isoprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('isoprog_stat', $isoprog_status['none'] , $GLOBALS['isoprog_status']); ?>
</td>
</tr>
<tr>
<td>BACKUPS LIVE</td>
<td>
<?php input_select('bkuplive',$bkuplive_wfls['no_job'], $GLOBALS['bkuplive_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('bkuplive_stat', $bkuplive_status['none'] , $GLOBALS['bkuplive_status']); ?>
</td>
</tr>
<tr>
<td>TEST SITE INSTRUCTIONS</td>
<td>
<?php input_select('testsite',$testsite_wfls['no_job'], $GLOBALS['testsite_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('testsite_stat', $testsite_status['none'] , $GLOBALS['testsite_status']); ?>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
The included functions file that I didn't include is below: Code: <?php
function input_text($element_name, $value) {
print '<input type="text" name="' . $element_name . '" value="';
print htmlentities($values[$element_name]) . '">';
}
function input_submit($element_name,$label) {
print '<input type="submit" name="' . $element_name .'" value="';
print htmlentities($label) .'"/>';
}
function input_textarea($element_name,$values) {
print '<textarea name="' . $element_name . '">';
print htmlentities($values[$element_name]) . '</textarea>';
}
function input_radiocheck($type,$element_name,$values,$element_value,$clicker = '0') {
print '<input type="' . $type . '" name="' . $element_name . '" value="' . $element_value . '" ';
if ($element_value == $values[$element_name]) {
print ' checked="checked"';
}
if ($clicker == '1')
print ' onclick="setReadOnly(this)"';
print '/>';
}
function input_select($element_name, $selected, $options, $drop_width = '100px', $multiple = false) {
print '<select style="width:' . $drop_width . ';" name="' . $element_name;
if ($multiple) { print '[]" multiple="multiple'; }
print '">';
$selected_options = array();
if ($multiple) {
foreach ($selected[$element_name] as $val) {
$selected_options[$val] = true;
}
} else {
$selected_options[ $selected[$element_name] ] = true;
}
foreach ($options as $option => $label) {
print '<option value="' . htmlentities($option) . '"';
if (isset($selected_options[$option])) {
print ' selected="selected"';
}
print '>' . htmlentities($label) . '</option>';
}
print '</select>';
}
?>
Hi everyone, The following code has an onblur event in the input fields so that if someone clicks out of the field without typing something in it, the original label, ie. 'First name' is reinserted into the field. The field is also being validated by some php code, however the onblur event creates a problem because the form still submits even if a name isn't typed into the field. It's assuming that 'First name' is an entry and therefore isn't validating it correctly. It was suggested that on the submit event of the form, there would be a function that checks if the value is First Name then return false, but then otherwise return true. As my javascript skills are very basic, I wondered if someone could help me with this code to solve this issue? Appreciate any help. Code: <input id="firstname" name="firstname" type="text" value="First name" onfocus="if (this.value == 'First name') this.value=''" onblur="if (this.value == '') this.value='First name'" />
<?php
if (ValidatedField('index_965','index_965')) {
if ((strpos((",".ValidatedField("index_965","index_965").","), "," . "1" . ",") !== false || "1" == "")) {
if (!(false)) {
?>
<span style="color: red"> First name is required </span>
<?php //WAFV_Conditional index.php index_965(1:)
}
}
}?>
I have rough ideas on how to achieve this but I dont know how to start. I want to use a drop-down menu selection option to submit a form. But the form's contents change depending on the option. This is the basic form: Code: <FORM ID="go1" METHOD="POST" TARGET="_self"> <INPUT TYPE=HIDDEN NAME=UserID VALUE="<%UserID%>"> <INPUT TYPE=HIDDEN NAME=Password VALUE="<%Password%>"> <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> <INPUT TYPE="IMAGE" class="hand" border="0" src="/images/my.gif" width="45" height="26" vspace="5"> </FORM> At the moment, it's an image which gets clicked on but it needs to be the option chosen. I think I can do that with: Code: function gotoPage(s){
var v = s.selectedIndex;
var select = document.forms.form.elements.input; // selects question
if (v == 1){...}
if (v == 2){...} etc.
However, as I said, the form's contents must change depending on the option chosen: The form's values which change a Code: <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> Can someone point me in the right direction? Several posts here are almost what I need, but I can't put it all together.... thank you for your help, this is for a pet rescue charity! When selecting "mini" option, my form should should only allow typing in 6 out of 10 text input fields (the first 3 on the front, and the first 3 on the back too if its selected). Other sizes would allow typing in all 10. The NAME must be the same due to the shoppingcart used, but ID can be different. Also, if mini the maxlength of each should be 14, other sizes each maxlength is different. I will try to put the relevant code below, but one entire form is he http://wooftags.com/bone-iframe.html Code: <select name="product1[]">
<option value="mini">mini</option>
<option value="small">small</option>
<option value="medium">medium</option>
<option value="large">large</option>
</SELECT>
<input type="text" name="product1[]2" size="14" maxlength="14" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="18" maxlength="18" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="25" maxlength="25" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<INPUT TYPE="HIDDEN" NAME="price2" VALUE="1">
<input id="back1" type="text" name="product2[]2" size=14 maxlength=14 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back2" type="text" name="product2[]2" size=18 maxlength=18 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back3" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back4" type="text" name="product2[]2" size=25 maxlength=25 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back5" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
Greetings, I am trying to make a form that collects "Number of Children" a parent has. If they select "4" from the select input, then I want to slidetoggle out the appropriate divs, one for each child. Code: <select id="NumberofChildren" name="NumberofChildren">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
The div IDs to display are 1child, 2child, 3child, 4child, 5child. I have been able to use slidetoggle in the past when attached to a button, but this one has me lost. Anyone know how to accomplish this? Your help is greatly appreciated! Thank you! Hi, I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like... PHP Code: <form id="form1" name="form1" method="post" action=""> <p> <label for="select">Membership:</label> <br /> <select name="select" id="select"> <option value="Premium" selected="selected">premium</option> <option value="Bronze">bronze</option> </select> </p> <p>Membership No:<br /> <input type="text" name="textfield" id="textfield" /> </p> OR<br /> Sponsor: <br /> <select name="select2" id="select2"> <option value="329">329</option> <option value="234">234</option> </select> </form> appreciate the help I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show. I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful. Code: <select id="Program" name="Program" size="1" onchange="
$other = document.getElementById('other_program').style;
$invoice = document.getElementById('invoice');
if (selectedIndex==6) {
$other.visibility='visible';
if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
}
}
">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>
<span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>
<!-- the following is the new select group ive set up
<span id="alumni">
<select id="select-alumni" name="select-alumni" size="1">
<option selected="selected" value="Not Selected">Yes or No</option>
<option value="Yes-alumni">Yes</option>
<option value="Not-alumni">No</option>
</select>
</span>
-->
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);
?>
I am trying to have it so that when someone choose a value from the select box, it then displays it in the html. The problem is im not very good with javascript, and my error keeps coming up as undefined where as before it was coming up as "[object HTMLSelectElement]". Can anyone tell me whats up? PHP Code: <html> <head> <script type="text/javascript"> function moveValue() { var no=document.getElementById("no"); var option=no.options[no.selectedIndex].numberr; document.getElementById('numberr').innerHTML = option; } </script> </head> <body> <form> Select numbers:<br /> <select id="no"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> </select> <input type="button" onclick="moveValue()" value="-->"> <i id="numberr">Testing</i> </form> </body> </html> and now that i look at it, i suspect that the reason that it is not working is that i should have "ID"'s or value's on each of the options but i do not know for certain I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far. Please help. Code: <body> <label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br /> </label> <form action="" method="post" style="border-style: ridge; width: 311px; height: 37px;" name="myform"> <table> <tr> <td>Select Category:</td><td> <select name="category" onchange="set_sub_category()" style="width: 157px"> <option selected="selected" value="select">Select an Option</option> <option value="add">Add Category</option> <option value="district">Council District</option> <option value="region">Region</option> <option value="pom">POM</option> <option value="proptype">Property Type</option> <option value="assetcat">Asset Category</option> <option value="assettype">Asset Type</option> <option value="property">Property</option> <option value="asset">Asset</option> </select> </td> </tr> </table> </form> <form style="display:none" action= "admin_console_new.html" onsubmit="return (validate_form(this)& validate_list(this))" method="post" style="border-style: ridge; border-width: medium; height: 154px; width: 346px;" name="district"> <table style="height: 86px"> <tr> <td>Select District Value:</td><td> <select name="district"> <option selected="selected">Select an Option</option> <option>Add Council District</option> </select> </td> </tr><tr> <td>Enter District Name:</td><td> <input name="name" type="text"/> </td> </tr><tr> <td>Enter Description:</td><td><textarea name="description"></textarea> </td> </tr><tr> <td><input type="submit" value="Submit" name="Submit3" /><input type="reset" value="Reset" /> </td> </tr> </table> </form> Hello All, I am fairly new to javascript. I need to access a button on a form and perform task using onclick. When I view the source of the page, the id of the button seems to be dynamic with a 'Link' suffix. (ex. xtydLink). How can I access this button if I cannot use getelementbyid because the ID changes? Thanks in advance Hi all, At work I have written a form builder which is all drag and drop. The issue I have is with ending the drop, I have no problems in IE. The drag is controlled by the onmousemove and onmouseup events for the document body. The trouble is, in Firefox, if the cursor is over a form item, then the onmouseup event doesn't fire and therefore the drag doesn't end. There is no problem with other items, other HTML items, tables, list, divs, then all bubble the event to the body. Anyone ever come across this, if so how did you get round it. Do I need to manually make form elements bubble in Firefox? Maybe I should just stick a div opacity 0 over the drag objects and make that call the body's onmouseup event. Any thoughts much appreciated, Cheers, Dale is there a way to shorten something like: document.scoresheet["HomeTotalHCaps"].value to a simple short name like var1.value ? Hi! I have this form that depending on the shift you choose certain form elements get grayed out. Here's the part that I don't understand. I validate the form in php and display the errors but the form re-enables everything that was grayed out. Not the behavior I was expecting. How would I go about this? I attached a copy of the HTML source created from php. I'm grateful for any help! Thanks! 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() Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question. Here is the form I need, the post method is email : Name (txtfield) DOB (Date) Address (txtarea) Programme (Select list) : Options : Programme1, Programme2, Programme3 Date (Select list) : options : 10/10/2009 to 12/09/2009 15/10/2009 to 16/10/2009 Venue : Mainland Harvey Waterloo Time : 9am - 12 noon 1 pm - 3 pm 3 pm - 5 pm Here is the Logic : Date : Conditions If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this. Venue : Conditions If Programme = Programme1 then all the venues should be selectable. If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable. If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable. If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it. Time :Conditions : Always should be default selection and greyed out If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon. If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm. If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this. Thanks for having a look and thanks in advance for any help. Cheers Hello I am fairly new to Javascript. I have a function which takes a string which consists of key value pairs and sets a form control based on key being the form element name and value being the value to set. eg string could be "key1=orange;key2=2;key3=whetever" Here is the function: function processresponse(frm, serverResponse) { var items = serverResponse.split(";"); for(var i = 0; i < items.length; i++) { var item = items[i]; var eqchar = item.search("="); if(eqchar != -1) { var key = item.slice(0, eqchar); var value = item.slice(eqchar+1); var elemname = key; if(document.getElementById(elemname) != null) { var type = frm.elements[elemname].type; if (type=="checkbox") { value == "1" ? frm.elements[elemname].checked=true : frm.elements[elemname].checked=false; } else if (type=="text"){ //do processing for text (text input) frm.elements[elemname].value = value; } else if(type=="select-one"){ //only one is openformmode - default to [0] - true if(value == "0" || value.length == 0) { frm.elements[elemname].options[0].selected = true; } else { frm.elements[elemname].options[1].selected = true; } } else { alert("unknown ctrl type: " + type + " name: " + frm.elements[elemname].name + " val: " + value + " key: " + key); } } //if(frm.getElementById(elemname) } } } The problem line is: var type = frm.elements[elemname].type; elemname is case sensitive so if for example the form element is called dog and the string elemname is Dog, then the line fails with Error: 'elements[...].type' is null or not an object So my check if(document.getElementById(elemname) != null) is insufficient to guard against this. I realise I could do a try catch but there must be a more legant way than that. How can I test the formname more reliably? Any ideas would be very welcome. Angus In fact: does input type=image belong to the form's elements collection, in ECMAScript ? It looks like not. When traversing the form's elements collection with classical javascript (document.forms[formname].elements), an input type="image" is not included. Is this an inheritance from old browsers interpretors? Does anyone know the reason for this omission? I have created a form with javascript embedded to dynamically assign value to
Code: document.myForm.myTextBox.value based on user inputs, and when submitting the form, the targeted php file will process the data and records them in MySQL. The problem is that the value of myTextBox remains 'null' even when the javascript assigns a value to it (and it is visible in the form). Here is the code of the javascript: Code: document.register.street.value = http.responseText.split('^')[0];
document.register.city.value = http.responseText.split('^')[1];
document.register.street.disabled = true;
document.register.city.disabled = true;
To prevent user-mistyping, the textbox will be disabled after the value is set. I tried to search but I found it is very difficult when I don't even know what key word to use to describe this issue. I hope anyone can help me with this here, and thanks for any inputs. I'm a non-web programmer being forced to do some web programming. My immediate problem is that, on submission of a form, I need to be able to open a url (that I control) with the filled-in form values appended to the new url. In other words, I need to be able to do the equivalent of : Code: <form>
<input name="key1" type="text"/>
<input name="key2" type="text"/>
<input type="button" value="Submit" onclick="window.open('http://new.domain.com/newpage.html?key1=val1&key2=val2')"/>
</form>
I would really like to do this without server-side code. Pointers? TIA |
|||||||