|
JavaScript - Getting Element(button) On Form With No Id
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 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 i have 2 radios : what i need is once i choose the 1st radio i will get 1st DDL with folollwing element : Orange Apple Kiwi if i chose the 2nd radio i should have the 2nd DDL with : Potato Tomato legume ? thanks I've been handed an html document that contains a centered, scrollable <iframe> element with a static height and width. This iframe element displays a simple html document that houses the 'terms of service' text. Their goal is to have it to where the <a href> link at the bottom that is shown to the user as 'next' is disabled until the user scrolls to the bottom of the terms of agreement box. The clickable link could be a button, image or text (no preference). They have to have it this way for legal reasons and radio buttons or checkboxes will not suffice unfortunately. Question: What is the best way to go about doing this that seems to be cross-browser friendly (especially IE7). I offer $10 via paypal for well commented method/script. 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 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 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! 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? 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 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> 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 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. Hi! I have encountered a problem with IE that I'm simply unable to solve. I have a form where the user can choose different things to input from a drop down list and depending on the choise, different kinds of textboxes of text areas etc. are loaded onto the page with JS. After the user has finished inputing text and submits the form, I read the input with PHP and process it further. Now, this works perfectly in firefox but IE doesn't seem to add the name properties to the elements (both textboxes and text areas) because PHP cannot find them and no info is printed from the input. The creation of the elements (adding them to the page...) works just fine, it's just getting the data from them that's the problem. Since it works in FF I know it's not a PHP problem. I've used the recommended .name to set the property (although I've also tried .setAttribute() etc), yet it still doesn't work. What can I do to solve this? My relevant JS code: Code: function addTextbox(idName, head)
{
var target = document.getElementById('addThings');
var newDiv = document.createElement("div");
newDiv.id = "container";
newDiv.name = "container";
newDiv.setAttribute("className", "intNew"); //IE
newDiv.setAttribute("class", "intNew"); //FF
var newTextbox = document.createElement("input");
newTextbox.type = "text";
newTextbox.id = idName; //--
newTextbox.name = idName; //Doesn't work in IE?..
newTextbox.setAttribute("className", "newWidth"); //IE
newTextbox.setAttribute("class", "newWidth"); //FF
var text = document.createTextNode(head + ":");
target.appendChild(newDiv);
newDiv.appendChild(text);
newDiv.innerHTML += "<br />";
newDiv.appendChild(newTextbox);
newDiv.innerHTML += "<p />";
}
(The text area function is the same, more or less) The PHP code, if anyone's interested: Code: if($_POST['createBtn'])
{
$head = $_POST['head']; //1
$intro = $_POST['intro']; //2
$question = $_POST['question']; //3
$answer = $_POST['answer']; //3
$image = $_POST['image']; //?
$author = $_POST['author']; //5
$end = $_POST['end']; //4
//sammanfattning
printHTMLTop(9);
$today = date('Y-m-d');
$text = <<<END
<div class="intContainer">
<div class="intHeadRow"><b>$head </b></div>
<div class="stpdIEContainer">
<div class="intTextContainer">
<p />
$intro
<p />
END;
if($question != "" && answer != "")
{
foreach($question as $k)
{
$text .= $k . "<p />";
foreach($answer as $j)
{
$text .= $j . "<p />";
}
}
}
$text .= <<<END
<p />
$end
<p />
<i>Skrivet av: $author den $today</i>
</div> <!-- intTextContainer -->
<div class="intImgContainer"> </div></div> <!-- stpdIEContainer -->
</div> <!-- intContainer -->
END;
//Prints to new file (on server)
$file = file_put_contents('interviews/interview01.html', $text); //Set name
//Add to DB
//print newly created file
$page = file_get_contents('interviews/interview01.html');
echo $page;
printHTMLBottom();
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);
?>
The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! I have a button that works fine in every browser EXCEPT IE8, and I can't seem to figure out why, I would assume its a Jvascript issue, here's the code, any help would be great thanks guys... THE button that doesn't work in IE is the one with the value "Proceed to your order" at the bottom, the other two, delete and recalculate work fine.??? Code: <form action="/cart" method="post" id="form">
<table width="100%" cellspacing="0" cellpadding="0" style="margin-top:30px">
<thead class="tableTitle"><tr>
<td width="20"><!--<input type="checkbox" value="" checked="" onclick="checkAll(this)" />--></td>
<td>Title</td>
<td>Quantity</td>
<td>Price</td>
</tr></thead><tbody class="tableBody">
<?foreach ($goods as $k => $v){$randId = randId();?>
<tr>
<td><input type="checkbox" name="deleteCheckbox[]" class="checkboxes" value="<?=$v['id']?>" /></td>
<td width="400"><strong><?=$v['title']?></strong><br />
Color: <select onchange="updateExtras('color', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify color</option>
<?if (count($v['colors'])) foreach ($v['colors'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['colorId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
Size:<select onchange="updateExtras('size', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify size</option>
<?if (count($v['sizes'])) foreach ($v['sizes'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['sizeId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
<?if ($_SESSION['cartDetails'][$v['id']]['size']){?>
<div style="font-size:0.9em; margin-top:5px"><strong>Size</strong>: <?=$_SESSION['cartDetails'][$v['id']]['size']?></div>
<?}?>
<?if ($_SESSION['cartDetails'][$v['id']]['color']){?>
<strong>Color</strong>: <?=$_SESSION['cartDetails'][$v['id']]['color']?><?}?>
</td>
<td width="100"><input type="text" value="<?=$v['q']?>" size="5" name="ammounts[]" /></td>
<td>$<span id="<?=$randId?>"><?=$v['totalPrice']?></span> CAD<br /><span style="color:#ccc">($<?=$v['price']?> per each)</span></td>
</tr>
<?}?>
<tr class="totalPrice">
<td></td>
<td width="400" style="font-size:1em; font-style:italic">Total price</td>
<td width="100"></td>
<td style="font-size:1em; font-style:italic">$<span id="totalPriceHere"><?=$totalPrice?></span> CAD</td>
</tr>
</tbody>
<tfoot class="tableFoot"><tr><td colspan="4"></td></tr></tfoot>
</table>
<div style="margin-top:10px;">
<input type="submit" value="Delete selected" id="deleteButton" class="button left" />
<a href="/cart/proceed" onclick="
var stop = false;
$('.checkMe').each(function(){
if ($(this).attr('value') == 0) {stop = true}
return
})
if (stop) {
$('#alert').html('Choose colors and sizes for each item to proceed!');
return false
}
return true
"><input type="button" value="Proceed to your order" class="button right" /></a>
<a href="#" onclick="$('#form').attr('action', '/cart/recalc'); $('#form').submit()"><input type="button" value="Recalculate" style="margin-right:10px" class="button right" /></a>
Hey, I've created a form whereby there are four bars of different chocolates. Each time the user clicks the button with the name of the chocolate on it, a running total is shown. I would like to make a clear button for this and have wrapped the buttons in <formarea> tags and defined a name, however this is still not what I would like. The code for the buttons are as follows (without showing my attempt of the clear button, as this was a total mess): Code: </script> </head> <body onload="chocPrice()"> <h1>Prices of Chocolate</h1> <br /><br /> <input type="button" id="btnMars" value="Mars" onclick="chocPrice(0)"> <br/> <input type="button" id="btnSnickers" value="Snickers" onclick="chocPrice(1)"> <br/> <input type="button" id="btnBounty" value="Bounty" onclick="chocPrice(2)"> <br/> <input type="button" id="btnYorkie" value="Yorkie" onclick= "chocPrice(3)"> <br/> <input type="text" id="Val" value=""> <br/> <p>Total: </p><p id="Total">0</p> </body> </html> Many Thanks Good afternoon. I'm trying to make it so a 'radio button' in a 'form' will 'collapse' a Div that I have hidden. I'm using the JavaScript to control the collapse, and google's Jquery for the rest of it. here's the code. Code: <head>
<script type="text/javascript" src="SpryAssets/collapse.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('test', 'fade=1, group=test, speed=400')
animatedcollapse.ontoggle=function($, divobj, state) { //fires each time a DIV is expanded/contracted
//$: Access to Jquery
//divobj: DOM reference to DIV being expanded/collapsed. Use "divobj.id" to get the ID.
//state: "block" or "none", depending on the state.
}
animatedcollapse.init()
</script>
</head>
and the body code... Code: <form action="myform.php" method="post">
<a id="collapsable" href="javascript:animatedcollapse.toggle('test')"> [+]
Testing the Collapsability of this Scripting.</a>
<div id="test" style="display:none;">
<h1> You can see that if you toggle the 'Image Display' Button. This will display Properly.</h1>
</div>
</form>
You can find a completely working version (When not using Radio buttons and forms) located at My Toggle Works Here. Alternatively, you can find the NON working version, which is what I'm attempting to get to work, located at My Toggle Doesn't Work. you can see that in the version that doesn't work, if you hit the 'Radio button', it will collapse, and immediately uncollapse the Div, I don't get why it does this. Any help is greatly appreciated. |
|||||||