|
JavaScript - Change Select Option Based On Text Input Array Question
Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form?
Thanks Similar TutorialsHello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help Code:
<script type="text/javascript">
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>
Code: <SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)"> <OPTION VALUE="1m">Monthly</OPTION> <OPTION VALUE="">One Time</OPTION> </SELECT> Code: <input type="text" id="name" name="name" value="Partnership" /> <input type="text" id="category" name="category" value="Partnership" /> Hi Guys i am a complete novice at ajax or javascript. I have been studying php for a while now and i know that, i am now starting php oop and that going well but i have never done anything like this. Anway i am creating a booking system which at the end of the process asks who supplied your voucher which they then select a supplier. The issue i have is my client wants it so if groupon is selected then an input text box should appear so that the user can input a security code from groupon. So basically it is Code: <select name="supplier" id="supplier"> <option value="">please select supplier</option> <option value="Groupon">Groupon</option> <option value="KGB Deals">KGB Deals</option> <option value="Other">Other</option> </select> So if value="Groupon" then Code: <input type="text" name="security" id="security" /> should appear next to it. Could someone please help me as the page cant refresh as it will lose its data which would have taken the user about 10 minutes to fill out Thanks in advance I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks. The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks! 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" lang="en">
<head>
<title></title>
<script type="text/javascript">
function checkTextArea(fromto){
var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;
if (destination=="1") {
var limit = "500";
}
else {
var limit = "1000";
}
if (document.getElementById(id)){
var txt = document.getElementById(id).value;
if (txt.length>limit){
document.getElementById(id).value = txt.substr(0,limit);
}
len = document.getElementById(id).value.length;
span_id = "span" + id;
if (document.getElementById(span_id)){
document.getElementById(span_id).innerHTML = (limit-len);
} // if
} //if
} //function
function chardisplay(fromto) {
var deststring = "dest";
var identifier = deststring + fromto;
// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
// also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);
var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;
if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}
else {
document.getElementById(spanidentifier).innerHTML = "1000";
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="POST" action="myurl">
<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>
<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>
<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>
I'm taking a beginning javascript class and have been trying to figure out one last part of a homework assignment and am just not seeing how to work it out. Any help is greatly appreciated! What I'm having trouble with is doing the text verification. When a user selects an option from the select list they then need to type in the text area given. If the user doesn't type the word selected in the list then an error message should appear under the text area. If you look at my code you'll see that I have the text_check() function doing the verification. I can get it to work when there is only one option but once I add the other two it stops working. I've tried if... else and other variations, but can't seem to nail it down. Thanks! Code: function select_function()
{
var medical=document.getElementById("medical_list")
var selected_item=medical.selectedIndex
if (selected_item==0)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Medication" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
if (selected_item==1)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Hospitalization" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
if (selected_item==2)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Physician" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
}
function text_check()
{
var user_comments=document.getElementById("comments").value.toLowerCase();
var med_comment=user_comments.indexOf('medication');
var hosp_comment=user_comments.indexOf('hospitalization');
var phys_comment=user_comments.indexOf('physician');
mySelectList = document.getElementById("medical_list");
if (mySelectList.value='Medication' && med_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Medication"+"</span>"+" somewhere in the text";
}
if (mySelectList.value='Hospitalization' && hosp_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Hospitalization"+"</span>"+" somewhere in the text";
}
if (mySelectList.value= 'Physician' && phys_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Physician"+"</span>"+" somewhere in the text";
}
}
function submit_alert()
{
alert("You submitted the form")
}
function clear_error()
{
document.getElementById("word_error").innerHTML="";
}
function changeDR()
{
var my_textarea=document.getElementById("comments");
var comment_string=my_textarea.value;
var doctor=comment_string.indexOf('Dr.');
var comment_string2='';
if (comment_string < 0)
{
comment_string2=comment_string
} else {
comment_string2=comment_string.replace('Dr.','Doctor')
}
my_textarea.value=comment_string2;
}
</script>
</head>
<body style="background-color: silver">
<h2>Medical History</h2>
Select Category: <br>
<select id="medical_list" onChange="select_function();">
<option>Medication</option>
<option>Hospitalization</option>
<option>Physician</option>
</select>
<br><br><br>
<div id="enter_info">Enter Your <font color="blue">Medication</font> Information:</div>
<br>
<form method="post" action="">
<textarea id="comments" cols="60" rows="15" onBlur="text_check();" onFocus="clear_error();" onkeyup="changeDR();">
</textarea><br>
<div id="word_error"></div><br>
<input type="submit" value="Submit Information" onClick="submit_alert();"/>
</form>
</body>
</html>
Hello to all! How can I insert two values in an array in a salect option like the one below: Example: So I need in the "var op1 = new Option" an array thisarray[<?php echo"$user_name" ?>, <?php echo"$user_id" ?>] Data is being loaded by php from SQL Code: var newTextbox = document.createElement('select');
newTextbox.className = 'fn-select';
//First user in the populated select menu is the person Loged in
var op1 = new Option("", ""); <----------[an array with two variables] ???
newTextbox.appendChild(op1);
var txt1 = document.createTextNode('<?php echo"$user_name" ?>');
op1.appendChild(txt1);
And then separate these variables and let the following function save them individualy: Code: function saveNote (note) {
resetAjax();
var photoId = note.container.element.id;
ajax.setVar('action', 'save');
ajax.setVar('photo_id', photoId);
ajax.setVar('note_id', note.id);
ajax.setVar('left', note.rect.left);
ajax.setVar('top', note.rect.top);
ajax.setVar('width', note.rect.width);
ajax.setVar('height', note.rect.height);
ajax.encVar('text', note.gui.TextBox.value); <------------- $user_name
<------------- $user_id ajax.runAJAX();
var statusDiv = document.getElementById('PhotoNoteStatus');
ajax.onCompletion = function () {statusDiv.innerHTML = "<p>Note saved.</p>"; }
return 1;
}
Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. Hey guys..... I've worked out how to get the value from a select option tag, but can't work out how to get the text inside the option tags. Here is the code I am using to get the value attribute from the option tag.. PHP Code: // Set the search results box var cats = document.getElementById('cat_list'); // Loop through categories from the search results select box for (i = 0; i < cats.length; i++) { // Check if the cat is selected if (cats.childNodes[i].selected == true) { // Set this category's values to some variables var cat_id = cats.childNodes[i].getAttribute('value'); } } Thanks! Hi all ! I have written code for select options one. In that option one of the option is to select others. When i select others automatically the cursor should goto others text area box. Any suggessions please. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Smartcard Gen2</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" charset="utf-8"> var notEmpty=function(){ document.write("Problem Submitted, Thank You"); window.open(list.html); } </script> </head> </head> <body> <div class="container">, <div class="topbar"> <p>Report a Problem<a href="list.html" class="button back black"><span></span> ATM Details</a></p> </div> <div class="content"> <h6>Find ATMs by Address:</h6> <div class="box"> <table width="95%" border="0" align="center" cellpadding="8" cellspacing="0"> <tr> <td width="33%" align="right" valign="middle"><strong>Problem :</strong></td> <td> <FORM ACTION="#" NAME=latin> <SELECT NAME="words" > <option value="ATM NOT PRESENT">ATM not present</option> <option value="ATM IS BROKEN">ATM Broken</option> <option value="MASTERCARD IS NOT ACCEPTED">ATM doesnot accept MasterCard</option> <option value="ATM IS NOT ACCESSIBLE">ATM is not accessible</option> <option value="others" id="others">Others</option> </select> </FORM> </td> </td> </tr> </table> <div class="box"> <table width="95%" border="0" align="center" cellpadding="8" cellspacing="0"> <tr> <td width="33%" align="right" valign="middle"><strong>Other :</strong></td> <td width="67%" align="left" valign="top"><input name="textfield3" type="textarea" rows="25" coloumns="15" id="textfield3" placeholder=" " /></td> </tr> </table> </div> <a href="#" class="transactions" onclick="notEmpty();">Submit</a></div> </div> </body> </html> Hi there, I am a new javascript guy - struggling a bit but marching on - The following code works fine to set a form field - Code: document.getElementById("ZS_Land").value = (empLand.innerHTML);
However, I changed to form field into a select with option list, and I need it to set an option from the select now - the select has the same name/id as the field had, but is not working Any ideas how I do that ? Many thanks in advance Glorifindal Hi Guys, I am looking for a script to change text on a page based on the time of day. From 9am - 5pm weekdays I would like the page to display 'Open', and outside of that window to display 'Closed'. I am using HTML & PHP. Any help would be greatly appreciated. Thanks, Matt hi i wants to change one input to texarea when i select one from radio, plz any suggestion how i would do that? my code PHP Code: <input type="text" name="other" value="this need to become textarea" /> <input type="radio" name="inputtext" />Text <input type="radio" name="inputtext" />Textarea so when i click inputtext radio name"other" will become a textrea rather then input type text. thanks for any help. I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated. cursor: Quote: cursor bldglistc is select stvbldg_code, stvbldg_desc, slbbldg_street_line1, slbbldg_city, slbbldg_stat_code, slbbldg_zip from stvbldg, slbbldg where stvbldg_code = slbbldg_bldg_code (+) and stvbldg_desc not like 'DNU%' and stvbldg_desc not like 'Online%' order by slbbldg_bldg_code; bldg_record bldglistc%ROWTYPE; Javascript in package: Quote: htp.p(' <SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript"> function UpdateNextField(which1,which2,fld1,fld2) { document.getElementById(fld1).value = which1.value; document.getElementById(fld2).value = which2.value; } </SCRIPT> '); Form code from package: Quote: HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post'); twbkfrmt.P_FormHidden ('atyp', atyp); twbkfrmt.P_FormHidden ('seqno', seqno); twbkfrmt.p_tableopen ( 'DATAENTRY', cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."') ); twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5'); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'), idname => 'street_line1_input_id' ) ); twbkfrmt.p_tabledataopen (ccolspan => '5'); HTP.formselectopen ( 'str1', '', 1, cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"' ); OPEN bldglistc; LOOP FETCH bldglistc INTO bldg_record; IF bldglistc%NOTFOUND THEN EXIT; END IF; IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1 THEN twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1, 'selected' ); ELSE twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1 ); END IF; END LOOP; CLOSE bldglistc; HTP.formselectclose; twbkfrmt.p_tabledataclose; twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'), idname => 'street_line2_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'str2', 70, 75, address_rec.spraddr_street_line2, cattributes => 'ID="street_line2_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'), idname => 'zip_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'zip', NULL, 30, address_rec.spraddr_zip, cattributes => 'ID="zip_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tableclose; HTP.para; -- HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit')); HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset')); HTP.formclose; I have an existing form with radio buttons and a text input field: <input type="radio" name="recurringEnd" value="yes"> End after <input type="text" name="numberOccurrences" size="1"> occurrences <input type="radio" name="recurringEnd" value="date"> End on <input type="text" name="endDate" size="8"> My client now wants it setup so that if the text field is filled in, the radiobox is automatically selected. Any help on this would be greatly appreciated as I am not a JS programmer. Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. hello, I have a text input box where users can input values separated by a line break. What I need to do is to take those values and put them all into an array once they hit "submit". I can do this one line at a time, but I would like to be able to do it all in one hit. Can it be done in javascript? thanks in advance... Hello everyone I am trying to receive the output of an array from a text input here is the code that I am attempting to do but it is not displaying the output January Here is the code example [CODE] <html> <script type ="text/javascript"> <!-- function coms(str){ var myArray = new Array(); myArray[0] = ["January"]; var index = 0; for(var i = 0; i < myArray.length; i++){ index; if(myArray[i] == "January"){ index i; } if(str.length == myArray[i]){ document.write(str); } } } </script> <body> <form> Panel:<input type="text" name="panel" onkeyup="coms(this.value)" /> <div id="read"><p>Data is displayed here</p></div> </form> </body> </html> [CODE] Any tips to make this possible are welcome thank you kindly like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" |
|||||||