So this is what I managed to do, use a text box to add strings to my select.
How can I now use a second text box to write part of a string I created in the select with the first text box and find the indexOf the word I typed(indexOf need to appear underneath the second text box)?
Note: the simplest Javascript answer, please.
function addString(){
var addTwoSelect = document.getElementById("select");
var write = document.createElement("option");
write.text = document.getElementById("txt").value;
addTwoSelect.add(write);
}
<input type="text" id="txt"/>
<input type="button" value="add string" onclick="addString()"/>
<select id="select"><option value="0">Choose a string</option></select>
OK, so just a second input box and compute the indexOf:
function addString(){
var addTwoSelect = document.getElementById("select");
var write = document.createElement("option");
write.value = write.text = document.getElementById("txt").value;
addTwoSelect.add(write);
}
function outputIndex() {
var addTwoSelect = document.getElementById("select"),
secondBox = document.getElementById("string"),
out = document.getElementById("index");
out.innerText = addTwoSelect.value.indexOf(secondBox.value);
}
<input type="text" id="txt"/>
<input type="button" value="add string" onclick="addString()"/>
<select id="select" onchange="outputIndex()"><option value="0">Choose a string</option></select>
<input type="text" id="string" oninput="outputIndex()"/>
<output id="index"></output>
Use the value attributes of your <option>s!
var last = 0;
function addString(){
var addTwoSelect = document.getElementById("select");
var write = document.createElement("option");
write.text = document.getElementById("txt").value;
write.value = ++last;
addTwoSelect.add(write);
}
function outputIndex() {
var addTwoSelect = document.getElementById("select"),
out = document.getElementById("index");
out.innerText = addTwoSelect.value;
}
<input type="text" id="txt"/>
<input type="button" value="add string" onclick="addString()"/>
<select id="select" onchange="outputIndex()"><option value="0">Choose a string</option></select>
<output id="index"></output>
Related
So I have this piece of code that gets a list of addresses from a postcode. It does this by using the GET function from an api. when the JSON data is returned I have split it up and I now have a javascript array inside a function to manipulate the DOM to add a dropdown menu that a user can select their address from
I am currently using a dropdown menu that a user can select their address from a list of addresses and an onclick functionality (this is the part that I am having issues with). from which a function should populate other fields (this is not a concern for now). Sorry it's a poor explanattion but there is a lot going on!
var soil = new XMLHttpRequest();
var a="";
function findAddress (){
stuff = document.getElementById("postcode").value;
soil.open("GET", "https://api.getaddress.io/find/"+stuff+"?api-key=x", false);
soil.send(null);
var r = JSON.parse(soil.response);
var x = document.getElementById("address"); // Get the element with id="demo"
var str="";
x.innerHTML+="<div class=dropdown> <button onclick=myFunction() class=dropbtn>Dropdown</button> <div id=myDropdown class=dropdown-content>";
var y = document.getElementById("myDropdown");
for (i=0;i<r.addresses.length;i++){
a=r.addresses[i];
y.innerHTML+="<a onclick=submitAddress(a)>" + r.addresses[i] + "</a>";
}
x.innerHTML+="</div>";
x.innerHTML+="</div>";
}
function submitAddress(a){
var x = document.getElementById("address"); // Get the element with id="demo"
x.innerHTML = "";
document.getElementById("houseNum").value = a;
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
<select>
<option type="submit" value="mr">Mr</option>
<option type="submit" value="mrs">Mrs</option>
<option type="submit" value="ms">Ms</option>
<option type="submit" value="miss">Miss</option>
<option type="submit" value="dr">Dr</option>
</select><br><br>
<label>First Name<span style="color:red;">*</span>:</label>
<input type="text" class="payment_firstname" name="firstname" required><br><br><br>
<label>Surname:</label>
<input type="text" class="payment_lastname" name="lastname"><br><br><br>
<label>Email Address<span style="color:red;">*</span>:</label>
<input type="text" class="payment_email" name="email" required><br><br><br>
<label>Confirm Email<span style="color:red;">*</span>:</label>
<input type="text" class="payment_cemail" name="cemail" required><br><br><br>
<label>Telephone:</label>
<input type="text" class="payment_telephone" name="Telephone" ><br><br><br>
<label>House Name/No:</label>
<input type="text" id="houseNum" class="payment_telephone" name="houseNum" ><br><br><br>
<label>County:</label>
<input type="text" id="houseCounty" class="payment_telephone" name="houseCounty" ><br><br><br>
<label>Postcode:</label>
<input type="text" id="postcode" class="payment_postcode" name="Postcode"> <button onclick="findAddress()" style="height: 35px;">Find Address</button><br><br>
The results I am getting is that the number of the property is being put into the function and not the full indexed string of the array that is -1 test crescent, test city, test county- and all that is getting fed into the function is the first number
I'm not sure if I got it right, but to build for example select options from an array you could use map() function.
Check if user changed address in select you could use onchange event instead of onclick
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange
let addressesArray = [
"67-69 Shelton Street, , , , , London, ",
"Aace Cleaning group limited, Shelton Street, , , , London, Greater London",
"Annabelle Grace Events Management, 71-75 Shelton Street, , , , London, Greater London",
"Apex Base Solutions, 71-75 Shelton Street, , , , London, "
]
let list = addressesArray.map( item => `<option>${item}</option>`);
var select = document.createElement('select');
select.innerHTML = list;
document.body.appendChild(select);
When I wrote something in the first input, second input showed it, but:
a) What if i want see text from input "2" showed in input "3"?
HTML:
<input id="1" type="text" oninput=al() /></br>
<input id="2" disabled="disabled" ></br>
<input id="3" disabled="disabled">
JS:
function al() {
var a = document.getElementById("1").value;
var result = a;
var ab = document.getElementById("2");
ab.value=a;
}
b) What if I want to see text from input "1" in two inputs named "2"?
HTML:
<input id="1" type="text" oninput=al() /></br>
<input id="2" disabled="disabled" ></br>
<input id="2" disabled="disabled">
JS:
function al() {
var a = document.getElementById("1").value;
var result = a;
var ab = document.getElementById("2");
ab.value=a;
}
Answer A: To show the same value in an input with ID 2 and an input with ID 3:
function al() {
var a1 = document.getElementById("1").value;
var a2 = document.getElementById("2");
var a3 = document.getElementById("3");
a2.value = a3.value = a1;
}
Answer B: Using elements with the same ID is wrong and will result in an invalid HTML document. To achieve your goal, you can set both elements with a certain class (classA at the example below), then you can use document.querySelectorAll which returns an array of elements, and then set their value with an index [0] and [1]:
<input id="1" type="text" oninput=al() /></br>
<input class='classA' disabled="disabled" ></br>
<input class='classA' disabled="disabled">
function al() {
var a = document.getElementById("1").value;
var result = a;
var ab = document.querySelectorAll("[class='classA']");
ab[0].value = ab[1].value = a;
}
First of all, you can't have two element with the same ID.
Second to copy from one to another, it's better use the keyDown, keyUp or onchange events.
E.g.
<input type="text" id="1" onchange="copypaste()"/>
<input type="text" id="2"/>
function copypaste() {
var first = document.getElementById("1")
var second = document.getElementById("2")
second.value = first.value
}
I am trying to get just the content/text of div by class name using javascript. The outcome isn't what i have expected. I did try to push it into array but it does not seems to be working. Please help!
What i have done so far :
JavaScript:
var elements = document.body.getElementsByClassName("headline-bar");
window.onload = function() {
var year= document.getElementById("year");
for (i=0;i<elements.length;i++)
{
var Entry = document.createElement("option");
Entry.text = elements[i];
year.add(Entry ,null);
}
}
Html:
<form>
<select id="year">
</select>
</form>
<input type="submit" value="Submit">
<div class="headline-bar">2015</div>
<div class="headline-bar">2014</div>
Output:
Desire outcome:
Use Node.textContent, The Node.textContent property represents the text content of a node and its descendants
var elements = document.body.getElementsByClassName("headline-bar");
window.onload = function() {
var year = document.getElementById("year");
for (i = 0; i < elements.length; i++) {
var Entry = document.createElement("option");
Entry.text = elements[i].textContent;
year.add(Entry, null);
}
}
<form>
<select id="year">
</select>
</form>
<input type="submit" value="Submit">
<div class="headline-bar">2015</div>
<div class="headline-bar">2014</div>
I have created a simple Cost Estimator in HTML Javascript. It does a simple calculation and displays the answer. I do not know how to reset the answer output when pressing the Reset button.
Here is codepen : http://codepen.io/FredHair/pen/FgJAd
The reset button resets the form but I do not no how to reset answer. I know it because of how I have displayed the answer, but do not know the correct process to clear the output.
HTML:
<div>
<h1>Cost Estimator</h1>
<form>
<input type= "numbers" id="x" placeholder = "Length" /><br />
<input type= "numbers" id="y" placeholder = "Width"/><br />
<input type= "numbers" id="z" placeholder = "Height"/><br />
<select id="choice" >
<option value = "1">option 1</option>
<option value = "2">0ption 2</option>
<option value = "3">option 3</option>
</select>
<br/>
<br/>
<input id= "est" type="button" value = "Estimate" onclick= "calculator()"/>
<input id= "reset" type="reset" value = "Reset"/>
</form>
<h1 id="result"> = </h1>
</div>
JS:
function calculator(){
var x = Number(document.getElementById("x").value);
var y = Number(document.getElementById("y").value);
var z = Number(document.getElementById("z").value);
var p = Number(30);
var result;
var calc = document.getElementById("choice").value
switch(calc){
case"1" : result = z * p;
break;
case"2" : result = x * p + 50;
break;
case"3" : result = x * p + 30;
break;
}
document.getElementById("result").innerHTML = " = £ " + result;
}
http://codepen.io/FredHair/pen/FgJAd
Any help is greatly appreciated.
Add an event listener to your form's reset event:
// document.forms[0] assumes your form is the first in the DOM
document.forms[0].addEventListener('reset', function() {
document.getElementById('result').innerHTML = '';
});
<div id="test">
<input type="text" value="10" size="3">
<input type="text" value="0" size="3">
<input type="text" value="25" size="3">
<input type="text" value="0" size="3">
</div>
I want a function to get all the values of the inputs. I was trying with this:
var inputs = $("test :input");
But I don't know how to go from there or even if it's correct.
Thank you
You can do this:
var inputs = new Array();
inputs = $('#test :text').map(function(){
return this.value;
}).get(0);
Or:
var inputs = new Array();
inputs = $('#test :text').each(function(){
inputs.push(this.value);
});
You can access each value like this:
alert(inputs[0]);
alert(inputs[1]);
alert(inputs[2]);
// and so on
The :text refers to inputs of type text.
$("#test :input").each(function(){
var value = $(this).attr("value"); //Save value in an array or something
});
Do you mean like this?
var values = [];
$('input').each(function(index, element){
values.push($(element).val());
});
Non-jQuery version:
var values = [];
var inputs = document.getElementById("test").getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; ++i) {
values.push(inputs[i].value);
}