When the dropdown menu is opened, the "value=" part appears. The code works fine but I want to hide that part because the user doesn't need to see it. I'm also throwing this "value=" part as a variable in my code. How can I hide it?
I replaced "value=" to "data-value=". Its worked but I cant get data-value as a variable in Javascript. I need variables to use in API also.
<form>
<label for="start">Başlangıç Noktası:</label>
<input id="start" name="start" list="locations">
<datalist id="locations">
<option value="-0.09,51.505">London</option>
<option value=" -0.119470,51.511227">Strand, London, UK</option>
<option value="-0.140709,51.511284">Savile Row, London, the UK</option>
<option value="-0.168874,51.487370">King's Road, London</option>
</datalist>
<label for="end">Bitiş Noktası:</label>
<input id="end" name="end" list="locations">
<br />
<button type="button" onclick="getRoute()">Get Route</button>
function getRoute() {
// Get the start and end coordinates from the form
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
...[continuation of the code]...
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 a pretty basic form consisting of 3 elements – 2 text input boxes and a select drop-down list. What I’m looking to achieve when hitting the submit button is to open the page that is listed at the value for the drop-down option and also pass through the values/data entered into the 2 text boxes.
I can get the form to open the correct url from the selected drop-down item, however the two text inputs are not carried through to the opened page.
Can this be done? Any helps would be greatly be appreciated.
<p align="center">
<form method="POST" name="jump" class="center">
Start Time : <INPUT TYPE="TEXT" name="stime" SIZE="10" /><br>
End Time : <INPUT TYPE="TEXT" name="etime" SIZE="10" /><br>
<select name="menu">
<option value="#">Select a Device</option>
<option value="rep-fire.php">Firewall</option>
<option value="rep-wap.php">WAP</option>
.....
</select>
<input type="button" onClick="window.open(document.jump.menu.options[document.jump.menu.selectedIndex].value);" value="GO">
</form>
</p>
I would use url.searchParams and eventListeners
Note I changed name to ID
window.addEventListener("load", function() { // on page load
document.getElementById("jump").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
const path = document.getElementById("menu").value;
if (path) {
let url = new URL(location.href);
url.pathname = path;
let parms = url.searchParams;
parms.set("stime", document.getElementById("stime").value)
parms.set("etime", document.getElementById("etime").value)
console.log(url.toString());
// window.open(url.toString()); // uncomment when tested
}
})
})
<form method="POST" id="jump" class="center">
Start Time :
<input type="text" id="stime" size="10" /><br> End Time :
<input type="text" id="etime" size="10" /><br>
<select id="menu">
<option value="">Select a Device</option>
<option value="rep-fire.php">Firewall</option>
<option value="rep-wap.php">WAP</option>
</select>
<input type="submit" value="GO">
</form>
I am currently working with the Laravel Framework and I am working on a webpage that will allow a user to enter a start and end date in order to search through lists of tasks (by that filter). So far, a user can decide from a dropdown list if the date is BEFORE, is ON or is AFTER a certain date that gets selected from an html5 calendar (input type =date). What I'm trying to do is now add an additional option for them to select the start date/end date to be IN BETWEEN two dates. So I preferably want them to select the ' In between ' option, which should trigger a calendar (or two actually) when selected that will allow them to pick those two dates and allow me to store those two values.
I'm new to Javascript/HTML so any help would be very much appreciated!
Here is what I have so far in my HTML file:
<h6 style="float:left">Filter By Date:</h6>
<div style="float:left;clear:left;">
<label for="start">Start Date </label>
<select name="start_op" v-model="filter.start_option" #change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed-->
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="start" v-model="filter.start" #change="getVueTasks(pagination.current_page)">
</div>
<div style="float:left">
<label for="end">End Date </label>
<select name="end_op" v-model="filter.end_option" #change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed-->
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="end" v-model="filter.end" #change="getVueTasks(pagination.current_page)">
</div>
Note: I do have a separate vue/js file that handles mainly back-end stuff.
You can do something like this -
<select name="start_op" id="start_op">
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="start">
In jquery -
$(function() {
$("#start_op").on("change",function() {
var st_date= this.value;
if (st_date=="") return; // please select - possibly you want something else here
$('#start').click();
});
});
Hope this will helpful for you.
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 have a dropdown form that I have created - I need to have the dropdown either be auto-generated to a text box once selected or have it placed in the text box once a button has been pressed. For example "Get Hex"
Here is my dropdown:
<fieldset>
<legend>Logos</legend>
<p>
<label>Choose Desired Logo</label>
<select id = "Logo">
<option value = "00">Holden</option>
<option value = "01">HSV</option>
<option value = "02">Chevrolet</option>
<option value = "02">Chevrolet</option>
<option value = "04">CSV</option>
<option value = "05">Pontiac</option>
</select>
<input type="button" value="Show Hex" onclick="displaySelectedItem(val);" />
</p>
<p>
<input type="text" id="Logo" />
</p>
</fieldset>
And here is the last JS script i've tried. I have tried a few but I am surely missing something as nothing I command works.
<script language="JavaScript" type="text/javascript">
<!--
function displaySelectedItem(val)
{
alert(val);
}
//-->
</script>
So I need for the text box to contain the hex code in the <option value = "##">
I'll be using this throughout 6 different forms, all needing the same thing.
Change
<input type="button" value="Show Hex" onclick="displaySelectedItem(val);" />
to
<input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('Logo').value);" />
jsFiddle example