Hmm...this question may sounds silly , hope you all don't mind...
If I have a drop list:
<select name="myoption" onchange="document.textbox.value=this.value">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<input type="text" name="textbox" id="textbox">
So with this now the textbox will display what is selected , but is it possible to display the A,B,C instead of 1,2,3?
Actually I need a drop-list which will display 2 different values to 2 textbox,such as if A is selected,textbox1 will display "A" and textbox2 will display "1".
I don't know if it is possible and I tried for some times already...can someone give me some hints?
Thanks in advance.
Yes, it is possible. I would just externalize all javascript into a separate file to avoid mixing markup and scripts.
So the script:
// subscribe for the DOM ready event to ensure that you
// are manipulating the DOM only when it is loaded
window.onload = function() {
// subscribe for the onchange event of the dropdown
document.getElementById('myoption').onchange = function() {
// fetch the text of the currently selected element
var text = this.options[this.selectedIndex].innerHTML;
// and assign it to the corresponding input
document.getElementById('textbox').value = text;
};
};
and the markup:
<select name="myoption" id="myoption">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<input type="text" name="textbox" id="textbox" />
and a live demo.
Related
I have a website that lets you create brackets by guessing scores and the winning teams for the world cup. Right now you just have to fill in the bracket by hand. I would like it to where it would be reading what they are inserting while they are inserting the scores and make some calculations to be able to put the winners for the groups instead of them having to calculate the points by hand. The scores and winners are inserted in input fields or select fields. Is there anyway to do that using php, html, or anything. I just cannot find anything and am looking for someone to just lead me in the right direction. Examples of my code will be put below just to help. Thanks!
Clarification: Okay so lets say the teams selects Brazil for the firstGroupA. How can i put that in a variable to use later before they actually submit. Like when you fill out a bracket and u choose a team it moves to next round automatically. Something like that. I want to grab the information to make the bracket filling more userfriendly but I dont know how to grab it until they click the submit button.
<td><input type="number" name="home16" min="0" max="9" required>
-<input type="number" name="away16" min="0" max="9" required></td>
<td><select name="firstGroupA" required>
<option value="">Select</option>
<option value="Brazil">Brazil</option>
<option value="Croatia">Croatia</option>
<option value="Mexico">Mexico</option>
<option value="Cameroon">Cameroon</option>
</select></td>
I think you want something like this:
document.getElementById('my_select')
.addEventListener('change', function () {
document.getElementById('from_sel').value = this.value;
}, false);
See this fiddle
Or, using JQuery:
$('#my_select').on('change', function() {
$('#from_sel').val(this.value);
});
Fiddle with JQuery
Use JavaScript or jQuery to get the values.
For example, if you want to get the value from the firstGroupA using the select's onchange event:
<td><select id="firstGroupA" onchange="jsMethod()" name="firstGroupA" required>
<option value="">Select</option>
<option value="Brazil">Brazil</option>
<option value="Croatia">Croatia</option>
<option value="Mexico">Mexico</option>
<option value="Cameroon">Cameroon</option>
</select></td>
JavaScript:
function jsMethod(){
var firstGroupA = document.getElementById("firstGroupA");
var firstGroupVal = firstGroupA.options[firstGroupA.selectedIndex].value;
// do whatever you want with the value in firstGroupVal
}
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
I'm trying to store variables from select/option, and then access them from a button to send to a javascript function that would filter some divs on my page.
So far I have it sending the value to "filter()" when the value changes.
Here's my markup:
<select name="Area" onchange="filter(this)">
<option selected>Select</option>
<option value="Austin">Austin</option>
<option value="San Antonio">San Antonio</option>
<option value="Temple">Temple</option>
</select>
<select name="Number" onchange="filter(this)">
<option selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<a class="button">Submit</a>
but how do I store the values from all the options, and then send them
all at once to the function?
Edit: In other words, how do I store the value of each option, and only send to the function once they click submit?
If I got it right, without jQuery you may try this:
document.getElementById("button").onclick = function() {
var selects = document.body.getElementsByTagName("select");
var data = [];
for (var i = 0; i < selects.length; i++) {
data.push(selects[i].value);
}
destinyFunction(data);
};
Or you may use jQuery for the sake of simplicity:
$("#jbutton").on("click", function() {
var data = [];
$("select").each(function() {
data.push($(this).val());
});
destinyFunction(data);
});
Fiddle with those two examples here.
Give each of your selects an id attribute, like:
<select name="Number" onchange="filter(this)" id="Number">
...
Then you can get the value of each in javascript by:
var el = document.getElementById('Number');
var value = el.options[el.selectedIndex].value;
As a sidenote, using onchange in HTML markup to attach your event handling is not best practice. This article from quirksmode offers a good explanation of alternative solutions. However, there are major cross-browser considerations to be taken into account, which is why most people prefer to use a Javascript framework so that those are mostly mitigated.
I have a selection of countries that a user can choose from. They are displayed in a dropdown box. At the moment I can select one country and it will populate it in the input box, however i want to know if there is a way of selecting more than one and it puts them in the same box.
The data will be populated from a mysql database
Hope im making my self clear.
Here is my code so far:
JAVASCRIPT:
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
var selObj = document.getElementById('countries');
var txtTextObj = document.getElementById('txtText');
var selIndex = selObj.selectedIndex;
txtTextObj.value = selObj.options[selIndex].text;
}
//-->
</script>
HTML:
<form>
<p>
</form><select id="countries">
<option value="val0">Australia</option>
<option value="val1">England</option>
<option value="val2">France</option>
<option value="val3">Italy</option>
<option value="val4">South Africa</option>
</select>
<input type="button" value="Show Index" onclick="showSelected();" />
</p>
<p>
<input type="text" id="txtText" />
<br />
</p>
</form>
So what i would want is if you choose Australia, it shows Australia in the box, then go back to the dropdown and choose South Africa it puts it into the same box as: Australia, South Africa.
Thank you Guys
why no just append new selections to the text already in the inputbox.
txtTextObj.value += selObj.options[selIndex].text +', ';
Use Multiple select box and name as array:
<select id="countries" multiple="multiple" name="countries[]">
<option value="val0">Australia</option>
<option value="val1">England</option>
<option value="val2">France</option>
<option value="val3">Italy</option>
<option value="val4">South Africa</option>
</select>
Now the select will treat as array. Use javascript code to fetch the values selected and convert it to comma separated list and put in the input box.
<select id="countries" multiple="multiple">
<option value="val0">Australia</option>
<option value="val1">England</option>
<option value="val2">France</option>
<option value="val3">Italy</option>
<option value="val4">South Africa</option>
</select>
Use multiple="multiple" in your select box to make multiple selections.
i want to know that how to get multiple selectbox values in php
means that i have more than 1 select box on a page and it can be increased when user click on addmeans that a page can contain numerous selectboxes now plz tell me how to get the values from that boxes and also how do i get know that how many select boxes were used by user
i think an array should be used but i dont know how??
<select name="select" id="select">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value2</option>
</select>
<select name="select" id="select">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value2</option>
</select>
<select name="select" id="select">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
like in above example
how do i get know that how many selectboxes were used and how to get value of each box
code for adding the new dropdown
function addRow()
{
var newRow = document.all("tblGrid").insertRow();
var oCell = newRow.insertCell();
oCell.innerHTML = "<select name='select' id='select'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select>";
First of all you need to use unique id and name for each select box. Otherwise it is difficult to manage them after post.
So you can do it something like this:
<select name="myselect[]" id="select1">
<select name="myselect[]" id="select2">
<select name="myselect[]" id="select3">
After form post you can get all select box values:
print_r( $_POST['myselect'] );
For number of select boxes on page you can try:
echo count( $_POST['myselect'] );
Change the name attribute value in each tag to something unique like 'select1','select2','select3' . To refer these values in PHP use $_POST['select1'] and so on. OR use $_GET['select1'] incase of get method is used in the form.