I have the follwing code. I want to get the value of the selected value of the dropdownlist once the user changes it or to have the default value to be displayed by alert(). I need to use alert() from within the < body > of the html. Is that possible?
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="phonegap-1.4.1.js">
</script> <script type="text/javascript" src="JS/Util.js"></script>
<script type="text/javascript" src="JS/Language.js"></script>
<script type="text/javascript">
function dropdown(){
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
</script>
</head>
<body onload="dropdown();"> <div id="main3"></div> <form><select id = "numberlist"><option>12</option><option>24</option><option>36</option></select>
Use the code:
selectElement.options[ selectElement.options.selectedIndex ];
to find the index that is selected.
So where you say var drp = document.getElementById("numberlist"); you can now find the value of the index by doing:
var value = drp.options[ drp.options.selectedIndex ].value;
Add the code into an onchange event so that whenever you change the selectedIndex of the element, you will be able to obtain it's value:
Here is a DEMO
Try this Following...Mark it as answer if it helps you
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="phonegap-1.4.1.js"> </script> <script type="text/javascript" src="JS/Util.js"></script>
<script type="text/javascript" src="JS/Language.js"></script>
<script type="text/javascript">
function dropdown()
{
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
</script>
</head>
<body onload="dropdown();">
<div id="main3">
</div>
<form>
<select id="numberlist" onchange="show()">
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<script type="text/javascript">
function show() {
var e = document.getElementById('numberlist');
var txt = e.options[e.selectedIndex].text;
alert(txt);
}
</script>
</form>
</body>
</html>
add this function within script tag.
function pickvalue(id){
var drp = document.getElementById(id);
alert(drp.value);
}
and add function call like this.
<select id = "numberlist" onchange="pickvalue(this.id)">
Here is a JQuery method:
$value = $("#numberlist option:selected").text();
alert($value);
Related
I am trying to place a select menu into a modal and have a strange issue in that the select menu is loaded with display:none so it is hidden is that normal behaviour with materialize?
The name field above the select only shows the first entry from the select unless I remove the display:none in the inspector which then allows me to choose any value from my select with it repeating that value above.
What am I doing wrong?
this is the div I am adding the select into
<div class="input-field col s12">
<select class="custName">
</select>
<label>Select Customer</label>
</div>
I am calling this at the end of my html page
<script>$(document).ready(function(){
$('select').formSelect();
});</script>
creating my selects options here
const custData = (data) => {
if (data.length) {
let html = '';
data.forEach(doc => {
const cust = doc.data();
//console.log(cust);
const select = `
<select>
<option value=${cust.customerId}>${cust.name}, ${cust.address.postCode}</option>
</select>
`;
html += select;
});
customerList.innerHTML = html;
} else {
customerList.innerHTML = '<ul class="center-align">no data</ul>'
}
};
Please put me out of my misery
The issue is that, your $('select').formSelect(); is being executed before you are populating your option tags.
The Solution:
Make the intialization call after your option tag population code.
Note: don't enclose every option tag with a select tag in your custData() function
For example, this one executes initialization statement before population :
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field col s12">
<select id="s_1" class="custName">
</select>
<label>Select Customer</label>
</div>
<script type="text/javascript">
var select = document.getElementById("s_1");
var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
setTimeout(function(){ select.innerHTML = options; }, 1000);
$(document).ready(function() {
$('select').formSelect();
});
</script>
</body>
</html>
This one Executes initialization after population:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field col s12">
<select id="s_1" class="custName">
</select>
<label>Select Customer</label>
</div>
<script type="text/javascript">
var select = document.getElementById("s_1");
var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
setTimeout(function(){ select.innerHTML = options; $('select').formSelect();}, 3000);
$(document).ready(function() {
$('select').formSelect();
});
</script>
</body>
</html>
You have to intialize formSelect() on select after your modal is open so it will work. Replace modal_id with your modal id attribute.
$('#modal_id').on('shown.bs.modal', function (e) {
$('select').formSelect();
});
I want to assign a value to hidden input then grab that value from next section of javascript using input id. So it will alert the value as per hidden input value which assigned from the first section of javascript. However, it looks not useful this is important for my current task. I have to push value to HTML then get it back again in javascript variable. Let me know if you have any solution.
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
var myVal = "some string";
$("#foo").val(myVal);
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
</script>
</body>
</html>
You can use $(document).ready() method which waits until all DOM elements are rendered. Then executes the JS code. You can read more about it here
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var myVal = "some string";
$("#foo").val(myVal);
});
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
$(document).ready(function(){
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
});
</script>
</body>
</html>
Using HTMLFormControlsCollection of the Web API allows us to reference any and all form elements very easily:
Example
/* Find the first form of a page without knowing it's .class or #id */
// HTMLFormControlsCollection // Common way
var form = document.forms[0]; var form = document.getElementsByTagName('form')[0];
Demo
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
</head>
<body>
<form id='A'>
<input id="X" name="X">
<output id='Y' name='Y'></output>
<input id='Z' name='Z' type='hidden'>
</form>
<script>
var F = document.forms.A;
F.oninput = function() {
var X = F.X.value;
var Y = F.Y;
var Z = F.Z;
Y.value = X;
Z.value = X;
}
</script>
</body>
</html>
I have this code:
<script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
class="eway-paynow-button"
data-publicapikey=""
data-amount="1000"
data-currency="AUD" >
</script>
How can I set data-amount from a Javascript function?
you can try following
(assuming you have the class eway-paynow-button only to the script element)
document.getElementsByClassName("eway-paynow-button")[0].dataset.amount = 1000;
Or a more generic solution
var elems = document.getElementsByClassName("eway-paynow-button");
for (var i = 0; i < elems.length; i++) {
if(elems[i].getAttribute('src') === "https://secure.ewaypayments.com/scripts/eCrypt.js") {
elems[i].dataset.amount = 1000;
}
}
To expand on nikhil's solution, you can change the text like so:
document.getElementsByClassName("eway-paynow-button")[0].setAttribute("data-amount", "2000");
document.getElementsByClassName("eway-button")[0].firstElementChild.innerHTML = "Pay Now ($20.00)";
You can Use my jQuery Solution to change your button text problem
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
class="eway-paynow-button"
data-publicapikey=""
data-amount="1000"
data-currency="AUD" >
</script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
$(".eway-paynow-button").attr("data-amount",2000);
});
</script>
</body>
</html>
this is my code html:
<html>
<head>
</head>
<body>
<input class="search" placeholder="Search" />
<div id="users">
<ul class="list">
</div>
<script src="jquery-1.10.1.min.js" ></script>
<script src="list.min.js"></script>
<script src="code.js"></script>
</body>
</html>
and this is my code js:
var test = [{name:"Joo",born:1986,source:"impat.png"},
{name:"Jonas",born:1888,source:"impat.png"}];
var options = {
item: "<li><img src='source'/><h3 class='name'></h3><p class='born'></p></li>"
}
var listObj = new List('users', options,test);
I know it doesn't work but I hope someone offers me a good solution
Change your options to class like so and it will input the src:
var options = {
item: "<li><img class='source'/><h3 class='name'></h3><p class='born'></p></li>"
}
<html>
<head>
<script type='text/javascript' language='javascript' src="http://localhost/javascript/jquery-1.4.2.js">
</script>
<script type='text/javascript' language='javascript'>
$(document).ready(function(){
$("#button").mousedown(function(){
dropDownMenu = $("#dropDownMenu");
alert(dropDownMenu.options[0].text);
});
});
</script>
</head>
<body>
<select id="dropDownMenu"><option>Test</option></select><br>
<input id="button" type="button">
</body>
</html>
Try using the text() function:
$("#button").mousedown(function() {
var selectedItemText = $('#dropDownMenu :selected').text();
alert(selectedItemText);
});
Your code dropDownMenu = $("#dropDownMenu");
alert(dropDownMenu.options[0].text);
Here dropDownMenu is a JQuery object. So dropDownMenu.options is not defined. Use dropDownMenu[0] or dropDownMenu.get(0) to get the first DOM element which is a
<select>...</select>