I have a DevExpress ComboBox to select an amount unit (g, mg, l, etc.) for an amount field.
#Html.DevExpress().ComboBoxFor( model => model.PackageAmountUnit,
settings =>{settings.Width= 60;}
).BindList(args => this.Model.Units, args => this.Model.Units).GetHtml()
I have two other amount fields on the page but the units of these fields have to be the same as the selected unit of the first amount field.
So I want to duplicate the selected unit value of the DevExpress ComboBox and duplicate it to the other two unit fields which are just text fields (so no user input possible).
Here's an example
Is there a way to get the selected value via JavaScript or is there another way to do this?
Thank you
You can do this in Javascript by adding a handler for the ValueChanged event of the ComboBox.
<script type="text/javascript">
function OnComboChanged(s,e){
var comboValue = PackageAmountUnit.GetValue();
AmountField.SetValue(comboValue);
}
</script>
#Html.DevExpress().ComboBoxFor( model => model.PackageAmountUnit,
settings =>{
settings.Width= 60;
settings.Properties.ClientSideEvents.ValueChanged = "OnComboChanged";
}
).BindList(args => this.Model.Units, args => this.Model.Units).GetHtml()
This question response from DevExpress may also help" https://www.devexpress.com/Support/Center/Question/Details/Q349035
This documentation may also help https://documentation.devexpress.com/#AspNet/DevExpressWebScriptsASPxClientEditBase_GetValuetopic.
Related
Gravity Form ID: 54.
I have a field where customers select their State. This is a standard dropdown field (Field ID is 11). I have another field (field ID 68) which is an "Option" field set as a dropdown. I want to be able to conditionally hide a few options/values in field 68 if the customer selects "Georgia" for their state (field 11). I read that I could achieve this through Javascript. I am very very new to JS and tried to piece together the code based on other requests, but my code is not working. None of the values are removed when I select Georgia as my state:
jQuery(document).ready(function( $ ){
jQuery("#input_54_11").on('change',function(){
var property_state = jQuery(this).val();
if (property_state == 'Georgia') {
jQuery("#choice_54_68_2").hide();
jQuery("#label_54_68_2").hide();
jQuery("#choice_54_68_5").hide();
jQuery("#label_54_68_5").hide();
}
});
});
Any help on what I am doing wrong would be greatly appreciated. As you can see above, I am trying to remove the third choice and the sixth choice in field 68 when Georgia is selected as a state. Also, I need to make sure that if a different state is selected after Georgia was first selected, that those options that were hidden reappear. Image below that also shows the labels in case that is easier to visualize.
If Georgia is the only state with special limitations on property types, you can create two versions of the Property Type field – one with the property types that are specific to Georgia and one with the property types that apply to all other states. Then you'd configured each field to show in the appropriate context (whether Georgia is selected or not).
If you have multiple states with different property types, I would recommend a more robust approach where the choices are updated dynamically based on a map of states and their available property types. I wrote a full article about this here:
https://gravitywiz.com/how-to-create-conditional-choices-with-gravity-forms/
You could do something like this in jquery:
jQuery(document).ready(function($) {
$("#input_54_11").change(function() {
var property_state = jQuery(this).val();
if (property_state == 'Georgia') { // get the selected state
jQuery("#input_54_68 option[value='Condominium']").hide();//replace with your value
}else{
jQuery("#input_54_68").children().show()
};
});
});
I actually agree with Dave and think using Populate Anything would be WAY easier though. His link explains exactly how to do it. And if you happen to have Gravity View Import Entries, you could make a spreadsheet of all the choice options and upload to the new form.
I have a form that has 3 drop downs to make selections, the first drop down allows the user to select a specific Type, the second box, the user must select a date which will then present users with the filtered options on the 3rd drop down which is done in Jquery. I had it working where the user only selects one option in the 3rd drop down.
Now I would like the user to select multiple options. The code below is what I used to get the single selection to update the hidden field and pass via form submission.
The below code minus the ".join('|')" outputs the values into the hidden field then it gets passed into a data storage via POST.
This is my code:
$('#TopicID').on('change',function()
{ TIDval.val( $(this).find(':selected').text().join('|') );
});
I tried several versions to get it to work if I remove the ".join('|')" the output gives me all of the values concatenated.
Value 1: tree
Value 2: boat
Value 3: car
The output is as follows: treeboatcar
but I need: tree|boat|car
I have updated my new code to reflect the solution suggested by Loading... in this thread to the following.
$('#TopicID').change(function(){
var selectedText = $(this).find(':selected').map(function(){
return $(this).text(); //$(this).val()
}).get().join('|');
$("#TopicID_value").text(selectedText);
});
Which now updates the hidden field value correctly with the pipe separated values but the value is no longer passed in the POST call when submitted in the form.
The hidden field
In firebug I see the value being updated properly when I select one or multiple options but for some reason the value gets lost in the submission process. I don't see much of a different where that could happen.
Use map()
$('#TopicID').change(function(){
var selectedText = $(this).find(':selected').map(function(){
return $(this).text(); //$(this).val()
}).get().join('|');
console.log(selectedText);
});
$('#TopicID').change(function(){
var selectedText = $(this).find(':selected').map(function(){
return $(this).text(); //$(this).val()
}).get().join('|');
console.log(selectedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="TopicID" multiple="true">
<option id="1">ABC</option>
<option id="2">XYZ</option>
<option id="3">PQR</option>
</select>
I'm working with jQuery in a .NET MVC project.
I use the following code to update a total on my form whenever a key is pressed or the value changes on the Quantity or Amount fields.
$(document).ready(function() {
$('##Html.IdFor(i => i.Form.Qty), ##Html.IdFor(i => i.Form.Amount)')
.change(calculateTotal)
.keyup(calculateTotal);
});
function calculateTotal() {
var qty = $('##Html.IdFor(i => i.Form.Qty)').val();
var amount = $('##Html.IdFor(i => i.Form.Amount)').val();
$('##Html.Id("TotalCost")').val((qty * amount).toFixed(2));
}
Whenever a key is pressed, the input (either quantity or amount) loses focus. I have narrowed this problem down to the last line in calculateTotal(). It seems setting the value of TotalCost removes focus from the source input of the event.
I'd like to find a work around.
EDIT:
As per #Christian Varga's suggestion, further testing has shown that this is not a jQuery problem. Rather it is interference from jquery.inputmask.
I need to create a dynamic select field in Rails 3.2, where the options available in the second fields (states) depends on the value of the first (country). I've referred to the revised version of this Railscast, and am using the following code:
jQuery ->
$('#person_state_id').parent().hide()
states = $('#person_state_id').html()
$('#person_country_id').change ->
country = $('#person_country_id :selected').text()
escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/#])/g, '\\$1')
options = $(states).filter("optgroup[label='#{escaped_country}']").html()
if options
$('#person_state_id').html(options)
$('#person_state_id').parent().show()
else
$('#person_state_id').empty()
$('#person_state_id').parent().hide()
I need to make two changes to this code, which I think should be pretty straightforward for someone with stronger javascript skills than I have.
In the filtered list, I need to include a blank option. Currently selecting a country results in the first state state in the filetred list being selected. I need to leave the prompt "please select". How can I do this?
EDIT
SMathew's suggestions helped here. I'm using $('#person_state_id').html(options).prepend('<option></option>') which, together with a prompt attribute on the html tag, acheives the required result.
If no country is selected (ie the else statement) person_state_id should contain a complete, unfiltered list of all states. I've tried:
else
$('#person_state_id').html(states)
But this is not behaving as expected. I'm having these issues.
If I select a country that has associated state records, #person_state_id options are correctly filtered (and with smathews suggestion, a prompt is included).
If I select a country with no associated state records, #person_state_id contains all states, a blank option in the markup, but the first state option is selected by default. (It should be empty, with a blank option selected by default and a prompt displayed).
If I clear the selection in #person_country_id, #person_state_id contains an unfiltered list of all states (correct), and an empty option in the markup (correct) but the first state record is selected by default (should be a prompt).
How can I resolve these issues?
Thanks
Try
...
if (options) {
$('#person_state_id').html(options).prepend('<option>Please select</option>').parent().show()
} else {
$('#person_state_id').html(states).prepend('<option>Please select a state</option>').parent().show()
}
To deal with my second problem, I added the following coffeescript
jQuery ->
resetCountry = ->
$('#person_state_id').select2 "val", "0"
$('#person_country_id').bind("change", resetCountry);
This, coupled with smathew's answer, seems to be working
(I'm using select2 to format my select fields. You'll need a different approach to set the value if not using select2)
I am using django on google app engine on my project.This is my first project so everyday i am finding new problems to face.My modelform is having two fields both having choices.For example, suppose the choice for first form field(lets say field1) in models.py is,
TITLE_TYPE = (
('A',A),
('B',B),
)
There are two choices for field two(lets say field2).
choice1=(
(1,'1'),
(2,'2'),
)
choice2=(
(3,'3'),
(4,'4'),
)
I want when user select item A in field1,the field2 should be choice1 automatically and when user select B in field1,the field2 should be choice2. Any suggestion.
The problem you describe will need some help on the client side, namely javascript. In general: Attach an event listener to field A and set the selected item in B accordingly.