Determining selected value in cfselect and setting it to a variable - javascript

I have a couple of dropdown menus using cfselect e.g. city and country. I'm wondering how I determine the selected value and set variables to those values for use in another cfform.
Thanks.

Form1.cfm
<cfselect name="city">
<cfselect name="country">
After submitting the form to form2.cfm, city and country are available in the form scope and contain the selected choices by the user. No different than an HTML form?
Form2.cfm
<cfinput name="chosenCity" value="#form.city#">
<cfinput name="chosenCountry" value="#form.country#">

Related

Setting browser autofill values in dropdown JavaScript angular

I have an address form having Name, Address, Country and state, where country and state is dropdown.
Now User can autofill the form, but it does not work for dropdown. Is there any way that I can listen autofill event and then get the complete object of browser autofill values and then manually set the dropdown values?
I am not able to find anything related to this, any help?
Usually for a browser to autofill a select, input and textarea elements there needs to be:
a name and id attribute on the element
be a child of a form element
the form needs a submit button
You can find all these requirements here
You would then need to add the autocomplete="country" attribute for the country element and autocomplete="address-level1" for the state element.
Example:
<form>
<select id="country" name="country" autocomplete="country">
<option>Choose your country</option>
</select>
<select id="state" name="state" autocomplete="address-level1">
<option>Choose your state</option>
</select>
<button type="submit">Submit Form</button>
</form>

Requesting inputted data

I have a form which has a select input
<select class="form-control" id="taskSelect" name="taskSelect" >
<option value="" name="task" id="task">Select One</option>
<option value="1" name="task">1</option>
<option value="2" name="task">2</option>
</select>
Now depending on what is selected, a sub form appears. I have set up an example JSFiddle
Now I need to pass any data that has been completed to a function
submitHandler: function(form){
var params = $(form).serialize();
generatePDF(params);
}
Normally to get the input I would do something like this
$('#someInput').val();
But in my situation I dont know what will be inputted so I am serializing things. If selection 1 is selected, then I only need the inputs for the fields it displays, not the fields for selection 2. Serializing seems to capture all inputs, not the ones that I want.
What is the best way to only pass the inputted data to the function?
Thanks
Maybe you can try splitting the form into 2 parts. Once this is done you can serialize only the selected form. This is assuming you don't have any other form elements outside the two tasks you mentioned above

On select of dropdown value, the corresponding appropriate value should be populated in textbox

On select of dropdown value, the corresponding some appropriate value should be displayed in textbox. How to do this in Angular js? Like I have dropdown:
<select class="input-medium" ui-select2 name="affiliate" required ng-model="payout.affiliate.id" required gt-input-msg gt-error-msgs="gtErrorMsgs">
<option></option>
<option ng-repeat="s in affiliateList" value ={{s.id}}>{{s.affiliateName}}</option>
</select>
On select of any value I should be able to display property affiliate.points in some other div or textbox.
Kindly help me.
You could use the ngChange directive on the select element like so:
<select ng-model="selectedAffiliate" ng-change="GetAffiliatePoints(selectedAffiliate)"></select>
When the select value changes the selectedAffiliate property on your scope is updated to hold the selected value. Then you can look up the points for that affiliate and display them somewhere.

<select> tag posting all data when style="display:none;"

I have main categories and Sub categories of products when I select any main category it shows related sub-categories. But When I post the form it posts last sub-category value instead of selected sub-category value.
JavaScript Code
$(function() {
$('#category').change(function(){
$('.sub-category').hide();
$('#' + $(this).val()).show();
});
});
HTML code
<Select id="category" name="product_category">
<option value="eco">Main Category 1</option>
<option value="organic">Main Category 2</option>
</Select>
<Select name="product_sub" id="eco" class="sub-category">
<option value="eco1">Sub Category 1</option>
<option value="eco2">Sub Category 2</option>
</Select>
<Select id="organic" name="product_sub" class="sub-category" style="display:none;width:270px;">
<option value="organic1">Sub Category 3</option>
<option value="organic2">Sub Category 4</option>
</Select>
For Example: When I am selecting sub category 1 , its posting value of sub category 3
All successful form fields are submitted to the server. CSS display does not impact whether or not a form field is considered successful. The HTML spec defines what makes a control successful.
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated submit button is successful.
All "on" checkboxes may be successful.
For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be
successful. When no options are selected, the control is not
successful and neither the name nor any values are submitted to the
server when the form is submitted.
The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are
submitted with the rest of the form data. The file contents are
packaged according to the form's content type.
The current value of an object control is determined by the object's implementation.
If a control doesn't have a current value when the form is submitted,
user agents are not required to treat it as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons.
OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
Disable the form fields you do not want submitted.
$('#category').change(function(){
$('.sub-category').hide().prop('disabled', true);
$('#' + $(this).val()).show().prop('disabled', false);
});

Best practice for handling multiple copies of the same input fields client side?

I have a set of input fields that are "stacked" on top of each other.
<!-- This controls which data set you're looking at -->
<select class="EditorInput" id="Selector" name="Selector">
<option value="0">Link a new vendor</option>
<option value="1">The ACME Company</option>
<option value="2">Widgets Unlimited</option>
</select>
<!-- These values change based on the selection above -->
<input type="text" name="Price" />
<input type="text" name="SKU" />
<input type="text" name="Field3" />
<input type="text" name="Field4" />
<input type="text" name="Field5" />
<input type="text" name="Field6" />
<input type="text" name="Field7" />
<input type="text" name="Field8" />
Only one set shows at a time, but all set's values are kept in browser until submit. When you make a selection in the drop down, all of the input fields in the group change to show the user the values relevant to the selection. For example, choosing "The ACME Company" in the select field would make The ACME Company's price show in the price field, The ACME Company's SKU show in the SKU field, etc.
All data and all changes are stored client side. When data is saved (via AJAX), all of the values for each set are saved to the server at the same time.
Since submission is via AJAX, all the values don't necessarily have to be stored in input elements.
I can think of two main ways to do this:
Method 1
A single set of input elements, with data stored in a javascript object. On change of the select, the correct data is read out of the javascript variable and inserted into the fields. Any changes the user made to the first set are saved into the variable first. Choosing to add a new set saves the current values to a variable, then clears the values in the form.
Method 2
Have one whole set of input fields per option. Hide the non-active input sets. Changing the select shows/hides the right set. Adding a new set copies one of the existing sets, inserts the new input elements into the dom and clears the values of those new input elements.
Method 3
Use HTML 5 data to store multiple values, like:
<input type="text" name="Field8" value="$7.95" data-value-vendor-1="$6.99" data-value-vendor-2="$2.65" data-value-vendor-3="$12.24"/>
Then use javascript to switch the values into and out of "storage".
Which option make more sense? Or is there a better way? Also, with Method 1, where would the values for each set be stored? On the Select Option?
I would use a JSON-based data store and recycle the inputs, then submit the JSON store instead of form data. There are plenty of libraries (you're already using jQuery) to help with this on both the client and server end of things.

Categories

Resources