I have a function that gets values from a the URL and then posts it to various places on the page.
I can't figure out how to get the values to read inside form field values.
<OPTION Value="<script type="text/javascript">document.write(Position)
</script> has final say">
I know I can't do that specifically, but I've tried various configurations and nothing posts the variable inside the value field.
The document.write function is working on the plain html, I have tested that. I just don't know to make it read inside a form field value and display the results properly.
How do I get one word to display as a variable, without having to create a function that inputs the value of each field. There are way too many fields to make that viable - this needs to populate into maybe 200 or 300 variables, so I really need it to be the word.
The site is standalone so I can't use php as I understand it. If there's a way I'm open to it. I did try the php echo to call the field name but I don't know enough about php to know if I'm missing something.
I am open to solutions where I can upload files into the standalone site though.
Thanks in advance.
Is this what you're looking for?
var position = 'helloworld'
document.getElementById('id1').options[0].value=position;
<select id="id1">
<option>The Value is the POSITION variable.</option>
</select>
I added an ID to the select box (<select id="id1">). Then you can use the script to insert the position variable as the value of the options within the select.
If this is not what you're looking for then you really need to update your question with more sample from your code (i.e some HTML would be nice).
If you are stuck writing code only on the client-side, then you may want to use a client-side library like jQuery to help you manage your DOM manipulation.
For example, you can set a class for every variable you want to set and then use jQuery to replace the contents of those elements.
var values = {
position: "top",
name: "steve"
}
$(".position").text(values.position).val(values.position)
$(".name").text(values.name).val(values.name)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option class="position"></option>
<option class="name"></option>
</select>
<select>
<option class="name"></option>
</select>
<select>
<option class="position"></option>
</select>
<select>
<option class="position"></option>
<option class="name"></option>
<option class="position"></option>
<option class="name"></option>
</select>
Related
My ultimate goal is to add the decimal value associated with the drop down item selected to any other number the user inputs (so they might input 1 and then choose 1/8 and I want it to spit out 1.125.) - it's a web app for me to keep track of the food and spices I have in the kitchen.
I can't get it to grab the value I've assigned to each option in the drop down. I keep getting the following error:
script.js:7 Uncaught TypeError: Cannot read properties of null (reading 'value')
I figured it would struggle with actual fractions, so my html drop down looks like this:
<label for="fractions"></label>
<select name="fractions" id="fractions">
<option value="0">.0</option>
<option value="0.125">1/8</option>
<option value="0.25">1/4</option>
<option value="0.67">1/3</option>
<option value="0.50">1/2</option>
<option value="0.75">3/4</option>
</select>
Originally, I had my script using var fractions = document.getElementById("fractions") and then using fractions.value to get the value I assigned in the drop down, but it wouldn't give me the value. I found pretty much the same answer on here and on another website - use .value - and I can't figure out any other way to do it.
I also tried using var whatever = parseFloat(fractions); and then whatever.value to change the value to a float and then get that value, thinking maybe it was giving me a string, so that's why it wasn't adding properly, but it had the same error on it.
I did end up changing my selector thinking maybe that was the issue, so now my script looks like this:
const fractions = document.querySelector('#fractions')
const fractionsValue = fractions.value
I also tried implement .value this way:
const fractionsValue = fractions.options[fractions.selectedIndex].value
But I keep getting the same error.
I'm probably making a really silly mistake - what am I doing wrong?
According to the error message your querySelector or getElementById is not finding the element. I tested all your attempts and they all worked for me (except the parse one). Are you sure the error is not from the other input?
Edit: see the snippet:
const fractions = document.querySelector('#fractions');
const fractions1 = document.getElementById("fractions");
console.log(fractions.value);
console.log(fractions1.value);
console.log(fractions.options[fractions.selectedIndex].value);
<label for="fractions"></label>
<select name="fractions" id="fractions">
<option value="0">.0</option>
<option value="0.125">1/8</option>
<option selected value="0.25">1/4</option>
<option value="0.67">1/3</option>
<option value="0.50">1/2</option>
<option value="0.75">3/4</option>
</select>
I have tried, and can confirm that the following code definitely works.
const fractions = document.querySelector('#fractions')
const fractionsValue = fractions.value
console.log("fractions.value:", fractionsValue)
Maybe you try to see whether the code was put in another iframe or similar issue so that it cannot find the element. Or, this code is rendered conditionally, and it even did not get rendered. Please check these pre-conditions.
I want to edit some Data in a HTML select Element:
<select id="Photoshop" name="Photoshop">
<option selected value= 0> </option>
<option value=2>Installieren</option>
<option value=0>Nicht Installieren</option>
</select>
I want to get this selected, based on the Value which is in the Database. (If I select Value 2, it should stay Value 2 after reload, now every time I reload it resets to 0)
I've tried different things with JavaScript (Newbie in js here), but it didn't work.
<script>
$(document).ready(function () {
$("#Photoshop").val("Model.Photoshop")
})
</script>
changes the value to Null
the code block from vbhtml wont want to work too. I can get the Data, but cant change it in the selectbox (doesn't "know" the selectbox)
There should be a another way, to get the Database Data, at the best without js. (Model.Photoshop should do its Job)
I haven't found something similar, which can fix this kind of problem. My researches were hopeless...
The solution is kinda simple.
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
$("#Photoshop").val("#Model.Photoshop")
})
</script>
as you can see, you just need to Type #Model.Photoshop, instead of Model.Photoshop.
If this Value is not in the select list, you will se a blank Space.
AR
I am using chosen.jquery.js for select field
<select chosen multiple data-placeholder="Select Body Part(s)"
ng-options="option.Name as option.Name for option in BodyPartList" ng-model="Body_Part">
<option value="" disabled>Select Body Part(s)</option>
</select>
But It shows only data-placeholder value in case of no data in model.
I want to show "Select Body Part(s)" as a option in list.
And user must not select this. Reason is that, I want to add dynamic "Unknown" value in list of Body_Parts. But it not reflect in list.
Same work for select having single selection.
I'm not seeing any problems with your code, as such. Like, I'm trying it and getting the visual behaviour I think you're wanting? Am I missing something?
Html just yours with ng-app etc, javascript is:
var myApp = angular.module('myApp', ['localytics.directives']);
myApp.controller('MyController', function($scope) {
$scope.BodyPartList = [
{ Name: "Arm" },
{ Name: "Leg" }
];
$scope.Body_Part = [];
});
Not sure if data-placeholder is actually doing anything.
Fiddle: http://jsfiddle.net/7187f6d9/
That said, it's not "working". In the fiddle I put a regular select box alongside the chosen one, and the chosen one doesn't seem to be writing to the ng-model correctly. I'm not sure what's up with that.
You can choose the below option
https://harvesthq.github.io/chosen/#optgroup-support
or push another item to the top of the array from server side as your custom label and disable it on client side with the help of ng-if and $index properties of ng-repeat and angularjs. If this make sense then its fine else i can give you a demo.
I hope your query is, you want show a place holder as current selected value but user shouldn't be able to select it.
Instead of making it disabled, make ithidden. Then display an error if a user doesn't select any other options, using the value of placeholder option.
A sample snippet is added below. If value of select is Error, write a case to throw a error back to user.
<select>
<option value="Error" hidden>Select any Company</option>
<option value="Toyota">Toyota</option>
<option value="Nissan">Nissan</option>
<option value="BMW">BMW</option>
</select>
Hope this helps! If not, ping me with your query. :)
I know this has been asked before, however I cannot find a solution to my problem.
I have a select box with three options and three values, these values are used to perform some calculations using JS so I cannot change these to match the option text. This is to work out the amount of V.A.T.
My select looks like this:
<select name="tax" id="tax" class="select">
<option value="20">Standard 20%</option>
<option value="0">Zero 0%</option>
<option value="0">Exempt 0%</option>
</select>
Which is fine, however I need to insert the text into the database and not the values, as it needs to be viewed in the backend. I have tried a javascript function to add a hidden input to the select box targeting the option that is selected but that was a bit buggy, and didn't seem right. i was thinking of displaying the text next to the value when it is retrieved from the database, however I wouldn't be able to distinguish from the two 0 amounts.
Could someone please offer some further solutions, best approaches to this.
Many Thanks
You can get the text of the selected option with jQuery as follows:
$("#tax option:selected").text();
You could easily use this within your AJAX request to send the correct value to the database, just assign it to a variable:
var the_text = $("#tax option:selected").text();
Failing that, why not just do the lookup in the JS calculations - it'd make your life so much easier:
<select name="tax" id="tax" class="select">
<option value="standard">Standard 20%</option>
<option value="zero">Zero 0%</option>
<option value="exempt">Exempt 0%</option>
</select>
And your JS could look something like this:
var vat_amount = ($('#tax').val() == 'standard') ? 20 : 0;
You can retrieve the text by JS using the html() function. Or, if you are just using a POST to send the data to the server, try adding both values to the value attribute of the option and split it server side to get the right data.
I'm very new to JQuery and don't have much experience with javascript at all, and after hours of trying to figure this out i give up. I know how to do it in PHP, but there's something I'm missing when I try it in JQuery.
I have a html-file that generates a dorpdown box that looks something like tihs:
<form action="" method="GET">
<select id="countiesList" name="counties">
<option value="all" selected="selected">All Counties</option>
<option value="county1">County 1</option>
<option value="county2">County 2</option>
...
</select>
</from>
How do I get the selected value from the dropdownbox in to a JQuery function?
Do I have to refer to the function I want to use in the form?
Should I have a submit button? (I'd prefer not to)
--edited--
My point is that I want to find out which of the options the user selects, so that I can use it in another function.
Thanks a lot!
It sounds like you want to submit it immediately on change. In that case use the change event like this:
$(function() { //run when the DOM is ready
$("#countriesList").change(function() { //this runs when the selection changes
$.post("myPage.php", { country: $(this).val() }, function(data) {
//use data here
});
});
});
What this does is when your selection changes, we post to "myPage.php" which gets a POST variable of country, which will be the value you picked (all, country, etc). Just get this from $_POST["country"] and render your response...which will be data in the above $.post() callback. You can then do whatever you want with that response, for example if it's another <select> with state, you could append that to somewhere, for example:
$("#nextDropDownContainer").html(data);