Due to some requirement, I have to take a hidden input field inside option tag of select element. The problem I'm facing is, when the selected value is displayed, it's displayed with prefix >.
Here's my code:
<form action="Action.java">
<select name="cars">
<option value="car1" <input type="hidden" id="hidden" value="c1">>CAR1</option>
<option value="car2">CAR2</option>
<option value="car3">CAR3</option>
</select>
<input type="submit" value="Submit">
</form>
Can anyone help me fix this issue?
As others have mentioned, this line:
<option value="car1" <input type="hidden" id="hidden" value="c1">>CAR1</option>
isn't valid html. Your browser is closing your optinput™ - and is then seeing an extra '>'
You could do this sort of thing (untested code):
<form id="my_select">
<select name="cars">
<option value="car1">CAR1</option>
<option value="car2">CAR2</option>
<option value="car3">CAR3</option>
</select>
<input type="hidden" id="hidden" value="">
<input type="submit" value="Submit">
</form>
<script>
$("#my_select").change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).text() + " ";
});
$('#hidden').val(str);
}).change();
</script>
However, AND I CANT STRESS THIS ENOUGH: Don't.
Whatever your reason for needing to set that hidden field - do it in you back end code i.e (psuedo)
if (cars === car1) {
c1 = true
}
But do you really need to set it?
Related
I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.
I have posted a raw example of the form to see if anyone can lead me to water. Any help wouold be appreciated.
HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
</body>
</html>
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value, yet it's not difficult at all.
selectElement.options will give you an array of ALL the options inside the select element.
You will find the selected option's index to be selectElement.selectedIndex.
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex].
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text
Here's the code:
// THIS CONSTANT REPRESENTS THE <select> ELEMENT
const theSelect = document.getElementById('fruitSelector')
// THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT
// IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION
theSelect.addEventListener('input', function() {
// THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT
let selectedOptText = theSelect.options[theSelect.selectedIndex].text
// FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT:
document.querySelector('.hiddenField').value = selectedOptText;
})
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
well if you want to pass the text portion you should add the names as the values too like
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---
I have created with javascript and I get a result of a string.I get that result on my html code
<div id="results"></div>
Next,I want when I select for example Red to check if it is the the same thing (string), the select option - > Red with the string of this code
<div id="results"></div>
I was trying to do it but I failed.It is not working not even sure ,if I press the submit button I will send the string.
<div id="results"></div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="submit" value="results"/>
It appears that you want to check whether the selected option is equal to the text value of the div #results. You can achieve this effect like so:
$(document).ready(function(){
var select = $("select");
$("input[type=\"button\"]").click(function(){
var text = select.find(":selected").text();
if(text==$("#results").text()){
$("#results").html(text+" is equal!");
}else{
$("#results").html(text+" is not equal :(");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results">Red</div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="button" value="results"/>
</form>
A form is going to be Sending data somewhere, it would be best to remove the form, leaving the select and button elements. In the button add the code onclick='myFunction() ; when the button is clicked it will run the javascript function called myFunction(). Also you need to give the select a Id. I'm using selectInput
<script>myFunction() { document.getElementById('result').innerHTML = document.getElementById('selectInput').value;} </script>
Now when ever the button is pressed it will set the content of the div equal to the value entity in the selected select box option
You lack an action attribute.
<form method="post" action="path/to/file">
<select name="select">
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input type="submit" value="Get Results" />
</form>
Use a function, and a regular button. No form is needed.
<button onclick='func()'></button>
const func = () => {...}
Here i am using data-list i have one URL in that i am passing areaId= 2 & areaName = Chennai,Now i have to take the values and i want to make that value is selected,and again i want to change the areaName so i am changing instead of Chennai , i changed Karur means finally i am clicking submit button means i want to take the areaId & areaName
$('.options').on('change', function() {
var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id');
$('#city_id').val(city_id);
console.log(city_id);
});
function myFunction (){
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form method="POST">
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" rel='<?php echo $_GET['areaId']?>' value='<?php echo $_GET['areaName']?>'>
<datalist id="options">
<option data-id="1" value="Bangalore"></option>
<option data-id="2" value="Chennai"></option>
<option data-id="3" value="Karur"></option>
</datalist>
<input type="hidden" name="city_id" id="city_id">
<input type="submit" value="submit">
</form>
you have 3 options there, either use the default PHP value to set the text input value and dynamically set the city_id value on load/ready with JS, do the contrary and set the datalist corresponding option with adding selected="selected" in PHP and update the text input on load, or finally set them both in PHP.
here is the most simple case for PHP: setting the text input value and update city_id. For the second solution there is a bit more code as you have to test the options and add selected="selected" manually if the good one. I would personnally prefer the second because your PHP value will actually be verified against the options so that nothing will be selected if PHP value is wrong and does not correspond to any option value.
$('.options').on('change', function() {
var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id');
$('#city_id').val(city_id);
console.log(city_id);
});
//setting one of the element value based on the other's default value:
$(document).ready(function(){
//use this to set text input based on default selected option
//$('#location12').val($('#options option:selected').val());
//console.log('text input is now: ' + $('#location12').val());
//or this for the other way round
$('#city_id').val($('#options option[value="' + $('#location12').val() + '"]').data('id'));
console.log('city_id is now: ' + $('#city_id').val());
});
function myFunction (){
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form method="POST">
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" rel="<?php echo $_GET['areaId']?>" value="Karur">
<datalist id="options">
<option data-id="1" value="Bangalore"></option>
<option data-id="2" value="Chennai" selected="selected"></option>
<option data-id="3" value="Karur"></option>
</datalist>
<input type="hidden" name="city_id" id="city_id">
<input type="submit" value="submit">
</form>
So I have this piece of code I've been tinkering with. The Jquery is modified from somewhere else. I'm wanting to be able to add products on this page (which currently works)... but the part im struggling with is I then submitted ALL of that data to MySql through a submit button.
I've tried playing around with a few arrays / loops but so far I have drawn a blank. Can anyone help?
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function() {
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<br>product: <select name="product'+currentItem+'" id="product'+currentItem+'" ><option value="aclt">Tobacco</option><option value="aed">Energy Drink</option></select> nicotine: <select name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="3">3mg</option><option value="6">6mg</option><option value="12">12mg</option></select> Qty:<input name="qty'+currentItem+'" id="qty'+currentItem+'" type="text" />';
$('#data').append(strToAdd);
});
});
//]]>
</script>
<form method="POST" action="invoicereg.php" id="data" name="sub">
product:
<select name="'product1'" id="product1" >
<option value="aclt">Tobacco</option>
<option value="aed">Energy Drink</option>
</select>
nicotine:
<select name="nicotine1" id="nicotine1">
<option value="3">3mg</option>
<option value="6">6mg</option>
<option value="12">12mg</option>
</select>
Qty:<input type="text" id="qty" name="qty"></input><br>
</form>
<button type="submit" form="data">SUBMIT</button>
<input type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" id="items" name="items" value="1" />
</html>
I've noticed few mistakes that you've made in your code.
The first mistake is:
<select name="'product1'" id="product1">
Remove single quotes from the value of name attribute and it should look like:
<select name="product1" id="product1">
This is not considered an issue. If you were using single quotes around the value of name attribute, it would be quite annoying to access its value in PHP.
So, you would need to use complex expression to fetch the value like the following syntaxes:
$_POST['\'product1\'']
$_POST["'product1'"]
The first one uses escape sequence of backward slash to escape single quotes.
The second one uses double quotes to access keys with single quotes wrapped around. This one is relatively easier than the first one involving a bit complex expression.
The second mistake is:
The last three HTML elements below the form tag are not wrapped inside the form. The two among the last three elements which are submit and hidden element belong to form element. After modifying the code, the whole code should be like the following:
<form method="POST" action="invoicereg.php" id="data" name="sub">
product:
<select name="product1" id="product1" >
<option value="aclt">Tobacco</option>
<option value="aed">Energy Drink</option>
</select>
nicotine:
<select name="nicotine1" id="nicotine1">
<option value="3">3mg</option>
<option value="6">6mg</option>
<option value="12">12mg</option>
</select>
Qty:<input type="text" id="qty" name="qty"></input><br>
<button type="submit" form="data">SUBMIT</button>
<input type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" id="items" name="items" value="1" />
</form>
Hope it helps!
Make your input type submit button
<button type="submit" form="data">SUBMIT</button>
to
<input type="submit" form="data" value="SUBMIT">
I'm trying to use an auto complete dropdown menu using the HTML5 datalist attribute, without JQuery. But I want each suggestion, when selected, goes to an specific link (or when pressed enter, goes to the first suggestion).
What I have right now is:
<form action="www.site.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList"/>
<datalist id="languageList">
<option value="OPTION1" />
<option value="OPTION2" />
</datalist>
</form>
In this case, it performs a search in the site. I want each option to open a specific link, OR to use value at the end of the link http://www.hitsebeats.ninja/search/label/VALUE_HERE, which goes to the correct label in Blogger. In this last case, I thought about adding the event onclick:
<datalist id="languageList" onclick='location=this.options[this.selectedIndex].value;>
<option value='http://www.hitsebeats.ninja/search/label/OPTION1'>
OPTION1
</option>
</datalist>
But no success.
Adding another answer after OP feedback in the comments. This should redirect only if the typed option exists in the datalist.
<script>
function redirect(value) {
var options = document.getElementById("languageList").options;
for(var i = 0; i < options.length; i++) {
if (options[i].value == value)
window.location='http://www.example.com/' + value;
};
}
</script>
<form action="http://www.example.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="redirect(this.value)" />
<datalist id="languageList">
<option value='OPTION1'>OPTION1</option>
<option value='OPTION2'>OPTION2</option>
</datalist>
</form>
First Attempt
Using oninput on the input element you can change the location depending on what option you choose.
<form action="http://www.example.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="window.location='http://www.example.com/' + this.value" />
<datalist id="languageList">
<option value='OPTION1'>OPTION1</option>
<option value='OPTION2'>OPTION2</option>
</datalist>
</form>
Tell me if it is what you expected or not.
So just you know, datalist doesn't have selected events, it's not a user control. But you can listen to the input change event and them use it to change the url.