i am trying to find a way to allow a user to click items in a combo box and have its value populate an input field and also alert "work stop" or "work start" message when appropriate option is selected. But my code is not working. Please Help!
Here is my code:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
test = frm.stop.value;
alert('work' test);
frm.eStop.value = test;
}
</script>
</body>
</html>
Thanks in Advance
http://jsfiddle.net/snHQY/
<form>
<select name="sel1" id="select" onchange="populateField();" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField() {
test = document.getElementById('select').value;
alert(test);
document.getElementById('eStop').value = test;
}
</script>
You can do it using the selectedIndex if you want as well,
<form>
<select name="sel1" id="select" onchange="populateField(this);" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField(sel) {
sel.form.eStop.value = 'work ' + (sel.selectedIndex == 1 ? 'Stop' : 'Start');
}
</script>
http://jsfiddle.net/cnpuM/
Your code has two errors. You can not reference an element by its value like this test = frm.stop.value; instead use test = frm.sel1.value; . Another error is in this line alert('work' test);. Here you are joining a string "work" with a variable "test". In java script where ever you join two or more variables or strings and variables you alway have to join them with + sign like this:alert('work ' + test);. Remaining code is ok:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
var test = frm.sel1.value;
alert('work '+ test);
frm.eStop.value = test;
}
</script>
</body>
</html>
You can also use selectedIndex property of "sel1" to do the same.
in your select you can add to onchange's and onkeypress to the populateField's function this as the objects reference.
<select name="sel1" onchange="populateField(this)" onkeypress="populateField(this)">
Now you can reference the select from o. to pass the selected value to the alert dialog and the input field.
function populateField(o){
alert("work " + o.value);
// use regular W3C DOM syntax for element referencing the input and populate it with the select objects selected options value
document.getElementById("eStop").value = o.value;
}
Related
I've created functionality to move items from the left -> right, and vice versa. On top of that, I am added the option values of each item into a hidden input box, so I can later submit it to the server for processing. It seems that when I try to add more than one item at a time, only the first one is being added to the hidden input box though.
In the end, my hidden input field should look like: 3233,2332,3234,1212,112
Since I'll accept the parameters in the Ruby on Rails server side to parse and do whatever to (unless there's a better option).
Here's my current code:
$("#btnLeft").click(function(){
var selectedItem = $("#hosts_assigned option:selected");
$("#hosts_available").append(selectedItem);
$("#hosts").remove(selectedItem.val());
});
$("#btnRight").click(function(){
var selectedItem = $("#hosts_available option:selected");
$("#hosts_assigned").append(selectedItem);
var current_hosts = $("#hosts").val();
$("#hosts").val(current_hosts + "," + selectedItem.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="hosts_available"size="30" multiple="multiple">
<option value="1222">1.1.2.2</option>
<option value="1232">1.1.2.2</option>
<option value="1242">1.1.2.2</option>
<option value="1252">1.1.2.2</option>
</select>
<select id="hosts_assigned" size="30" multiple="multiple">
<option value="1111">1.1.2.1</option>
</select>
</form>
<button type="button" id="btnRight">>></i></button>
<br/>
<button type="button" id="btnLeft"><<</i></button>
<br/><br/>
<input type="text" id="hosts" />
You are getting more than one.
You need to loop. you also need to loop after removing
function getHosts() {
var current_hosts=[];
$("#hosts_assigned option").each(function() {
current_hosts.push($(this).val());
});
return current_hosts.length>0?current_hosts.join(","):"";
}
$("#btnLeft").click(function() {
$("#hosts_assigned option:selected").each(function() {
$("#hosts_available").append(this);
})
$("#hosts").val(getHosts());
});
$("#btnRight").click(function() {
$("#hosts_available option:selected").each(function() {
$("#hosts_assigned").append(this);
});
$("#hosts").val(getHosts());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="hosts_available" size="30" multiple="multiple">
<option value="1222">1.1.2.2</option>
<option value="1232">1.1.2.2</option>
<option value="1242">1.1.2.2</option>
<option value="1252">1.1.2.2</option>
</select>
<select id="hosts_assigned" size="30" multiple="multiple">
<option value="1111">1.1.2.1</option>
</select>
</form>
<button type="button" id="btnRight">>></i>
</button>
<br/>
<button type="button" id="btnLeft"><<</i>
</button>
<br/>
<br/>
<input type="text" id="hosts" value="" />
I am trying to pass-on values from a dropdown to the textarea.
The non-working code is:
<form name="f">
<textarea id="change" name="change"></textarea>
<br/>
<input id="docname" name="docname" type="text" list="docs" />
<datalist id="docs">
<option value="data1">
<option value="data2">
<option value="data3">
<option value="data4">
<option value="data5">
<option value="dta6">
</datalist>
</form>
<script type="text/javascript">
document.forms['f'].elements['docname'].onchange = function(){
document.getElementById("change").value += this.value + ', ';
document.forms['f'].elements['docname'].value = '';
};
</script>
However if I use Input instead of Textarea the code works as intended.
The working code:
<form name="f">
<input id="change" name="change" value="">
<input id="docname" name="docname" type="text" list="docs" />
<datalist id="docs">
<option value="data1">
<option value="data2">
<option value="data3">
<option value="data4">
<option value="data5">
<option value="dta6">
</datalist>
</form>
<script type="text/javascript">
document.forms['f'].elements['docname'].onchange = function(){
document.getElementById("change").value += this.value + ', ';
document.forms['f'].elements['docname'].value = '';
};
</script>
How can I use Textarea in place of Input and make the code work. I need to use textarea as I need multiple lines of text.
PS: I am trying to create this http://jsfiddle.net/sumitcbrty/7zqn6j3u/2/ but just want textarea instead of using input field
You should use innerHTML property rather than the value property.
You should put logs in your code to debug it and view those messages in Developers Console.
EDIT:
Change in JS Code:
document.getElementById("txtArea").innerHTML += this.value + ', ';
Here is the working plunkr
I have two dropdown menus named date and time respectively. I want to get the
text from the option tag when I click a button, but the javascript function does not seem to work. I 've found similar questions (and answers) about this but nothing worked. The code is below:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function collectData() {
var index = document.getElementById("date").selectedIndex;
var date = document.getElementById("date").options[index].text;
window.alert("You selected: " + date);
}
</script>
</head>
<body>
<select name="date">
<option value="1">date 1</option>
.....
</select>
<select name="time">
<option value="1">time 1</option>
.....
</select>
<button type="button" onclick="collectData()">Get data</button>
</body>
</html>
You're selecting the element by id but you didn't assign the id anywhere.
You need to add the correct id to the item:
<select id="date" name="date">
....
<select id="time" name="time">
Or you could select the items by name:
var index = document.getElementsByName("date")[0].selectedIndex;
Note: getElementsByName returns an array, thats why the [0] was added to select the first item that has that name.
Change code to
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function collectData() {
var e = document.getElementById("date");
var strUser = e.options[e.selectedIndex].value;
window.alert("You selected: " + strUser);
}
</script>
</head>
<body>
<select name="date" id="date">
<option value="1">date 1</option>
..
</select>
<select name="time">
..
</select>
<button type="button" onclick="collectData()">Get data</button>
</body>
</html>
Try this:
function collectData() {
var ddl = document.getElementById("dateSelect");
var text = ddl.options[ddl.selectedIndex].text;
window.alert("You selected: " + text);
}
<select id="dateSelect" name="date">
<option value="1">date 1</option>
<option value="2">date 2</option>
<option value="3">date 3</option>
</select>
<button type="button" onclick="collectData()">Get data</button>
Here a CodePen
you are using getElementById('date').so add id attribute to select element.
I have a HTML form which changes its form action based on the drop down selection but input name remains same.
Here is my HTML:
<form action="car.php" method="GET">
Select Your Option :
<select onChange="this.form.action=this.options[this.selectedIndex].value;">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="Value" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
If I select Car Name and enter Maruti then value is passed like this:
http://www.mywebsite.com/car.php?Value=Maruti
If I select Bike Name and enter Honda then value is passed like this :
http://www.mywebsite.com/bike.php?Value=Honda
My problem is I have to name the column as "Value" in all the 5 database which stores all the information regarding all this, which I want to avoid.
I want, If I select Car Name and enter Maruti then value should pass like this
http://www.mywebsite.com/car.php?car=Maruti
If I select Bike Name and enter Honda then value should pass like this
http://www.mywebsite.com/bike.php?bike=Honda
What changes should be made in the code to achieve this goal?
If this can also happen then its very nice otherwise no problem.
In the form it is written Enter your query. I want the same change to happen here. If I select Car Name then it should be Enter you car. If I select Bike Name then it should be Enter your bike... and so on.
UPDATE
Little modification I need. When selecting car, the input name is changing to car, the form action is changing to car.php and query to Enter your car. But If I want to change the name like this then what should I do? When I will select anything say bike then form action will be changed to bike.php, But I want input name to be different say USY and Enter your bike to Enter your Serial No. What should I do ?
I have updated the code now and got ur exact requirement now and i hope this will help you
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("#input1").attr("name",res[0]);
$(".title").html("Enter your "+res[0]+" Name."); // Add this below $("input").attr("name",res[0]);
if(res[0]=='bike')
{
var title2="XYZ";
var title3="Serial No";
}
else if(res[0]=='laptop')
{
var title2="ABC";
var title3="Model No";
}
else if(res[0]=='place')
{
var title2="KLM";
var title3="Area";
}
else if(res[0]=='mobile')
{
var title2="FGH";
var title3="Brand";
}
$("#input2").attr("name",title2);
$("#input3").attr("name",title3);
$(".title2").html("Enter your "+title3);
});
});
</script>
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
<span class="title2">Enter your Color</span>
<input name="WER" id="input2" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
I advise you to not use JavaScript embedded into HTML attributes. Other than that, you can change the name attribute in the same change handler where you're modifying the action.
document.getElementById('Type').addEventListener('change', function(evt) {
var type = this.selectedOptions[0].value;
console.dir(this);
document.getElementById('Value').setAttribute('name', type);
document.getElementById('QueryName').textContent = type;
this.form.action = type + ".php";
});
<form action="car.php" method="GET">
Select Your Option :
<select id="Type">
<option value='car' selected>Car Name</option>
<option value='bike'>Bike Name</option>
<option value='laptop'>Laptop Name</option>
<option value='place'>Place Name</option>
<option value='mobile'>Mobile Name</option>
</select>
Enter your <span id="QueryName">car</span>
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
EDIT: If you want everything to be different as said in comments, you can use an object to hold the values. For example,
var setup = {
car: {
action: 'mycar.php',
param: 'DFS',
query: 'color'
},
...
};
and then instead of directly using the option's value, pull from this object based on the selected option.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("input").attr("name",res[0]);
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
</html>
I have used jquery here some few changes in html try it out this one
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
And for Jquery you can use this one
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("input").attr("name",res[0]);
});
});
</script>
This works perfectly for me Enjoy :)
I have this html with javascript, but I don't know why it's not working. It's right now supposed to calculate the values of the two textboxes when the button is pressed. However nothing is happening.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Räpellys 2</h1>
<select id="mathType">
<option value="0">Addition</option>
<option value="1">Subtraction</option>
<option value="2">Multiplication</option>
<option value="3">Division</option>
<option value="4">Shift Left</option>
<option value="5">Shift Right</option>
<option value="6">Increment</option>
<option value="7">Decrement</option>
<option value="8">AND</option>
<option value="9">OR</option>
<option value="A">XOR</option>
</select>
<p></p>
<form>
Value 1: <input type="text" id="val1" value=""></input>
<p></p>
Value 2: <input type="text" id="val2" value=""></input>
</form>
<p></p>
<button onclick="mathFunc">Calculate!</button>
<p></p>
<script>
function mathFunc() {
var box1 = document.getElementById("val1").value;
var box2 = document.getElementById("val2").value;
if (document.getElementById("mathType").value == 0) {
document.write(box1 + box2);
}
}
</script>
<noscript>Java is required to display this element!</noscript>
</body>
</html>
The issue is that the function should be called on click: onclick="mathFunc()".
Generally, I would recommend you not to use document.write in the code but for debugging purposes use browser console and console.log function.
MDN: https://developer.mozilla.org/en/docs/Debugging_JavaScript#Console.log_in_Browser_Console
the <form> tag should contain the form elements...
eg
<form>
<select...
then I'd also make sure I don't get the string value of the input fields byt wrapping them with parseFloat(). eg:
var box1 = parseFloat( document.getElementById("val1").value ) ;
you also need to call the function as a function, basically what VisioN said above:
onclick="mathFunc()"