I have a list of countries and their area codes in a database. I am trying to auto update a text field with the countries area code when a select option is selected.
ex.
<select name="country">
<option value="CA" code="+1">Canada</option>
...
</select>
<input type="text" name="phone" />
I need to pass on to the script the value CA and the users need to see Canada. Basically what I'm asking is can I create a new option code and have jQuery update the text field that I choose to it.
Is this possible to do? or is there another way I can accomplish this?
Edit: "code" is supposed to be the country's area code. So when a user selects Canada for example the text field phone gets updated with +1. I know I can just set value to +1 and then use .change() to update phone's .val() but I need the current value to pass on to the script that processes it.
I suggest you use an HTML5 data- attribute instead of a custom attribute:
<select name="country">
<option value="CA" data-code="+1">Canada</option>
...
</select>
<input type="text" name="phone" />
and then bind a handler to the change event:
$('select[name="country"]').change(function() {
$('input[name="phone"]').val($(this).children('option:selected').data('code'));
});
or with less jQuery:
$('select[name="country"]').change(function() {
$('input[name="phone"]').val(this.options[this.selectedIndex].getAttribute('data-code'));
});
Another option would be to have a country -> code map in JavaScript
var map = {
'CA': '+1',
...
};
and then look up the code.
Be sure to assign each element an id.
var code = $('#country option:selected').attr('code');
$('#phone').val(code);
If "code" doesn't work. Use "title".
Not entirely sure what you're asking, but dos this help?
$('select[name=country]').change(function() {
$('input[name=phone]').val($(this).find('option:selected').attr('code'));
alert('Do something else with this: ' + $(this).val());
});
$("select[name='country']").change(function() {
$("input[name='phone']").val($(this).find('option:selected'));
});
You can try this. It ties into the select menus change event and then gets the "code" attribute value and sets the text of the input to it.
Related
I want to show the detailed address of a selected recipient name from a dropdown menu. So, if I choose address A, it will display the details of address A.
I'm already working on the code but the issue is it doesn't show the correct value, instead it shows the last record in the database. Here's the code:
Blade
<select class="address-detail form-control" id="address" name="address_detail" data-target=".detail-info-address">
<option value="option_select">Select Address</option>
#foreach($addresses as $address)
<option value="{{$address->id}}" data-show=".info-address">{{$address->recipient_name}}
</option>
#endforeach
</select>
<div class="detail-info-address">
<div class="info-address hide text-left">
<p>Recipient Name: {{$address->recipient_name}}</p>
<p>Contact Number: {{$address->contact_number}}</p>
<p>Address: {{$address->address}}</p>
<p>Address Note (optional): {{$address->address_note}}</p>
<p>Post Code: {{$address->post_code}}</p>
<p>Province: {{$address->province}}</p>
<p>City: {{$address->city}}</p>
<p>District: {{$address->district}}</p>
<br>
</div>
</div>
Controller
public function buynow($id) {
$addresses = Address_Delivery_Users::where('user_id', '=', Auth::user()->id)->get();
return view('/transactions/delivery', compact('addresses'));
}
Javascript
<script>
$(document).on('change', '.address-detail', function() {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.address-detail').trigger('change');
});
</script>
Your problem is that the variable $address is defined in the foreach loop, therefore the last element of the loop will be set to $address.
Hence, your address block will always contain the attributes of the last address element. After initial rendering of the page, you are not able to display another address in the PHP variable $address.
It is important that you differnetiate between PHP which is server-side and JS which is client-side.
You will have to listen to the change event of the select and get the new data. There are two options for that.
You make an ajax request to your server and return the address-object and set all fields correspondingly.
In your foreach loop you add for every attribute of your address a data-<varaible_name> html attribute and onchange get all data- attributes and insert them in the correct fields of your address block.
I would recommend using Vue.js for this task. However if you are new and don’t have much experience at all you might try plain JS/Jquery at the moment.
I have a form which sends information with post method to another page. In the form I have a select box with three options, for example:
<select name="slctstate" id="slctstate">
<option value="0">aaaaa</option>
<option value="1">bbbbb</option>
<option value="2">ccccc</option>
</select>
In another page, I read the selected item with $_POST['slctstate'], but I want to read all options (key & value) in the select tag.
Can I do this?
First use a jquery function which stores all the options in a string
$(document).ready(function()
{
var myoption = '';
$('#drop_down option').each(function()
{
myoption = myoption + ',' + ($(this).val());
});
$('#hidden_text').val(myoption);
}
);
in the html use a hidden field
<input type="hidden" id="hidden_text" name="hidden_text"/>
WHen you will submit the form, catch this value with a list of options separated by (,);
On the action page, you can split the value using php explode() function
Check the fiddle
http://jsfiddle.net/1u9x5nbq/3/
No you can't without a work-around. The only value gets passed is the selected value. If you want to know all values you can use a work-around in javascript e.g.:
<select name="slctstate" id="slctstate">
<option value="0">aaaaa</option>
<option value="1">bbbbb</option>
<option value="2">ccccc</option>
</select>
//Include JQuery
<script>
$(function()
{
$('#slctstate option').each(function()
{
$('#slctstate').after('<input type="text" value="'+$(this).text()+'" name="slctstateOptions['+$(this).val()+']" style="display:none;" />');
//Where val() is the key and text() is the value.
});
});
</script>
Then you can access the values by using $_POST['slctstateOptions'].
No, you can't do that from the form. When you do submit, you send only selected value(s).
No,
The only value that is "selected" will be POSTed on Submit.
I am populating the options in dropdown list using mySQL output. These output values are ranked and I want to keep only top 20 values out of 100 in it. Most of the users are interested in only one of these top 20 items. Occasionally a user may want to look something which is low ranked (21st, 22nd ... item).
I remember that I saw this in some website where if the desired option is not present, an option was there "not in the list". Selecting this option creates an input box where a user can write their value.
How this functionality can be acheived? Suggestion of any article pointing to similar problem will be highly appreciated.
Using javascript you can do this fairly easily. Since no HTML was provided, I made a sample:
HTML:
<select id="test">
<option value="0">Sample</option>
<option value="other">Other</option>
</select>
<input type="text" id="test2" style="display:none;"/>
JS:
document.getElementById("test").onchange = function() {
var textbox = document.getElementById("test2");
if (this.value == "other") {
textbox.style.display = "block";
} else {
textbox.style.display = "none";
}
}
Demo: http://jsfiddle.net/DtRhk/
How can I insert an additional input textbox after an onchange event in a selectbox with the YUI library?
It is required to use YUI and the form is created with the PEAR Quickforms lib.
What I have yet is this:
$form->addElement('select', 'names', "Choose Name", $options, array('style'=>'width:300px', 'onchange' => 'name_changed(this.value);'));
$js =
<<<EOS
<script type="text/javascript">
function name_changed(name) {
alert('name is changed');
}
</script>
EOS;
$form->addElement('static', 'jsembed', '', utf8_encode($js));
The alert pops up if I change the option in the selectbox, this works for testing.
Now I need to check the chosen option and if this equals 'NEW', there should appear a text input field to enter a new name under the select box.
My problem is, that I don't know to do it right that the entered name is also passed to the submitted quickform data.
So I've created the element normally with $form->addElement('input',...) and copied the html source of this. On the option change event I've tried to insert the raw html code at the right position with this:
var htmlContent = '<div id="fitem_id_dbname" class="fitem fitem_ftext"><div class="fitemtitle"><label for="id_dbname">Create new DB </label></div><div class="felement ftext" id="yui_275"><input size="60" name="dbname" type="text" value="" id="id_dbname"></div></div>';
document.getElementsByClassName('fcontainer clearfix').innerHTML = htmlContent;
But this doesn't work, there appears no input field in the browser.
Could anybody show me how to do it right?
Lots of thanks!
I solved it for me now with the...
'style'=>'display:none'
...property in the quickform textinput element and use...
document.getElementById('id of the input element').style.display = 'block';
... which is called on the onchange event.
I want to create a PHP array of a select list. The list have dynamic options, the options are filled with the help of javascript. I want to get all the options on next page.
So I want to create an array of options. Is there any another way to complete this stuff?
Can anybody help me out? Thank you so much in advance.
<script type = "text/javascript">
var val = "";
function removeOptions(selectbox) {
val = selectbox.value;
for (var i = selectbox.options.length-1; i>=1; i--) {
if (selectbox.options[i].selected) {
addOption(document.form1.list2,val,val);
selectbox.remove(i);
document.form1.list1.focus();
}
}
}
function addOption(selectbox,optiontext,optionvalue ){
var optn = document.createElement("OPTION");
optn.text = optiontext;
optn.value = optionvalue;
selectbox.options.add(optn);
}</script>
//list1
<select name="list1" size="7" multiple="multiple" id="jumpMenu" onchange="removeOptions(this)" style="width:200px">
<option>Choose Area...</option>
<?php foreach($dbh->query($sql) as $row){
$a=$row['name'];?>
<option value="<?php echo $a?>"><?php echo $a?></option>
<?php }?>
</select>
//list2
<select name="list2" size="7" multiple="MULTIPLE" id="list2" style="width:170px">
</select>
First: if You want to use multiple with select box, then this selectbox's name have to contain sharp brackets: name="list1[]" and name="list2[]" - this way a PHP will know that this is an array of values.
Second: learn jQuery - though it may seem hard in the beginning it will save You a lot of time and browser-compatibility problems in the future. And jQuery will save Your a*s many times in the future.
For Your purpose I would recommend not just using onchange events but implement additional 4 buttons between the two multiselectboxes that will move the selected options from one to another or all from one to another. This kind of multiselect looks like the one pictured below.
By the first button >> all the options from 1. select are moved to the second one and vice versa with the 4th button <<.
By the second button > only the selected option(s) is(are) moved the second select and vice versa with the third button <.
By this You only catch the click event on the buttons... That is really easy using jQuery...