I have an understanding or css and html, but I'm quite new to JavaScript...
So, I have a div that has two functions. (var selection = a[selection].innerHTML;) is where the problem is, and I'm trying to get (bread)(milk)(cheese)
My HTML
function PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV_MOUSEDOWN() {
//disable div
var PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV = document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV');
var a = PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV.getElementsByTagName("a");
var selection = a[selection].innerHTML;
console.log("select = " + selection);
document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER').value = selection;
PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV.style.cssText = 'display: none;';
}
<input type="text" class="CAPTURE_TB" placeholder="ACCOUNT NUMBER" id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER">
<div id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV" class="CAPTURE_SEARCH" style="display:none;">
CHEESE
MILK
BREAD
</div>
In the HTML, I'm pulling the page with...
<script>
require('./UniWindow.js')
</script>
Inside 'UniWindow.js':
//PP_BUDGET_CLIENT_CONTROLLS
var PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER = document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER');
//divs
var PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV = document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV');
//PP_BUDGET_CLIENT_EVENTS
PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER.addEventListener('keyup', PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_ONKEYUP);
PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV.addEventListener('mousedown', PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV_MOUSEDOWN)
//PP_BUDGET_CLIENT_FUNCTIONS
so #chrisG suggested
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
but electron does not support this feature. so I have created my own but if anyone could help even if i can somehow pass the variable to the method in the background.
You need to create function that assign some variable or just set you div value to text of selection and bind that function to each option onClick.
<input type="text" class="CAPTURE_TB" placeholder="ACCOUNT NUMBER" id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER">
<div id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV" class="CAPTURE_SEARCH" style="display:block;">
<a name="test" href="#CHEESE" >CHEESE</a>
<a name="test" href="#MILK" >MILK</a>
<a name="test" href="#BREAD" >BREAD</a>
</div>
<script>
function Choose(){
document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER').value = this.text;
}
var elements = document.getElementsByName("test");
for (var i = 0; i < elements.length; i++)
{
elements[i].addEventListener("click", Choose, false);
}
</script>
Possible duplicate of: setting content between div tags using javascript
Try this:
document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER').innerHTML = selection;
Related
I am working on a web form and here i want to make it so that you can select one of the three given types of options of contact and based on it a respective input field appears.How can i achieve that?
<select id="contact">
<option value="address">Address</option>
<option value="phone">Phone number</option>
<option value="website">Website</option>
</select>
i tried this at first but didnt know how to proceed further:
<form name="address" id="address" style="display:none">
<input type="text" name="address_"><br>
</form>
<form name="phone" id="phone" style="display:none">
<input type="text" name="phone_"><br>
</form>
<form name="website" id="website" style="display:none">
<input type="text" name="website_"><br>
</form>
Add an onselect handler to the option fields. Then inside the handler, call a function to append a dom node. Something like this:
<option value="address" onselect="handleSelection">Address</option>
function handleSelection() {
document.body.appendChild(someDomNode)
}
It's better to set the onchange EventListener to the parent <select id="contact"> element than it is to set a onselected or some other EvenListener to each of the <option> elements.
Note: I separated the javascript logic a little bit so it's easier to read.
document.getElementById('contact').addEventListener('change', function(e){
let value = e.target.value;
removeCreatedElements(); // remove all previously added, if any, before adding a new one
let input = createElement(value);
document.body.appendChild(input);
input.style.display = "block";
})
function createElement(value) {
let input = document.createElement("input");
input.type = "text";
input.id = value;
input.classList.add("dynamically-added");
input.placeholder = value;
return input;
}
function removeCreatedElements() {
let inputs = document.querySelectorAll(".dynamically-added");
for(let i=0; i < inputs.length; i++) {
document.body.removeChild(inputs[i]);
}
}
#contact {
margin-bottom: 40px;
}
<select id="contact">
<option value="address">Address</option>
<option value="phone">Phone number</option>
<option value="website">Website</option>
</select>
Basically, I want to make a site with a button that repeatedly asks user for input. However, one of the inputs that the site asks for involves a select field and depending on the select field, have a corresponding text field appear or dissapear(values none). My javascript utilizes a for loop as the user can repeatedly press the button to add more and more select fields( and corresponding text field).
Here is jsfiddle
Below is the example code of what I'm trying to do.
HTML
<div><select class="DISPLAYTYPE" id="QBox" data-fieldtype="P">
<option value = "text">TextBox</option>
<option value = "check">CheckBox</option>
<option value = "radio">Radio</option>
</select></div>
<input type="number" min="1" value="LENGTH" class="quantumBox" id="P">
JAVASCRIPT
var textBoxList = document.getElementsByClassName("DISPLAYTYPE");
for (var i=0; i<textBoxList.length;i++){
textBoxList[i].addEventListener('change', function(){
var subParam = textBoxList[i].options[textBoxList.selectedIndex].value;
if(subParam ="text"){
//make ONLY corresponding input box appear
}else{
//make ONLY corresponding input box dissapear
}
})
};
EDIT: This is the Structure
[table id="rootPlacement"]
//insert here
[/table]
[button/] <--This will make a duplicate of invisible html and place it under invisible root
//The invisible html stuff we want to duplicate into //insert here
Given your feedback about the HTML structure in the comments, you can use the following to achieve what you are trying to. Just look into
You are trying to get the selected value inside the change event for the drop-down by using var subParam = textBoxList[i].options[textBoxList.selectedIndex].value; rather than using textBoxList[i] you can use this so that i becomes var subParam = this.options[this.selectedIndex].value.
For showing hiding the inputs you can use the function findRoot() which takes the target element object i.e ``selectand finds a parent with the class namedrootPlacement` and returns the node and then you can iterate it's children to show the selected node and hide the rest.
See a demo below
var textBoxList = document.querySelectorAll(".DISPLAYTYPE");
for (var i = 0; i < textBoxList.length; i++) {
textBoxList[i].addEventListener('change', function() {
var selectedType = this.options[this.selectedIndex].value;
let rootPlacement = findRoot(this, 'rootPlacement');
let children = rootPlacement.children;
for (var c = 0; c < children.length; c++) {
let element = children[c];
let elementType = element.type;
let isInputElement = typeof elementType !== 'undefined';
if (isInputElement) {
if (elementType == selectedType) {
element.style.display = 'inline';
} else {
element.style.display = 'none';
}
}
}
});
};
function findRoot(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
input {
display: none;
}
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox1" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="" class="quantumBox" id="P1">
<input type="checkbox" value="" class="quantumBox" id="q1">
<input type="radio" value="" class="quantumBox" id="r1">
</div>
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox2" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="LENGTH" class="quantumBox" id="P2">
<input type="checkbox" value="" class="quantumBox" id="q2">
<input type="radio" value="LENGTH" class="quantumBox" id="r2">
</div>
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox3" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="LENGTH" class="quantumBox" id="P3">
<input type="checkbox" value="" class="quantumBox" id="q3">
<input type="radio" value="LENGTH" class="quantumBox" id="r3">
</div>
I am making a form where when I select familyname of the product, its values will be display in a box (I don't know what I should use todisplay it) and the box can't be edited (only can be read).
-HTML
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<td><textarea rows="10" cols="30" name="textBox" id="disabled" value=""/ disabled></textarea></td>
</br>
<p><input type="submit" value="Save"></p>
-ASPCode
<%
DIM fnm,element
fnm=Split(Request("fnme"),"\n")
FOR EACH element IN fnm
Response.Write("<p>--qq-- " & trim(element) & " </p>")
Next
%>
For now I'm using text area but still have a problem in displaying many value, it display on one selected value.
-JS
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
I want to know it is possible to display the multiple value?
When you do:
var val = obj.value;
you're only going to get the value of the first selected option, not all of them (unless you're using something like jQuery).
And the forward slash in:
<textarea ... id="disabled" value=""/ disabled>
doesn't help either. I'll assume that's just a posting typo.
function getMultiSelectValue(select) {
return [].reduce.call(select.options, function(values, option) {
option.selected? values.push(option.value) : null;
return values;
}, []);
}
function showValues(values){
document.getElementById('ta').value = values.join('\n');
}
<select onchange="showValues(getMultiSelectValue(this))" multiple>
<option value="0">0
<option value="1">1
<option value="2">2
</select>
<textarea id="ta" rows="3" readonly></textarea>
I think this could help you.
<html>
<body>
<form action="" name="tof">
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<textarea id="res" readOnly></textarea>
</form>
<p id="demo"></p>
<script>
function setText(ob){
var selected_options = document.forms['tof']['fnme'].selectedOptions
var selected_options_values = []
for(i=0; i<selected_options.length; i++){
selected_options_values.push(selected_options[i].value)
}
document.getElementById('res').value = selected_options_values.join('\n')
}
</script>
</body>
</html>
I'm very new to javascript and I'm trying to make different events occur depending on types of input. I have the following in my html header:
<script type="text/javascript">
function validateForm(){
var val=document.getElementsByName("destination");
if (val == "deprecated"){
window.location="http://website.com/";
}
}
</script>
Then in the body, I have the following:
<select name="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select><br/>
<input type="button" value="next >" onClick="validateForm()" />
This however doesn't do anything. It just stays on the same page. I also tried wrapping it inside a form tag by saying:
<form name="my_form" onSubmit="validateForm()">
...
</form>
and then having matching javascript:
var val = document.forms["my_form"]["destination"].value
But this didn't work either.
Anyone see what the issue is?
Thanks.
I fixed your function and tested it:
function validateForm(){
var val=document.getElementsByName("destination");
var theSelectedOption = val[0].options[val[0].selectedIndex].value;
if (theSelectedOption == "deprecated"){
window.location="http://website.com/";
}
}
You need to grab the value from the selected element. Since document.getElementsByName returns an array, try using this
var val = document.getElementsByName("destination")[0].value
You need to get the value from the selected option. Like so:
var index = document.getElementsByName("destination").selectedIndex;
var val=document.getElementsByName("destination").options[index].value;
That will retrieve the value of the selected option.
You're missing the href attribute, you want to use:
window.location.href = 'URL';
do the following
<select name="destination" id="destination">
Your JavaScript
val=document.getElementsById("destination").value;
Put an alert(val) in your if to see if ever evaluates to true
Try this with a little bit of jquery
Redirect using drop down
<form name="my_form">
<select id="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select><br/>
<input type="button" value="next >" id="submit">
</form>
$('#submit').click(
function validateForm(){
var e = document.getElementById("destination");
var val = e.options[e.selectedIndex].value;
if (val == "deprecated"){
window.location="http://website.com/";
}
});
Try it with id's instead of name, an id is a unique element. Javascript supports
var destination = document.getElementById("destination");
if (destination.options[destination.selectedIndex].value == "deprecated"){
window.location="http://website.com/";
}
HTML
<select id="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select>
<br />
<input type="button" value="next >" onclick="javascript:validateForm();" />
This is how far I got:
<head>
<script type="text/javascript">
function showonlyone(thechosenone) {
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}
else {
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select>
<option SELECTED>Choose one</option>
<option value="javascript:showonlyone(id1)">First</option> <!-- That's probably wrong -->
<option value="javascript:showonlyone(id2)">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
Here is what it should do:
Create a dropdownlist (with 3 Values)
If you click on "First" it should only show the of the content of <div id="id1">
If you click on "Second" it should only show the of the content of <div id="id2">
I know that this can't work like this. But I do not know how I can get this working.
There might be a easier way than this javascript function but it has to be this way.
Thank you for your help
Use a onchange event handler instead:
Update your <select> to <select onchange="showonlyone(this)">.
Change your <option> values to only the IDs - not JavaScript calls.
Update your JavaScript to accept the HTMLSelectElement (which will be passed-in by the this, above). (Yes, you were correct here.)
From the chosen HTMLSelectElement, ask it for its value.
Here is a fixed, working version: http://jsfiddle.net/YRF6u/
Also included here:
<head>
<script type="text/javascript">
function showonlyone(selector) {
var thechosenone = selector.value;
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}else{
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select onchange="showonlyone(this)">
<option SELECTED>Choose one</option>
<option value="id1">First</option>
<option value="id2">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
I would not consider this production-ready code, but it should be sufficient enough to solve your current round of questions.