JavaScript - How To Put Select Value On Input Box

I have an ajax dependent drop down set up for location fields and am having trouble figuring out how to clear the dependent selects if the parent select is changed to blank.

I set up a function to clearFields:
Code:

<script>
function clearFields() {
 document.getElementById('cb_state').value = "";
}
</script>

And then set the parent to clearFields onchange:
Code:

onchange='ajaxFunction();clearFields();'

This doesn't clear the field, but even if it did it would clear the field on change regardless of what's selected, what I need is for the function to fire only if the blank option is selected.

How do I need to go about this?

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

I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url.
I am also assuming this can be accomplished with javascript.

Any help is greatly appreciated.

I have a problem with adding new inputs to a form (if and when required),

Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank.

JS:
Code:

fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}

form:
Code:

<form action="index.php" method="post">
<div id="input">
  <input type="text" name="input[]" size="30" maxlength="15" />
</div>

<!-- button -->
<div id="more">
  <input type="button" onclick="addInput()" name="add" value="More" />
</div>
<!-- // button -->

 <input type="submit" name="submit" value="Submit" />

 </form>

as usual any help is appretiated ..

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.

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/

Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear).

I need some advice on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name = "form1">
 <fieldset>
  <legend>Fruit or Veggie</legend>
	<select name = "S1">
	  <option name = "fruit">Fruit </option>
		<option name = "veggie">Veggie</option>
	</select>
	<select name = "S2"
	</select>
 </fieldset>
</form>

<script language="JavaScript" type="text/javascript">

???

</script>
</body>
</html>

Hey Guys
When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this.


<select size='1' onchange="updatecodes()" name='reason_code_master'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

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

Hi,

i want to set an input value to the same value as the input selected from another input on the same form

so when the user selects input 1
i want the hidden input2 to get the same value

im guessing i use onsubmit because its hidden so there wont be a focus or blur

this would be part of the input

Code:

onsubmit="(this.value = this.othervalue)"

othervalue being the other input name="othervalue"

is that the correct syntax

I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries.

I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000.

Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items.

Any help would be appreciated. Thanks.

Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one?

Here is part of the javascript I have in my page head:

Code:

function getMgmtHours(str)
{
if (str=="")
  {
  document.getElementById("mgmthours").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("mgmthours").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}

function getDays(str)
{
if (str=="")
  {
  document.getElementById("mgmtdate").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("mgmtdate").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}

Here is the HTML/PHP portion being used:
PHP Code:
echo "<p>";
echo "Submit hours:";
echo "<form>";
echo "<select name='district' onchange='getMgmtHours(this.value)'>";
echo "<option value=''>Select a district:</option>
<option value='1'>1</option>
<option value='3'>3</option>
<option value='4'>4</option>";
echo "</select>";
echo "</form>";
echo "</p>"

echo "<p>";
echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>";
echo "Weekending Day: ";
echo "<select name='weekending' onchange='getDays(this.value)'>";
echo "<option value=''>Choose a Date:</option>";

while ($week < 32) {
    $nextsunday = strtotime("next Sunday");
    
    if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;}
    
    $weekending = date('M. d, Y', $timestamp);
    echo "<option value='" . $weekending . "'>" . $weekending . "</option>";
    $week = $week + 1;
}

echo "</select>";

echo "<div id='mgmtdate' />";
echo "<div id='mgmthours' />";
echo "</p>"; 


Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page.

I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list.

It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help.

<select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;">
<option>Loading</option>
</select>

Hi,

i have an input value array for customer ids, i also need to make a copy of that array into another input element on submit to use for another process.

So far here is what i have come up with regarding the js


the current html is this

Code:

<!-- original input -->

<input id="cb<?php echo $i;?>" name="cid[]" value="<?php echo $commissions[$i]['id'];?>" onclick="isChecked(this.checked);" type="checkbox" />


<!-- this is new html input which  is outside the $i loop that i need a copy of cid[] stored on submit

<input type="hidden" name="ids[]" onsubmit="valueTovalue();" />


<!-- here is the js so far --> 

<script type="text/javascript">

function valueTovalue()
{

 var valin = document.adminForm.cid.value;  //cid is the array cid[]
 document.adminForm.ids.value = valin; //copy the array to the new input element array ids

}

</script>

so basically if they click 1 cid then ids will also show 1, if they click all cid then ids will show all as well.

will that work the way i have it, am i even close here..

thanks

update: what i have seems to work fine for text values or string values but not for arrays, what am i missing that it wont copy an array?




Array
(
[cid] => Array
(
[0] => 1
)

[task] => remarksonly
[remark] => hhhyyy
[boxchecked] => 1
[ids] => Array
(
[0] =>
)

)




am i getting closer lol


Code:

function valueTovalue()
{
 var valin = cid.concat;  
 document.adminForm.ids.value = valin.concat; 

return(true);

this has to be close i hope

Code:

document.adminForm.ids.value = [].concat(document.adminForm.cid);

Hi all

can someone guide me (total JS newbie) on this presumably pretty easy task?

I have a "parent" page with some text inputs in it (a form). This is what I am after:
-when the user clicks a link it pops open a new window via JS - "child" (this is working).
-in the "child" window there are also some text inputs (another form) (done).
-when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window.

Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled!

I set up a test page to make this all easy to talk about:

http://www.yellow-turtle.com/testDumpMe_parent.html

Please let me know!
Thanks!
-John