I have a series of visualizations that are loaded via JSON files. I've created a form in HTML that allows the user to select the image they want to see:
<form action="#">
<fieldset>
<label for="selector"><b>Select a visualization</b></label>
<select name="selector" id="selector">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</fieldset>
</form>
The visualization is loaded with JavaScript as such:
var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;
var imageURL = "viz/" + text + ".json";
var spec = imageURL;
I've got the site set up so that the visualizations will change if I manually refresh the page, but how do I get the visualization to automatically refresh based on the user changing their selection in the form?
Put your visualization load logic to onchange event of #selector:
<select name="selector" id="selector" onchange="changeVisualization()">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
function changeVisualization(){
var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;
var imageURL = "viz/" + text + ".json";
var spec = imageURL;
}
you can use onchange on javascript. it will automatically appear without refreshing the page
<input type='file' name='file' accept="image/*" onchange="loadFile(event)" value = "logo1.png" />
<center>
<img src="logo1.png" id="output" width="310" align = "center">
</center>
</div>
Javascript:
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
Related
Hello I am trying to get the value from a select tag, using javascript, that is generated within a razor view using C#.
This is the html where the select tag is generated:
<form id="asignRol" method="post">
<select name="users" id="userChange">
#foreach (var user in Model.UserAndRolesInfo)
{
<option value="#user.Username">#user.Username</option>
}
</select>
<select name="rol" id="roleChange">
#foreach (var rol in #Model.roleAvailability)
{
<option value="#rol.Name">#rol.Name</option>
}
</select>
<button type="button" id="submitButton" class="btn btn-primary">Asignar rol</button>
</form>
The html select tag is generated as expected:
HTML phot
In a different js file I am trying to get the values of the selected options:
var submitButton = document.getElementById("submitButton");
var userSelect = document.getElementById("userChange");
var userSelectValue = userSelect.options[userSelect.selectedIndex].value;
var roleSelect = document.getElementById("roleChange");
var roleSelectValue = roleSelect.value;
submitButton.addEventListener("click", function () {
console.log(userSelectValue);
console.log(roleSelectValue);
})
With the result of only getting the default value:
Result
I tried passing the event and event.preventdefault.
You need to get the value when the event occurs not before it. In your case event click.
var submitButton = document.getElementById("submitButton");
var userSelect = document.getElementById("userChange");
var roleSelect = document.getElementById("roleChange");
submitButton.addEventListener("click", function() {
var userSelectValue = userSelect.options[userSelect.selectedIndex].value;
var roleSelectValue = roleSelect.options[roleSelect.selectedIndex].value;
console.log(userSelectValue);
console.log(roleSelectValue);
})
<form id="asignRol" method="post">
<select name="users" id="userChange">
<option value="#user.Username">#user.Username</option>
<option value="moses">moses</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
</select>
<select name="rol" id="roleChange">
<option value="#rol.Name">#rol.Name</option>
<option value="mouse">mouse</option>
<option value="elephant">elephant</option>
<option value="fox">fox</option>
</select>
<button type="button" id="submitButton" class="btn btn-primary">Asignar rol</button>
</form>
I'm trying to make a simple search for Wikipedia where I can type what I want to search and a select where I can select the language. What I'm trying to do is to get the select value to be able to search in different languages so I just replace the language string in the url of wikipedia.org
(e.g. If I select French in the select dropdown the form should redirects me to fr.wikipedia.org and if I select English, it should redirects me to en.wikipedia.org)
Here's what I tried so far:
<form id="searchWikipedia" action="" onsubmit="searchWikipedia()">
<input id="search" name="search" type="text" />
<select id="lang" name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
</form>
<script>
function searchWikipedia() {
var select = document.getElementById("lang");
var selectValue = select.options[select.selectedIndex].value;
var searchValue = document.getElementById("search").value;
document.getElementById("searchWikipedia").action = selectValue + ".wikipedia.org/w/index.php?search=" + searchValue;
document.getElementById("searchWikipedia").submit();
}
</script>
Now, on submit I get this url: http://localhost/en.wikipedia.org/w/?search=cat
What I'm expecting is that the browser should redirect to en.wikipedia.org/w/?search=cat
How can I replace base url of a form action using JavaScript? Are there any better methods of doing this?
you need to append the protocol at the start of the url or the browser will take it as a relative url to your document.
<form id="searchWikipedia" action="" onsubmit="searchWikipedia()">
<input id="search" name="search" type="text" />
<select id="lang" name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
</form>
<script>
function searchWikipedia() {
var select = document.getElementById("lang");
var selectValue = select.options[select.selectedIndex].value;
var searchValue = document.getElementById("search").value;
// append https at the start
document.getElementById("searchWikipedia").action = "https://" + selectValue + ".wikipedia.org/w/index.php?search=" + searchValue;
document.getElementById("searchWikipedia").submit();
}
</script>
Add Submit input tag, to perform action
<form id="searchWikipedia" action="" onsubmit="searchWikipedia(event)">
<input id="search" name="search" type="text" />
<select id="lang" name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
<input type="submit" value="Search">
</form>
<script>
function searchWikipedia(event) {
event.preventDefault();
var select = document.getElementById("lang");
var selectValue = select.options[select.selectedIndex].value;
var searchValue = document.getElementById("search").value;
// it will open new tab
window.open("https://" + selectValue + ".wikipedia.org/w/index.php?search=" + searchValue);
// if you want to replace same url then use this
// window.location.replace(`https://${selectValue}.wikipedia.org/w/index.php?search=${searchValue}`);
}
</script>
I think, it will be helpful for you.
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;
I'm trying to take multiple user inputs from an HTML document and then transfer that data into a table using Javascript. Numerical data will transfer without an issue but dropdown select menus have been showing up as undefined, I've tried many different solutions I've seen on questions here but none of them have yielded any results. Any help anyone can provide would be much appreciated. Here is the relevant code...
HTML
<form class="items" action="" method="post" name="items">
<ul>
<li>
<label>Paint:</label>
<select id="paintColour">
<option value="White" selected="selected">White</option>
<option value="Blue">Blue</option>
<option value="Beige">Beige</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
</select>
<select id="paintType">
<option value="Gloss">Gloss</option>
<option value="Matte">Matte</option>
<option value="Emulsion">Emulsion</option>
</select>
<input type="number" name="quantity" value="0" size="2" id="paintVolume">
<input type="button" value="Add" id="addPaint" onclick="Javascript:addPaints()">
</li>
Javascript
function addPaints(){
var paintColour = document.getElementById("paintColour").selectedIndex;
var paintType = document.getElementById("paintType").selectedIndex;
var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");
var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);
paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}
function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}
Your problem with select is you are selecting index and then try to get value. Instead choose element and get value.
function addPaints(){
var paintColour = document.getElementById("paintColour");
var paintType = document.getElementById("paintType");
var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");
var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);
paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}
function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}
I would like image.src to display the id not the value of each <option>. Does dropped.id exist? Can this be done? Or is the id locked in the <select>? When the user hits submit, I need to pass the value in the form.
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var dropped = document.getElementById("changethisimage");
image.src = "http://foo.com/images/"+dropped.value;
};
</script>
<img id="imageToSwap" src="http://foo.com/images/SHOP_Car Emblem.jpg" width="150" align=right>
<select name="os0" id="changethisimage" onChange="swapImage()">
<option value="Light Blue" id="SHOP_Car Emblem_Cyan.jpg" selected>Light Blue
<option value="Dark Blue" id="SHOP_Car Emblem_DkBlue.jpg">Dark Blue
<option value="Canadian Red" id="SHOP_Car Emblem_Red.jpg">Canadian Red
<option value="Irish Green" id="SHOP_Car Emblem_IrishGreen.jpg">Irish Green
</select>
Try
image.src = "url" + dropped.selectedOptions[0].id
Browser support may be bad however. So you may want this
var selected = dropped.selectedIndex;
image.src= "url" + dropped.options[selected].id
See the Select interface for more details.
As a side-note, I see your doing
<select name="os0" id="changethisimage" onChange="swapImage()">
The onChange="code" bit is bad, really bad. It's an in-line event handler. This means you have a piece of JavaScript code in your HTML. This totally goes against separation of concerns and leads to spaghetti code hell.
You should totally replace it with
document.getElementById("changethisimage").addEventListener("change", swapImage);
Try this:
JS:
function swapImage(selectObj){
var image = document.getElementById("imageToSwap");
var options = selectObj.options;
var sIndex = selectObj.selectedIndex;
image.src = "http://foo.com/images/"+options[sIndex].id;
};
HTML: <select name="os0" id="changethisimage" onChange="swapImage(this)">
This is how I would do it:
HTML:
<select id="select_kitten">
<option value="Kitten 1" data-src="210/200/" selected>Kitten 1</option>
<option value="Kitten 2" data-src="220/210/">Kitten 2</option>
<option value="Kitten 3" data-src="200/180/">Kitten 3</option>
<option value="Kitten 4" data-src="225/220/">Kitten 4</option>
</select>
<img id="kitten_img">
JavaScript:
var img = document.getElementById( 'kitten_img' ),
select = document.getElementById( 'select_kitten' );
function onchange() {
img.style.opacity = 0.2;
img.src = 'http://placekitten.com/' + select.options[ select.selectedIndex ].dataset.src;
}
img.onload = function () {
this.style.opacity = 1;
};
select.onchange = onchange;
onchange();
Live demo: http://jsfiddle.net/XmhU9/4/
dataset isn't implemented in IE though. If you require support for IE, consider a cross-browser library.