Changing an input field with JS not working - javascript

I'm stumped as to why when I change the dropdown value, the input field isn't populated with 'testing':
function changeSubject() {
document.getElementByID('cf7-subject').value = 'testing';
}
<form>
<select onchange="changeSubject()">
<option value="">Select an Option</option>
<option value="General Inquiry">General Inquiry</option>
</select>
<input id="cf7-subject" value="">
</form>

There are 2 issues in the jsfiddle above
Replace getElementByID --> getElementById.
Refere MDN docs for more info
In the fiddle, JS is loading after the view is resolved. Hence, the error is thrown in the console that says
Uncaught ReferenceError: changeSubject is not defined
There are 2 options to resolve this error:
Option 1 - Inline JavaScript
<script type="text/javascript">
function changeSubject() {
document.getElementById('cf7-subject').value = 'testing';
}
</script>
<form>
<select id="cf7-selector" onchange="changeSubject()">
<option value="">
Select an Option
</option>
<option value="General Inquiry">
General Inquiry
</option>
</select>
<input id="cf7-subject">
</input>
</form>
Option 2 - Change the value of LOAD TYPE in your jsfiddle as shown below
Hope this helps!

Related

Pass the text from a form Select-Option to a text input field

I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.
I have posted a raw example of the form to see if anyone can lead me to water. Any help wouold be appreciated.
HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
</body>
</html>
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value, yet it's not difficult at all.
selectElement.options will give you an array of ALL the options inside the select element.
You will find the selected option's index to be selectElement.selectedIndex.
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex].
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text
Here's the code:
// THIS CONSTANT REPRESENTS THE <select> ELEMENT
const theSelect = document.getElementById('fruitSelector')
// THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT
// IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION
theSelect.addEventListener('input', function() {
// THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT
let selectedOptText = theSelect.options[theSelect.selectedIndex].text
// FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT:
document.querySelector('.hiddenField').value = selectedOptText;
})
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
well if you want to pass the text portion you should add the names as the values too like
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---

Using a PHP input field to fill another [duplicate]

I am trying to call a javascript function from the onchange attribute of the select tag ! My issue is that I am passing the name attribute of the select to the function which always go null.
<body>
<form action="" method="post">
<select name="slct" id="name" onchange="rohan('measurement_conversion', '<?php echo isset($_POST["slct"])?$_POST["slct"]:"null" ?>')">
<option value="yes" selected="selected"> yes </option>
<option value="nopes"> nopes </option>
<option value="may be"> May be </option>
<option value="dont know"> dont know </option>
</select>
</form>
<div id="abc">
</div>
</body>
And here my javascript function
<script>
function rohan(var1, var2)
{
document.getElementById("abc").innerHTML=var1 + " " + var2;
}
</script>
It always prints null..
Any help will be appreciated !
HTML:
<body>
<form action="" method="post">
<select name="slct" id="name" onchange="rohan(this.value)">
<option>Select</option>
<option value="yes" selected="selected"> yes </option>
<option value="nopes"> nopes </option>
<option value="may be"> May be </option>
<option value="dont know"> dont know </option>
</select>
</form>
</body>
JS:
<script>
function rohan(value)
{
//you can get the value from arguments itself
alert(value);
}
</script>
PHP is run on the server before JavaScript is ever run in the browser. It doesn't get re-evaluated when the user changes the selected item.
No put in tag HTML attribute javascript, onchange is better in the script:
<script>
var b=document.getElementById('name');
b.onchange=function (){
var a=document.getElementById('name').value;
console.log(a);
}
</script>

Print only selected item from drop down

I have a select input on my page. When I print the page all the options of select get printed instead of the one that is selected. How do I make it so that only the option selected is printed?
<select class="form-control" id=myID onchange="update_status(this)">
<option value="1" selected>Pending</option>
<option value="2">Under-Preparation</option>
<option value="3">Delivered</option>
</select>
Print the selected choice's value like following snippet. Run code snippet for demonstration.
function update_status(selected_option){
console.log(selected_option.value);
}
<select class="form-control" id=myID onchange="update_status(this)">
<option value="s1" selected>Pending</option>
<option value="s2">Under-Preparation</option>
<option value="s3">Delivered</option>
</select>
It works fine...
javascript print() funtion just shows the rendered[visible] items in pdf preview.
Here is example you can visualize.
This might helps. Have fun.
This can be done as below-
function update_status(currentObj){
console.log(currentObj.options[currentObj.selectedIndex].value);
}
JS Fiddle
Thanks !!
Add a this.value instead this, checkout the snippet.
function update_status(vm) {
console.log(vm);
}
<select class="form-control" id=myID onchange="update_status(this.value)">
<option value="1" selected>Pending</option>
<option value="2">Under-Preparation</option>
<option value="3">Delivered</option>
</select>

javascript enable and disable a combobox

I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}
You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/
Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});

onchange event in select tag!

The following code should give me a 1 in ParentSelect if I change the option in the menu, but I am getting a 0. Can anyone tell me what is the error?
<input type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="document.forms[0].elements['ParentSelect']=1" >
<option value="NULL">NULL</option>
...
</select>
Here, I have two tables in the database. They contain some fields like ServerName, etc..
Suggestions?
You are directly assigning the value 1 to the property document.forms[0].elements['ParentSelect'], whereas you presumably mean to change the value of the element, which would be achieved like this:
document.forms[0].elements['ParentSelect'].value = 1
I agree with some of the other comments concerning the lack of valid HTML strucutre, and I would add that if you are going to reference the field via document.forms[0], you may as well give the field an id property so you can simply use 'document.getElementById` so your code works regardless of the other forms on the page. Anyway, using your method, here is the complete code:
<form>
<input type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="document.forms[0].elements['ParentSelect'].value=1" >
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
Using an id instead:
<form>
<input id="parentSelect" type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="var e = document.getElementById('parentSelect'); if (e) e.value=1;" >
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
document.forms[0].elements['ParentSelect'] returns whole input, if you want to set it's value use
document.forms[0].elements['ParentSelect'].value = 1

Categories