I got a select tag with some options in a HTML form:
(the data will be collected and processed using PHP)
Testing:
<select name="Testing">
<option value="1"> One
<option value="2"> Two
<option value="3"> Three
</select>
Is it possible for an option to carry multiple values like when a user selects
"One", then a few other values related to this option will be written to the Database.
How should I design the select Tag so that each of the options can carry one than one value like this:
<select name="Testing">
<option value="1" value="2010"> One
<option value="2" value="2122"> Two
<option value="3" value="0"> Three
</select>
One way to do this, first one an array, 2nd an object:
<select name="">
<option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
<option value='{"foo":"bar","one":"two"}'>Option two</option>
</select>
I achieved it by using the PHP explode function, like this:
HTML Form (in a file I named 'doublevalue.php':
<form name="car_form" method="post" action="doublevalue_action.php">
<select name="car" id="car">
<option value="">Select Car</option>
<option value="BMW|Red">Red BMW</option>
<option value="Mercedes|Black">Black Mercedes</option>
</select>
<input type="submit" name="submit" id="submit" value="submit">
</form>
PHP action (in a file I named doublevalue_action.php)
<?php
$result = $_POST['car'];
$result_explode = explode('|', $result);
echo "Model: ". $result_explode[0]."<br />";
echo "Colour: ". $result_explode[1]."<br />";
?>
As you can see in the first piece of code, we're creating a standard HTML select box, with 2 options. Each option has 1 value, which has a separator (in this instance, '|') to split the values (in this case, model, and colour).
On the action page, I'm exploding the results into an array, then calling each one. As you can see, I've separated, and labelled them so you can see the effect this is causing.
its possible to have multiple values in a select option as shown below.
<select id="ddlEmployee" class="form-control">
<option value="">-- Select --</option>
<option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
<option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
<option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>
</select>
you can get selected value on change event using jquery as shown below.
$("#ddlEmployee").change(function () {
alert($(this).find(':selected').data('city'));
});
You can find more details in this LINK
one option is to put multi value with comma seperated
like
value ="123,1234"
and in the server side separate them
When I need to do this, I make the other values data-values and then use js to assign them to a hidden input
<select id=select>
<option value=1 data-othervalue=2 data-someothervalue=3>
//...
</select>
<input type=hidden name=otherValue id=otherValue />
<input type=hidden name=someOtherValue id=someOtherValue />
<script>
$('#select').change(function () {
var otherValue=$(this).find('option:selected').attr('data-othervalue');
var someOtherValue=$(this).find('option:selected').attr('data-someothervalue');
$('#otherValue').val(otherValue);
$('#someOtherValue').val(someOtherValue);
});
</script>
What about html data attributes?
That's the easiest way.
Reference from w3school
In your case
$('select').on('change', function() {
alert('value a is:' + $("select option:selected").data('valuea') +
'\nvalue b is:' + $("select option:selected").data('valueb')
)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select name="Testing">
<option value="1" data-valuea="2010" data-valueb="2011"> One
<option value="2" data-valuea="2122" data-valueb="2123"> Two
<option value="3" data-valuea="0" data-valueb="1"> Three
</select>
In HTML:
<SELECT NAME="Testing" id="Testing">
<OPTION VALUE="1,2010"> One
<OPTION VALUE="2,2122"> Two
<OPTION VALUE="3,0"> Three
</SELECT>
For JS:
var valueOne= $('#Testing').val().split(',')[0];
var valueTwo =$('#Testing').val().split(',')[1];
console.log(valueOne); //output 1
console.log(valueTwo); //output 2010
For PHP:
$selectedValue= explode(',', $value);
$valueOne= $exploded_value[0]; //output 1
$valueTwo= $exploded_value[1]; //output 2010
I did this by using data attributes. Is a lot cleaner than other methods attempting to explode etc.
HTML
<select class="example">
<option value="1" data-value="A">One</option>
<option value="2" data-value="B">Two</option>
<option value="3" data-value="C">Three</option>
<option value="4" data-value="D">Four</option>
</select>
JS
$('select.example').change(function() {
var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');
console.log(other_val);
});
If you're goal is to write this information to the database, then why do you need to have a primary value and 'related' values in the value attribute? Why not just send the primary value to the database and let the relational nature of the database take care of the rest.
If you need to have multiple values in your OPTIONs, try a delimiter that isn't very common:
<OPTION VALUE="1|2010">One</OPTION>
or add an object literal (JSON format):
<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>
It really depends on what you're trying to do.
Put values for each option like
<SELECT NAME="val">
<OPTION value="1:2:3:4"> 1-4
<OPTION value="5:6:7:8"> 5-8
<OPTION value="9:10:11:12"> 9-12
</SELECT>
At server side in case of PHP, use functions like explode
[array] = explode([delimeter],[posted value]);
$values = explode(':',$_POST['val']
The above code returns an array that has only the numbers and the ':' get removed
Simplest way to do this:
<select name="demo_select">
<option value='{"key1":"111","key2":"222"}'>option1</option>
<option value='{"key1":"333","key2":"444"}'>option2</option>
</select>
on controller decode the request value as given below:
$values = json_decode($request->post('demo_select'));
$val1 = $values->key1;
$val2 = $values->key2;
echo "Value 1: ".$val1;
echo "Value 2: ".$val2;
output for the first option:
Value 1: 111
Value 2: 222
output for the second option:
Value 1: 333
Value 2: 444
Use a delimiter to separate the values.
<select name="myValues">
<option value="one|two">
</select>
<?php>
$value = filter_input(INPUT_POST, 'myValues');
$exploded_value = explode('|', $value);
$value_one = $exploded_value[0];
$value_two = $exploded_value[1];
?>
Duplicate tag parameters are not allowed in HTML. What you could do, is VALUE="1,2010". But you would have to parse the value on the server.
Instead of storing the options on the client-side, another way to do this is to store the options as sub-array elements of an associative/indexed array on the server-side. The values of the select tag would then just contain the keys used to dereference the sub-array.
Here is some example code. This is written in PHP since the OP mentioned PHP, but it can be adapted to whatever server-side language you are using:
<FORM action="" method="POST">
<SELECT NAME="Testing">
<OPTION VALUE="1"> One </OPTION>
<OPTION VALUE="2"> Two </OPTION>
<OPTION VALUE="3"> Three </OPTION>
</SELECT>
</FORM>
PHP:
<?php
$options = array(
1 => array('value1' => '1', 'value2' => '2010'),
2 => array('value1' => '2', 'value2' => '2122'),
3 => array('value1' => '3', 'value2' => '0'),
);
echo 'Selected option value 1: ' . $options[$_POST['Testing']]['value1'] . '<br>';
echo 'Selected option value 2: ' . $options[$_POST['Testing']]['value2'] . '<br>';
This may or may not be useful to others, but for my particular use case I just wanted additional parameters to be passed back from the form when the option was selected - these parameters had the same values for all options, so... my solution was to include hidden inputs in the form with the select, like:
<FORM action="" method="POST">
<INPUT TYPE="hidden" NAME="OTHERP1" VALUE="P1VALUE">
<INPUT TYPE="hidden" NAME="OTHERP2" VALUE="P2VALUE">
<SELECT NAME="Testing">
<OPTION VALUE="1"> One </OPTION>
<OPTION VALUE="2"> Two </OPTION>
<OPTION VALUE="3"> Three </OPTION>
</SELECT>
</FORM>
Maybe obvious... more obvious after you see it.
<select name="student" id="student">
<option value="">Select Student</option>
<option value="Student Name|Roll No">Student Name</option>
</select>
<input type="submit" name="submit" id="submit" value="submit"></form>
i use data-attribute to get the value with simple javascript and blade template.
<select class="form-control" id="channelTitle" name="channelTitle" onchange="idChannels()">
#foreach($post['channels'] as $channels)
<option value="{{ $channels->channel_title }}" data-id="{{ $channels->channel_id }}">{{ $channels->channel_title }}</option>
#endforeach
</select>
the data-id result here
<div class="form-group">
<strong>Channel Id:</strong>
<input type="text" name="channelId" id="channelId" class="form-control" placeholder="Channel Id">
</div>
javascript
<script>
function idChannels(){
var elem=document.getElementById("channelTitle");
var id = elem.options[elem.selectedIndex].getAttribute('data-id');
document.getElementById("channelId").value = id;
} </script>
you can use multiple attribute
<SELECT NAME="Testing" multiple>
<OPTION VALUE="1"> One
<OPTION VALUE="2"> Two
<OPTION VALUE="3"> Three
Related
I'm looking to have a blog style page with multiple drop down filters. When a user changes I want to do an onChange event adding a parameter to the URL which would then adjust the content. I'd love to do this with AJAX but I want to get this bit functioning first.
Here is the basic form:
<form action="" method="GET">
<select name="channel">
<option value="" selected>Choose Channel</option>
<option value="facebook-ads">Facebook ads</option>
<option value="instagram-ads">Instagram ads</option>
</select>
<select name="brand">
<option value="" selected>Choose Brand</option>
<option value="brand-1">brand 1</option>
</select>
</form>
When it was one selet I just used the inline onchange event.
I'm looking for the url to change to an example like this:
exampleurl.com/blog/?channel=facebook-ads&brand=brand-1
I want to be able to have a script that would allow either one or both to be added to the URL when the value is selected. I don't want to use a submit button.
So if there is already a parameter in the URL and the user selects a value from the other dropdown, then that parameter would be added to the URL and won't remove the other value.
Really hoping someone can help me with this as after a day of searching and trying, I'm still no further.
Simple solution for your needs:
<form action="" method="GET" id="myForm">
<select name="channel" id="0" onChange="changeURL(0)">
<option value="" selected disabled>Choose Channel</option>
<option value="facebook-ads">Facebook ads</option>
<option value="instagram-ads">Instagram ads</option>
</select>
<select name="brand" id="1" onChange="changeURL(1)">
<option value="" selected disabled>Choose Brand</option>
<option value="brand-1">brand 1</option>
<option value="brand-2">brand 2</option>
<option value="brand-3">brand 3</option>
</select>
</form>
<p id="test"></p>
<script>
var filters = [,]; // create an array with empty values (only 2 in this case)
function changeURL(a) {
var yourUrl = "https://yourdomain.com"; // your url
filters[a] = document.getElementById(a).value; // set the value of the selected filter inside the array
var preFilter = "?"; // blank url will need a "?" to start with your filters
for(var i=0; i<filters.length; i++) {
aName = document.getElementById(i).name; // get the name of the filter
yourUrl += preFilter + aName + "=" + filters[i];
preFilter = "&";
}
document.getElementById("test").innerHTML = yourUrl; // test output of the new url
}
</script>
When change value my page is refresh because i have to send value to query data
but my selector doesn't show value when selected
<form name='active' action='' method='GET'>
<select class="form-control" id="section" name="section" onchange="list()" >
<option value="0"> - - Select All - - </option>
<?php
$section = $db->fetch();
foreach ($section as $key => $v) {
$section_name = $v['section'];
echo "<option value='".$section_name."'>",$section_name,"</option>";
}
?>
<script type="text/javascript">
function list(){
document.active.submit();
}
</script>
For an option in a dropdown other than the first one to be selected on page load, you have to add the selected="selected" attribute to one of the <option> elements like so :
<select class="form-control" id="section" name="section" onchange="list()" >
<option value="0"> - - Select All - - </option>
<option value="1" selected="selected"> I'm selected </option>
<option value="2"> I'm not selected </option>
</select>
In your case, it implies checking either the GET variable or the database value in your foreach loop to set the attribute accordingly.
I have a custom eCommerce build for a client, which contains inputs that need to be sent to the server for hashing before the form can post.
The basic setup contains two select fields, one for the flavor name and another for its corresponding quantity. The user can Add Additional Flavor, which adds another set of flavor name and quantity selects.
Since the number of flavors (and their quantities) are dynamic, I need hash these values right before the form is posted via AJAX.
How do I create the constructor function for the JSON example below so that I can post the users values to my PHP script via JSON.stringify()
Basic JSON format I (think) I am after:
var flavorSelection {
flavor1 : ["Bacon", "1"],
flavor2 : ["Cheezy", "2"],
flavor3 : ["Cheezy", "1"]
}
Sample select fields
<div>
<select name="flavors">
<option name="bacon" value="bacon">Bacon</option>
<option name="cheezy" value="cheezy">Cheezy</option>
</select>
<select name="qty">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
</select>
</div>
You need to adjust your html markup to send arrays to your server
<div>
<select name="flavors[]">
<option name="bacon" value="bacon">Bacon</option>
<option name="cheezy" value="cheezy">Cheezy</option>
</select>
<select name="quantities[]">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
</select>
</div>
not sure if it's the best way, but you will need to rely on the array indices to pair up your data.
you can easily loop and build your json the following way:
$flavors = $_POST['flavors'];
$quantities = $_POST['quantities'];
$json = array();
for($i = 1; $i <= count($flavors) $i++){
$json[] = array('flavor'.$i => array(
flavors[$i], quantities[$i]
));
}
echo json_encode($json);
That will give you the desired json, i don't know about hashing though.
You can just do:
<div>
<select name="flavors[]">
<option name="bacon" value="bacon">Bacon</option>
<option name="cheezy" value="cheezy">Cheezy</option>
</select>
<select name="qty[]">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
</select>
</div>
In PHP, when you use [] after form input names, the $_POST["field_name"] will receive an array.
then if you have 3 diferent flavors, your $_POST["flavors"] will receive an array with values "flavor one", "flavor two", "flavor three".
And your $_POST["qty"] will receive an array with the respective quantities of flavors, in the same order.
Then you use jQuery.serialize() to format your form data to submit using jQuery.ajax().
I have 2 drop downs, I would like to know whether there is a possibility to display and hide some of the options in second drop down based on value selected in first dropdown.
<script language="JavaScript">
function funchk(){
document.getElementById('z').style.display="block";
}
</script>
<select name="first" onchange="funchk();">
<option name="asw" value="a">sda</option>
<option name="sd" value="sd">ZZ</option>
<option name="rdf" value="afe">fe</option>
<option name="bfe" value="bfe">fe3</option>
</select> <?php echo "<br/>" ?>
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" style="display:none">ZZ</option>
<option name="r" value="a" style="display:none">aa</option>
<option name="b" value="b">bb</option>
</select>
Here i would like to display the 'z' option in 2nd dropdown to be displayed when onchging value of first dropdown.
No, you can't rely on setting the CSS to show/hide <option> elements.
You'll need to remove them, or just simply disable/enable them.
function funchk() {
document.getElementsByName('z')[0].disabled = false;
}
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" disabled="disabled">ZZ</option>
<option name="r" value="a" disabled="disabled">aa</option>
<option name="b" value="b">bb</option>
</select>
you have to do that with javascript
here you can find different examples how to do that.
http://www.satya-weblog.com/2008/08/javascript-remove-delete-select-option.html
http://www.plus2net.com/javascript_tutorial/list-remove.php
Make use of Document Object Model(DOM) along with Javascript Events to manipulate HTML nodes.
I am trying to develop a code in js where i have three feilds in a form
one is the price that is dynamic and other is the drop down in which i had ten values from 1 to 10 I want whenever I select option from dropdown i should get the total price base on the unit price
any kind of help appreciated
i don't know if I exactly understand what you want, but i tried write some code. You can test is on jsfiddle
so html markup can look something like that:
<input type="text" id="priceId" value="5" />
<select id="priceTypeId" name="priceType">
<option value="1">1</option>
<option value="2">2</option>
...
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="text" id="resultId" />
and jQuery functions for this are:
$(document).ready(function() {
$('#priceTypeId').change(function() {
$('#resultId').val( $('#priceTypeId').val() * $('#priceId').val() );
});
});
If you have any question, I'll try to answer quickly.
Use some thig like these:
<script type='text/javascript'>
function FieldOnChange()
{
// put logic here use document.getElementByID('FieldID').value;
}
</script>
<form>
<select name='title' onchange='javascript:FieldOnChange();'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
...
</select>
<!-- rest of your form -->
</form>
You need to add an onchange to your drop down and have it call a javascript function that does the calculation and sets the new value of the field.
<script type="text/javascript">
function recalculate()
{
var f = document.forms.myform;
f.cost.value = f.price.value * f.qty.value;
}
</script>
<form action="doStuff" method="post" id="myform">
<p>Price<input type="text" id="price"/></p>
<p>Quantity
<select id="qty" onChange="recalculate()">
<option id="0">0</option>
<option id="1">1</option>
<option id="2">2</option>
</select>
<p>
<p>Cost<input type="text" id="cost"/></p>
</form>