|
JavaScript - Change Input Value Based On Select Value?
Hello, 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" /> Similar TutorialsHi, 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'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>
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. 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 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> Dear expert (Ok, i am new to this and should maybe not address this as a letter ) I hope someone can help me ... this is what i want to achieve (I am using frontpage) I want to create a table (this i can do!) that require a user input (number of guests). It then has SEVERAL options: - Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later) - Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation. a number of the above options, and a grand total on the bottom. I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works Can someone PLEASE help me, or point me in the right direction? (I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn) Below is a link to the example .. http://www.ouma-se-kombuis.co.za/test.html Thank you! Hi there, I'll try to be brief: When a user submits a website in the input field on my site, I'd like there to be a background process that takes a screenshot of that website and then displays that image to the user. This website does it perfectly. The user writes the website to the right, and the screenshot is displayed to the left. I'm looking for a free alternative, and read that perhaps webkit(s) might be the solution? I'm a total newbie when it comes to this so any feedback is gold to me. Thank you so much guys/gals. Ok so let's say I have this dropdown with a list of these items: PALCO TRIBUNA ORO And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how? Thanks for any help in the subject. Hi all, I am trying to find out if it's possible to auto populate a text input based on the value of another. e.g. there is an input called name.. the user completes this and enters something like John, then in the same form there is another input called username. Once the person enters John in the name field, the username automatically displays John. I'm not sure how doable this is, I'm not very familar with Javascript, so any advice would be greatly appreciated. Many thanks, Greens85 I have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution? I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait) Code: <li class="frame" id="sm">
<div class="frm" id="frame1">
<img src="image.jpg">
</div>
</li>
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'm trying to build up a multi-select filter with checkboxes. I found few good scripts but I've got a problem to adapt them.. The script below can filter results based on criteria (that you can select via checkboxes). The results displayed are checked or unchecked boxes. What I want is : display results with div (for ex:<div>result1</div>) and not checkbox. How can I do that? Code: <script type="text/javascript" src="js/jquery.js.css"></script>
<script type="text/javascript">
$(function() {
$('#search input:checkbox').click(function() {
var classes = $('#search input:checkbox:checked').
map(function() { return $(this).val(); }).get().join('.');
classes = (classes ? '.' : '') + classes;
$('#results input:checkbox').attr('checked', false).
filter(classes).attr('checked', true);
});
});
</script>
</head>
<body>
<div id="search">
<fieldset>
<label><input type="checkbox" value="animal"> Animal</label>
<label><input type="checkbox" value="vegetable"> Vegetable</label>
</fieldset>
<fieldset>
<label><input type="checkbox" value="small"> Small</label>
<label><input type="checkbox" value="large"> Large</label>
</fieldset>
</div>
<div id="results">
<p><input type="checkbox" class="small animal"> Cat</p>
<p><input type="checkbox" class="medium animal"> Tiger</p>
<p><input type="checkbox" class="large animal"> Elephant</p>
<p><input type="checkbox" class="small vegetable"> Pea</p>
<p><input type="checkbox" class="large vegetable"> Pumpkin</p>
</div>
</ul>
</body>
</html>
Thanks for your help Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load. Code: <select name="Event_Type_ID">
<option value="1">Choice A</option>
<option value="2">Choice B</option>
<option value="3">Choice C</option>
</select>
<div id="showme">
Content to show if EITHER Choice B or C is chosen. Otherwise this div should be hidden.
</div>
Can anyone lead me in the right direction? Thanks! So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options. here is the JS code: Code: <script language="JavaScript">
function ShowMenu(num, menu, max)
{
for(i = 1999; i <= num; i++){
var menu2 = menu + i;
document.getElementById(menu2).style.display = 'block';
}
var num2 = num;
num2++;
while(num2 = max){
var menu3 = menu + num2;
document.getElementById(menu3).style.display = 'none';
num2=num2+1;
}
}
</script>
This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that. I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class. Thanks in advance for any help! Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Hi Guys, I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need. Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box. For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines. Below is the HTML to give you an idea of what I mean. Code: <table> <tr> <td> </td> <td><label class="bold">Yes</label></td> <td><label class="bold">No</label></td> </tr> <tr> <td><label for="property_q1"> - Is this your house?</label></td> <td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td> <td><input name="property_q1" id="property_q1" type="radio" value="No" /></td> </tr> </table> <br /> <div id="fine">It's fine, don't worry about filling it in.</div> <div id="fill" style="display:none">Please fill in the form below.</div> <table> <tr> <td> </td> </tr> <tr> <td><textarea name="info" id="info" cols="60" rows="5"></textarea></td> </tr> </table> <input type="submit" /> I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document. Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation) On HTML form: >drop down list (name courseName, value of selections 1,2,3,4) > radio button (name returnStudent, value of selections 1,2) > radio button (name bookNeeded, value of selections 1,2) Table (name totalprice) at the bottom of the form: price1: price of courseName plus returnStudent (td with name tuitionprice) price2: price of bookNeeded (td with name bookprice) Total of the above (td with name totalprice) This is what I am trying to make work... Code: var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
if (selectedCourse == "1" && selectedStudent =="1")
{
document.write("12345");
}
if (selectedCourse == "1" && selectedStudent =="2")
{
document.write("54321");
}
}
Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script> I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful! thanks anyway
|
|||||||