I have a select box:
<select id="issue-users_id" class="form-control" name="Issue[users_id]">
<optgroup label="user">
<option value="16">user</option>
<option value="24">robo</option>
</optgroup>
<optgroup label="group">
<option value="15">123123</option>
</optgroup>
</select>
when submit form I want to have array like this:
Issue[users_id][user] = value (16, 24)
or Issue[users_id][group] = value (15)
it means I want to get value of optgroup
All is possible is manualy prepare data and send it to server. On submit get form data and replace Issue.user_id param:
var selected = $('#issue-users_id').find(":selected"),
optgroup = selected.closest('optgroup');
if ( optgroup.attr('label') == 'group' ) {
form_data.Issue.users_id = {
group: selected.val()
}
} else {
form_data.Issue.users_id = {
user: selected.val()
}
}
$.ajax(/* send form */);
You can retrieve group through user id. User id is unique and can belong to one or more groups, so you can create method for this in according model, for example:
public function getGroup()
{
// return group name string here based on $this->id
}
Getting the value of optgroup from $_POST array is illogical.
Related
I want to show value on select option with ng-model but value doesn't show. This is my update page, so i must need ng-model from which i send my country_id also i need to show country name here is my code
<select data-ng-model="ticket[0].country_id" ng-option="x in ticket['get_country']"id="country">
<option value="{{ x.name }}">{{ x.name }}
</option>
</select>
this is the code from which i get the name of country from angularjs code
.then(
function successCallback(response) {
console.log(response.data['get_country'][0]['name']);
$scope.country = response.data['get_country'][0] ['name']
$scope.ticket = response.data;
},
function errorCallback(response) {
alert("Error. Try Again!");
}
You can use ng-options like this
<select data-ng-model="ticket[0].country_id" ng-option="x.name as x.name for x in ticket['get_country']"id="country"></select>
if you print the model, you can see the name of the item that what you selected.
I have a form with two select elements where users can select a product variant (for example red, green, blue shirt) and the quantity.
When changing the variant/quantity, I do a AJAX request to get the price.
The complicated part is: each variation has its own price and its own quantities. For example red shirts are 10 USD and at a minimum quantity of 5 (10, 15…). Green shirts are 15 USD but quantity starts at 3 (6, 9…).
(Color/shirt just an example, real products are control units for streetlights :-)
The problem is, when the default is 'red' and '5' and I change to 'green' the price shows 75 USD (AJAX query was green+5). But green only has quantities of 3, 6, 9 etc.
I could return the minimum quantity from my AJAX request, but then the user can't update the price when changing the quantity select.
Only solution I see is make two doSubmit() functions and two submitAjax(). But this would mean I have a lot of duplicate code.
HTML
<form action="" id="product_selection">
<select name="product_variation">
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>
<select name="product_quantity">
<option value="">10</option>
<option value="">20</option>
<option value="">30</option>
</select>
</form>
JavaScript
// Product variation, quantity select dropdown
var product_selection = document.querySelector('#product_selection');
var product_variation = document.querySelector('#product_variation');
var product_quantity = document.querySelector('#product_quantity');
// Event listener to submit the form on change
product_selection.addEventListener('submit', submitAjax);
product_variation.addEventListener('change', doSubmit);
product_quantity.addEventListener('change', doSubmit);
// Submit form
function doSubmit(event) {
product_selection.dispatchEvent(new Event('submit')); // product_selection.submit();
}
// Handle ajax submit
function submitAjax(event) {
// Stop default form submit
event.preventDefault();
// Ajax request
$.ajax({
url: '/static/public/ajax/get_product_data.php',
type: 'POST',
data: $('#product_selection').serialize(),
success: function(result) {
if (result == 0) {
alert('Sorry');
} else {
setProductData(result);
}
},
error: function(jqxhr, status, exception) {
alert('Sorry');
}
})
}
// Update product details
function setProductData(result) {
$('#product_price').html(result.price_gross);
// Remove current quantity options
var product_quantity = document.getElementById("product_quantity");
for(i = product_quantity.options.length - 1 ; i >= 0 ; i--) {
product_quantity.remove(i);
}
// … reapply new quantity options
var c = 0;
for (var i = result.minimum; i <= result.maximum; i+=result.graduation) {
product_quantity.options[c] = new Option(i + ' ' + pwjs.product.unit, i);
if (result.product_quantity == i) {
var setselectedIndex = c;
}
c++;
}
// product_quantity.selectedIndex = setselectedIndex;
}
I think you would want to do this in steps so product_variation.addEventListener('change', doSomethingElse);
then your select would be something like:
<select name="product_variation">
<option data-increment="5" value="r">Red</option>
<option value="g">Green</option>
<option data-increment="3" value="b">Blue</option>
</select>
then when the product_variation changes doSomethingElse would rebuild the product_quantity select to take the increment value of the selected product_variation
As far I can see, you are using jQuery. So, Ill give you an example of how you can achieve this.
HTML
First of all, don't forget to specify the values for your select options, your values for product_quantity were empty. Also, I'd recommend to you that you create an extra option tag to be the default selected option and be able to validate your form later on.
<form action="" id="product_selection" name="product_selection">
<select name="product_variation">
<option value="">Select color</option>
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>
<select name="product_quantity">
<option value="">Select quantity</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>
JavaScript
As for JavaScript, I'll recommend you to add the event listener for your last input, which is the product_quantity.
$("#product_selection").submit(function(e){
e.preventDefault();
var inputs = document.product_selection;
if( inputs.product_variation.value != "" && inputs.product_quantity.value != "" ){
$.ajax({
url: '/static/public/ajax/get_product_data.php',
type: 'POST',
data: $('#product_selection').serialize(),
success: function(result) {
if (result == 0) {
alert('Sorry');
} else {
setProductData(result);
}
},
error: function(jqxhr, status, exception) {
alert('Sorry');
}
});
}
});
I have the following select:
<select id="companiesDDL" class="compDDL tmpdisplay" onchange="location.href=this.value">
#foreach (var item in Model.companyList)
{
<option value='#Url.Action("Writeups", "Writeup", new { symbol = item.SecSymbol, status = "A" })'>#item.SecDesc</option>
}
</select>
This results in a list with options such as
<option value='/Writeup/Writeups?symbol=ssl&status=A'>Sasol Limited-Sponsored - ADR</option>
I want to set the selected value. I tried
$('#companiesDDL option[value="/Writeup/Writeups?symbol=tsla&;status=A"]').prop("selected", true);
but it did not work. How do I do it?
I am running into an issue with a select being displayed
I have a samplemodel value that is an interger in the database. As of right now, I want to do a select as below, but I want it to display the string. The value will be displayed in my two way binding markup but when I select a string of yes, no, or na in the select value, it doesn't display the string or anything at all.
How do I get my value to display the string vs a int.
{{samplemodel}}
<select class="input-large input-large-altered" ng-model="samplemodel">
<option value="1">Yes</option>
<option value="2">No</option>
<option value="3">NA</option>
</select>
Try using ng-options on your select. You can choose what you would like your model bound to that way.
Example:
$scope.myArray = [
{Val: 1, Display: 'Yes'},
{Val: 2, Display: 'No'},
{Val: 3, Display: 'NA'}
];
$scope.samplemodel = "Yes";
//Gives the Display string of the object
{{samplemodel}}
<select class="input-large input-large-altered" ng-options="item.Display as item.Display for item in myArray" ng-model="samplemodel">
</select>
OR
//Gives the val of the object
<select class="input-large input-large-altered" ng-options="item.Val as item.Display for item in myArray" ng-model="samplemodel">
</select>
OR
//Gives the whole object
<select class="input-large input-large-altered" ng-options="item as item.Display for item in myArray" ng-model="samplemodel">
</select>
Here is the plunkr to give you a full example.
Also to explain ng-options it works like so ng-options="[value] as [display] for [object] in [array]"
Update Please use #Ohjay44's method as it is more performant. I will leave this up as it is still a valid optin.
You would have to use a filter:
HTML
{{samplemodel | stringFromInt}}
JS
app.filter('stringFromInt', function(){
return function(input) {
if (!input){
return null;
} else {
return {1: 'Yes', 2: 'No', 3: 'NA'}[input];
}
}
});
https://plnkr.co/edit/DbQzDMSvCtyBWGSxvleU?p=preview
I have this input to allow user to select (with multiple choices) a product:
<select multiple="yes" name="products[]">
<option value="wood">Wood</option>
<option value="iron">Iron</option>
<option value="gold">Gold</option>
<option value="dust">Dust</option>
<option value="food">Food</option>
</select>
User can select several stuff in that list, and I can get in server-side using, for instance, PHP:
$_GET['products'] ← array('wood', 'iron', 'food');
Now, I would like to allow users to specify an order for the selection they made. So, I want the user to be able to not only set the list of items to select (like a <select multiple="yes">) but also in which order I will treat them.
In other words, let's say a user want the list to be ordered to:
$_GET['products'] ← array('gold', 'iron', 'wood', 'dust');
Currently, using the <select multiple="yes"> I can only ask user to unorderedly pick up items from a list but
what's the HTML tags I should use to allow user to select multiple options and specify its order?
I don't want to sort the options inside the <select>, I want the user to be able to tell the server in which order it should treat the selected items list.
I picked PHP example as server-side treating code (and it's the language I will use) but actually, the answer should not rely on server side language: I'm looking for the "html-client-side" code to use.
The following answer isn't exactly elegant but it get's the job done. I havn't been doing Web development long but I'm learning.
The JavaScript could be better as I'm used to jQuery (crutch I know).
Pure js (easier if you can use jQuery)
var products = [];
function add(val) {
if (!contains(products, val))
{
products.push(val);
document.getElementById('list').setAttribute('name', products);
}
}
// checks if arr 'a' has the element 'obj'
// thanks to someone at stack overflow for how to do that :)
function contains(a, obj) {
var i = a.length;
while (i--) {
if (a[i] === obj) {
return true;
}
}
return false;
}
html
// add the onclick='add()' function to your html
<select id='list' multiple="yes" name="" value='heyo'>
<option onclick='add("wood")' value="wood">Wood</option>
<option onClick='add("iron")' value="iron">Iron</option>
<option onClick='add("gold")' value="gold">Gold</option>
<option onClick='add("dust")' value="dust">Dust</option>
<option onClick='add("food")' value="food">Food</option>
</select>
Working jsfiddle here: http://jsfiddle.net/TcGt5/
<!-- language: lang-js -->
<script>
var jproducts = [];
var selectCount= 0;
function myFunction() {
var select = document.getElementById("mySelect");
// test if select value already exist
options = select.getElementsByTagName('option'),
for (var i=options.length; i--;) {
if (options[i].selected)
selectCount +=1;
if (function 'is_not_in_products_array')
jproducts.push(options[i].value)
}
// remove unselected products
for (var j=0; j< (jproducts.length-selectCount); j++;)
jproducts.shift();
}
</script>
Finnaly the products array will containt only the last selected
<select id="myselect" multiple="yes" name="products[]" onchange="myFunction()">
<option value="wood">Wood</option>
<option value="iron">Iron</option>
<option value="gold">Gold</option>
<option value="dust">Dust</option>
<option value="food">Food</option>