|
JavaScript - Changing Inputs Displayed To User
Hi, I am a complete beginner at Javascript(started a few days ago) and was having trouble with some functions. I'm trying to get the inputs required to change based on an option selected in a drop down menu. I was intending to run different scripts based on whatever is chosen but when I ran a test using an alert function, I realized my code isn't working. I went online and found really confusing stuff like "running a for loop through an array to make a dynamic select feature". Still confused any help would be appreciated.
My code thus far: <html> <head> <title>Practice</title> <script language="javascript"> function myScript() { var loanType = document.form1.loan.options.text if (loanType == "Bank A") { alert("Working") } } </script> </head> <body> <form name="form1"> <select id="loan" name="loan" onchange="myScript"> <option></option> <option>Bank A</option> <Option>Bank B</Option> </select> </form> </body> </html> Reply With Quote 01-08-2015, 10:52 AM #2 Primus View Profile View Forum Posts New Coder Join Date Oct 2014 Posts 92 Thanks 0 Thanked 14 Times in 14 Posts Code: <script>
function myScript()
{
var selectedIndex = document.form1.elements.loan.options.selectedIndex; // returns 0-2 in this case
var loanType = document.form1.elements.loan.options[selectedIndex].value; // returns the value of the selected item
if (loanType == "Bank A")
{
alert("Working")
}
}
</script>
<form name="form1">
<select id="loan" name="loan" onchange="myScript()">
<option></option>
<option>Bank A</option>
<option>Bank B</option>
</select>
</form>
Maybe not the best way, but it does the trick. Reply With Quote 01-08-2015, 11:43 AM #3 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts You have quite a lot of obsolete code:- 1) It is obsolete to assign a name to a form and permitted only for the sake of backwards compatibility. 2) <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). 3) Scripts should normally be placed right in front of the </body> tag. Any script can optionally go in the head if you wrap it inside a load event listener so that it can't run before the page loads. 4) Use the value of a select box option, not the text. 5) It is recommended that you place the opening brace following the function, if, else, for, while, do, switch, and try statements on the same line and not on the following line. Apart from that every Javascript statement should be followed by a semi-colon (;). It is quite possible to disregard this advice, but if you do one day it will rise up and bite you in the undercarriage. Code: <html>
<head>
<title>Practice</title>
</head>
<body>
<form>
<select id="loan" name="loan" onchange="myScript()">
<option value = "">Chosoe...</option>
<option value = "Bank A">Bank A</option>
<Option value = "Bank B">Bank B</Option>
</select>
</form>
<script type = "text/javascript">
function myScript() {
var loanType = document.getElementById("loan").value;
if (loanType == "Bank A") {
alert("Working")
}
}
</script>
</body>
</html>
If you really want to use the option text ... Code: <html>
<head>
<title>Practice</title>
</head>
<body>
<form>
<select id="loan" name="loan" onchange="myScript(this)">
<option value = "">Choose...</option>
<option value = "Bank A">Bank A</option>
<Option value = "Bank B">Bank B</Option>
</select>
</form>
<script type = "text/javascript">
function myScript(element) {
var loanType = element.options[ element.selectedIndex ].text;
if (loanType == "Bank A") {
alert("Working")
}
}
</script>
</body>
</html>
The Warrington players can hang their heads high. - Commentator, BBC Radio 2 Similar TutorialsHello everyone! Hi, I am a complete beginner at Javascript(started a few days ago) and was having trouble with some functions. I'm trying to get the inputs required to change based on an option selected in a drop down menu. I was intending to run different scripts based on whatever is chosen but when I ran a test using an alert function, I realized my code isn't working. I went online and found really confusing stuff like "running a for loop through an array to make a dynamic select feature". Still confused any help would be appreciated. My code thus far: Code: <html>
<head>
<title>Practice</title>
<script language="javascript">
function myScript()
{
var loanType = document.form1.loan.options.text
if (loanType == "Bank A")
{
alert("Working")
}
}
</script>
</head>
<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript">
<option></option>
<option>Bank A</option>
<Option>Bank B</Option>
</select>
</form>
</body>
</html>
Reply With Quote 01-29-2015, 12:02 PM #2 vwphillips View Profile View Forum Posts Visit Homepage Senior Coder Join Date Mar 2005 Location Portsmouth UK Posts 4,540 Thanks 3 Thanked 513 Times in 500 Posts Code: <html>
<head>
<title>Practice</title>
<script language="javascript">
function myScript()
{
var s=document.form1.loan,loanType = s.options[s.selectedIndex].text
if (loanType == "Bank A")
{
alert("Working")
}
}
</script>
</head>
<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript();">
<option></option>
<option>Bank A</option>
<Option>Bank B</Option>
</select>
</form>
</body>
</html>
or better Code: <html>
<head>
<title>Practice</title>
<script language="javascript">
function myScript(s)
{
if (s.value == "Bank A")
{
alert("Working")
}
}
</script>
</head>
<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript(this);">
<option></option>
<option value="Bank A" >Bank A</option>
<Option value="Bank B">Bank B</Option>
</select>
</form>
</body>
</html>
I have the two functions below, I want to write a function that puts them into a chart, I have the chart sorted etc but just struggling with how to get the actual validated users inputs from these two functions into the chart, I've tried document.write('<td> $' + productIndex + '</td>'); into the chart but that wouldn't work anyway as there could be multiple inputs? Just need a way to get the output really. function getProductChoice(min, max) { var getProductChoice = function(min, max){ do{ var productIndex = parseInt(prompt('Enter your product choice; 0-5', '0')); } while( isNaN(productIndex) || productIndex < min || productIndex > max); }; getProductChoice(0,5); } function getProductQuantity(max) { do{ var productIndexQuantity = parseInt(prompt('How many would you like?', '0')); } while( isNaN(productIndexQuantity) || productIndexQuantity < 0 || productIndexQuantity > max); }; getProductQuantity(MAX_QUANTITY); Hi, I'm new here, and I'm a programming newb but am very interested in learning and possibly pursuing programming in the future. As such, I'm taking an intro to Javascript class at my university, and our homework is to make a function that when called upon makes a diamond out of *'s. It is supposed to do so by prompting a user for an int and then makes a diamond shaped object with the inputted number of stars in the middle of the diamond. an example of what this would look like (if a user entered in "5" to the prompt): *<br> ***<br> *****<br> ***<br> *<br> I am not sure how to set up this for loop, and have been trying so many different codes and have come nowhere close. Any help or insight would be so much appreciated. Here's part of the code, problem I have is I have it set up for 5 rows, I need it to be able to make more than this, but not sure how many more, this is dependent on user input, how should I go about this? Also how would I go about making the users orders correspond with the right item number? I'd need to sort the array somehow? document.write('<table border="1">'); document.write("<tr>"); document.write('<th colspan="5">ORDER</th>') document.write("</tr>"); document.write("<tr>"); document.write('<th align="left">Item #</th>'); document.write('<th align="center">Name</th>'); document.write('<th align="center">Price</th>'); document.write('<th align="center">Quantity</th>'); document.write('<th align="center">Total</th>'); document.write("</tr>"); document.write('<td align="center">0</td>'); document.write('<td>' + productName[0] + '</td>'); document.write('<td> $' + sausagePrice + '</td>'); document.write('<td> ' + orderItemQty[0] + '</td>'); document.write('<td> ' + sausageTotal + '</td I apologize for all the text I'm about to type, but I just want to make sure I explain my problem in detail. So I have created a simple Weather Forecast algorithm containing the JavaScript code that uses a prompt to allow a user to enter a temperature in degrees Celsius, and based on the degrees entered (temperature scale is below), the program will display one of the following messages based on the selection structure I have created: (Kindly find attached .txt file of my entire code, I wasn't able to upload an HTML file.) -18 degrees Celsius: "Bundle up! It's freezing out there!" -18 - 0 degrees Celsius: "Pretty cold with a chance of snow!" 15 degrees Celsius: "Don't forget your jacket. It's still chilly out!" 16 - 27 degrees Celsius: "Perfect, lovely weather... unless it rains." 28 - 35 degrees Celsius: "Nice and warn. Go for a swim." 35 degrees Celsius: "Really hot! Best to stay in air conditioning." HELP Now i want improve on the same program and let the user enter the degrees in either unit using a prompt to ask the user whether the entry is Celsius(C) or Fahrenheit (F) (F scale is below) and use the correct degree breakdown to display the same messages: Less than 0 degrees Fahrenheit: "Bundle up! It's freezing out there!" 0 - 32 degrees Fahrenheit: "Pretty cold with a chance of snow!" 33 - 59 degrees Fahrenheit: "Don't forget your jacket. It's still chilly out!" 60 - 80 degrees Fahrenheit: "Perfect, lovely weather... unless it rains." 81 - 95 degrees Fahrenheit: " Nice and warn. Go for a swim." Greater than 95 degrees Fahrenheit: " Really hot! Best to stay in air conditioning." I'd appreciate if anyone can help me with this. Again, I've attached my original file where the user can only enter in degrees Celsius and gets the corresponding messages. I have tested it and it works perfectly. Attached Files hourlyForecast1.txt (954 Bytes, 24 views) Is it possible to dynamically change the value of text on a page as the user types into a text box? E.g. like: You Are Typing: <script> var keyword = document.getElementById('string'); document.write(keyword); </script> Or I could probably insert it into a function and loop it over and over again or is there a better way? I'm trying to add a body class of 'day' if it's 6am-5pm and 'night' if it's 5pm-6am based on the user's local time. I tried the following but it didn't work. Any ideas? In the <head> Code: <script>
function setTimesStyles() {
var currentTime = new Date().getHours();
if(currentTime > 5 && currentTime < 17) {
document.body.className = 'day';
}
else {
document.body.className = 'night';
}
}
</script>
Code: <body onload="setTimeStyles();"> Also, is there a more elegant way to achieve what I need? Hi I am making a PC customization website, And I need help wit hthe inputs where you select the parts for the PC. Anyway, I need help for self updating inputs, Like if a user was to select a socket 775 processor, The form would automatically update the motherboard field from --Select a processor-- to a list of socket 775 motherboards. I am quite new at javascript I have never attempted to do anything like this myself, Although I don't know if this would need some PHP in here as well Anyway thanks in advance, Gergy Im trying to dynamically add more fields into my form. HTML: Code: <table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><input size="3" type="text" name="number" /></td>
<td><input type="text" name="title" /></td>
<td><input type="button" value="Add another text input" onClick="addInput('add_episodes', 'number');addInput('add_episodes', 'title');"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input name="entry_id" type="hidden" value="<?php echo $id; ?>">
<input class="input submit" type="submit" name="submit" value="Add <?php echo $type; ?>">
</td>
</tr>
</table>
Javascript Code: function addInput(divName, type)
{
var counter = 1;
var limit = 50;
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var tr.document.createElement('<tr>');
if(type == 'number')
{
var newdiv = document.createElement(element);
newdiv.innerHTML = '<input size="3" type="text" name="number" />';
document.getElementById(add_input).appendChild(newdiv);
}
if(type == 'title')
{
var newdiv = document.createElement(element);
newdiv.innerHTML = '<input type="text" name="title[]" />';
document.getElementById(divName).appendChild(newdiv);
}
counter++;
document.getElementById(add_input).appendChild(tr);
}
}
This is one of my first times working with javascript, usually i work with PHP. Im trying to add more input elements of Code: <tr> <td><input size="3" type="text" name="number" /></td> <td><input type="text" name="title" /></td> </tr> And don't reply that i should make the names into arrays for me to submit more stuff, I'll change that later. But for simplicity and a straightforward problem. I can't get it add more form elements in the correct place or nothing happens at all. Hi Folks I am trying to write a js that validates a form with two text inputs. The two inputs a 'D_techA' and 'D_techB'. I just want to add up (sum) the two input fields (which must be positive numbers) and make sure that they add up to exactly 100 (not more and not less). If they do not add up to 100, then an alert should pop up that says "The two values must add up to exactly 100." I have tried and tried to write a js that does this validation (looking at numerous validation scripts posted in this forum and elsewhere) and I just cannot seem to make it work. I would very much appreciate any suggestions! Thanks! The html code for my very simple form is: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <label>Investment in Tech A <input name="D_techA" type="text" id="D_techA" /> </label> <label>Investment in Tech B <input name="D_techB" type="text" id="D_techB" /> </label> <p> <input name="Submit" type="submit"/> </p> </form> </body> </html> Is there a way to call everything from one element's onKeyUp (or onBlur, etc.) in another element's onKeyUp, etc? For example, I have something like this: <input type="text" name="val_1" onBlur="sum(['val_2','val_3'],'val_1');"> I would like to be able to do something like this: <input type="text" name="val_4" onBlur=" document.getElementById('val_1').onBlur; percentage('val_2','val_3','val_4');"> But that doesn't seem to work. Is there a way to do this? Thank you! Figured it out. Thanks
I want to make a script that will insert all text type inputs into an array. From there I want to be able to call them and edit them. Here is what I have so far and it is not working. var phone1 = '702' var inputArray = new Array(); var inputs = document.getElementsByTagName('input'); inputs; if (input.type == 'text') { inputArray.push(inputs.id); } inputArray.reverse(); inputArray[0].value = phone1; I need to style a checkbox, so I made it into two images behind a form with hidden inputs. On click the form takes input from the other form into the hidden fields and POSTs it. Then I use PHP to grab that POST and put it back into the original form. Here are some snippets of what I am trying to do: First form input: PHP Code: <input type="text" name="email" id="email1" value="<?php if(isset($_POST['email2'])) { echo $_POST['email2']; } ?>" style="height:25px;width:270px;" /> Second form input: PHP Code: <input type="hidden" name="email2" id="email2" /> Second form submit image button: PHP Code: <input type="image" src="img/Boxchecked.jpg" value="submit" onclick="fname2.value = fname1.value; lname2.value = lname1.value; email2.value = email1.value" width="20" height="20" /> The forms work fantastic on everything but IE, which does not save the field values. How do I fix the onclick event to save them in IE? Help is much appreciated. I'm having an issue adding focus() to an input that is dynamically created with jquery. I'm still learning, so I've mixed in traditional js with my jquery code because it's easier for me to understand. Anyhow document.getElementById(name).style.backgroundColor="#72A4D2"; successfully changed the background of the input ID, but document.getElementById(name).focus(); does nothing. I know that this is the correct code because if I hard code an input into the form (which you can see I've commented out below, such as document.getElementById('password').focus(); it refocuses successfully on that input. Thus I'm stumped yet again. Anyone know how to deal with this issue? JS: Code:
$(function() {
var i = $('input').size() + 1;
$('a.add').click(function() {
$('<p>Username ' + i + ': <input type="text" id="user' + i + '" name="user' + i + '" onblur="javascript:checkl(this.name, this.value);"></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
i++;
});
});
function checkl(name, value){
var errors=new Array();
var x;
var msg = "There were some problems...\n";
if (value==="") {
errors['blank'] = "Field must not be blank";
}
for (x in errors)
{
msg += "\n"+errors[x];
}
if (!(x==undefined)){
alert(msg);
document.getElementById(name).style.backgroundColor="#72A4D2"; //works, changed input background successfully
document.getElementById(name).focus(); // does NOT work, no focus
// document.getElementById('password').focus(); // successfully refocuses on hard coded 'password' input
}else{
document.getElementById(name).style.backgroundColor="";
}
}
HTML: Code: <a href="#" class="add" id="1"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> <form id="target" name="target" action="post.php" method="post" onsubmit="return validate(this);"> <div id="inputs"> <!-- dynamically created inputs here --> </div> <!-- Password: <input type="password" id="password" name="password" size="10"> --> <input type="submit" value="Send"> </form> I have taken lots of programming classes, but am now taking my first web programming class and I am getting sooooo frustrated. I have done lots of looking on the web, but am still unable to figure out why I can not make this simple assignment work. I just need some help with getting something to happen when the user hits submit. What I really want is for a new page to appear with the message using the user inputs, but I would be very happy with just getting the input to appear in the text area that I put in or even for the alert box to pop up with the input. I can work on validation code after I can get some kind of output to work..... I posted everything (due to it's small size), including my attempts to see what is working. Here is the code I have written: Code: <html>
<head>
<title>Name and Age</title>
<script type="text/javascript">
<!--
function Submit()
{
alert("Does this do anything?");
var name = document.forms['NameAge'].elements[0];
var year = document.forms['NameAge'].elements[1];
var date = new Date();
var curr_yr = date.GetFullYear();
var age = (curr_yr - year)
alert("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
/*if (year > curr_yr)
{
alert("You must enter a valid year!");
}
else
{
document.writeln("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
}*/
document.forms['NameAge'].output.value = "<h3>Hello, " + name + ", you are " + age + " years old."</h3>";
}
-->
</script>
</head>
<body>
<h1>Name and Age</h1>
<form name="NameAge" onsubmit="Submit()">
<p align="left">Please Enter Your Name:
<input id="name" maxlength="32" size="24" />
</p>
<p align="left">Please Enter the Year You Were Born:
<input id="year" maxlength="4" size="24" />
</p>
<input type="submit" value="Submit" /><br />
<textarea cols="10" rows="3" name="output"></textarea>
</form>
</body>
</html>
Tearing my hair out here. I've got a table where I'm trying to append additional input and file fields when someone clicks a link. The appending works fine, but when I click submit, none of the appended values are being passed through. I've tried it two different ways (both being appended to the "moreSwatches" table cell: Code: function addSwatch2()
{
var moreSwatches = document.getElementById('moreSwatches');
imgBox = document.createElement("input");
//imgBox.type = 'file';
//imgBox.name = 'swatch[]';
imgBox.setAttribute("type","file");
imgBox.setAttribute("name","swatch[]");
moreSwatches.appendChild(imgBox);
textBox = document.createElement("input");
textBox.type = 'text';
textBox.name = 'swatchname[]';
moreSwatches.appendChild(textBox);
setBR = document.createElement("br");
moreSwatches.appendChild(setBR);
}
function addSwatch()
{
var moreSwatches = document.getElementById('moreSwatches');
var newDiv = document.createElement("div");
addText = '<input type="file" name="swatch[]" style="width: 300px"> <input name="swatchname[]" size="25"><br>';
newDiv.innerHTML = addText;
moreSwatches.appendChild(newDiv);
}
If I hardcode a second set of inputs below the first, it works fine. Anything that is appended is getting ignored. Anyone got any ideas? Hi, I tried displaying few images as MENU using Javascript. These images are showed normally in Firefox and chrome except Internet Explorer. Help plz
I want to make a search form where inputs only appear if a certain selection has been made. For example the user selects "Green" then the input "X" appears, and if the user clicks "Black" then input "Y" appears. How can this be done? If so, can someone give me a basic example in code that I can use to copy off?
Is it possible to have an input that points to some other function? For example: Code: function someFunction() {
alert('It worked.');
}
function doAnotherFunction(doIt, otherFunction) {
if (doIt == true) {
otherFunction();
}
}
<input type="button" value="test" onClick="doAnotherFunction(true, someFunction());">
Or would I need a switch statement and have all the various functions hardcoded? |
|||||||