<form method="get" action="http://example.com/" name="currencies">
<div>
Currencies:
<select onchange="this.form.submit();" class="select" name="currency">
<option value="USD" selected="selected">US Dollar</option>
<option value="EUR">Euro</option>
<option value="GBP">GB Pound</option>
<option value="CAD">Canadian Dollar</option>
<option value="AUD">Australian Dollar</option>
</select>
<input type="hidden" value="index" name="main_page"/>
</div>
</form>
when i select the GB Pound, all the function is ok except that the default selected is still US Dollar.when i delete the selected="selected" in <option value="USD"... when i change to Australian Dollar. the item shows on the select drop list is still US Dollar. why?
The "default" selection applies when the page first loads, and will be either the option with the "selected" attribute, or the first option when none were specified as "selected".
The View Source facility shows what the browser originally received from the webserver, not the current state of everything on the page after the user (or JavaScript) has changed things.
If you use JavaScript to get values of fields (e.g., in response to some user action) the current values will be reported.
When you submit the form, the current values of your form fields will be sent to the web server and can be accessed by your server-side code.
If the result of submitting the form is to redisplay the same page and you want the previously selected option to still be selected then you should use server-side code to apply the "selected" attribute to the appropriate option. What server-side technology are you using? PHP? (Or JSP, .NET, ...?)
When you choose "Australian Dollar" the action url will have "currency=AUD" but the HTML code itself does not change. The selected="selected" still stays with the US Dollar.
You could use some simple jQuery to move the selected attribute if you like in the DOM, but if you refresh the page, you will still have the same, original HTML you started with.
Related
I would like to have a text-input field that also has an optional drop-down. The ideal ui would look like a text input on default and accept text but when you click an arrow, a drop-down will show. It would also be nice to have the drop-down be implemented with select2 to allow easy searching of values (and that's what I've tried already).
My first attempt used the tagging feature in select2 but it's not exactly what I want as the user will type and then have to select their new input. The default is also not a text-input in this case. Thanks for any help. Also the options can't be hard-coded as we're polling a db for the items that the list would show.
updates:
An example would be something similar to this: jqueryui.com/datepicker/#icon-trigger... where the default is an input text field and we have a button to select the date, but in this case, it's a button which would overlay a drop-down on the text-field.
I also looked at datalist and that would work but I don't think you can not hard-code the options.
Something like this: http://jqueryui.com/autocomplete/#combobox .. would be perfect. But changes would be that it has to accept any entered option rather than reject it and also grab from a list instead. I'm not too familiar with front-end stuff, so if this is possible to do, can you let me know how and the basic idea? I don't think the list can be populated with something like a http get request?
try using datalist html tag:
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
I'm wondering if I can get some assistance. I have a form that I want to submit data to a database. However, I am getting an issue doing so with the following code. The select inputs are set to disabled so if nothing is selected then the form doesn't submit those fields (fields by default are still submitted blank.
<div class="form-group">
<label for="title">
Title
<span class="asteriskField">
*
</span>
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" selected disabled>Please select</option>
<option value="Master">Master</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Rev.">Rev.</option>
</select>
</div>
Thank you.
Using disabled on option in selectbox isn't good solution, because it does not force user to select option. If he does not click on selectbox, blank value will be posted.
To force user to select option use required on selectbox, and also leave default option disabled, so he will have to choose one option.
use Form OnSubmit event and create formdata manually in javascript with the fields you want to send to server based on conditions.
This is simply the way forms work in HTML. When you submit a form, all the input fields are retrieved and sent to the designated action. However, selectboxes that were not selected are not part of the post.
If you want to send a list of all select boxes (including the ones that are unselected), a common trick is to create a hidden input with the same value for each selectbox. This way you get a list of all the selected fields, as well as the entire list of selectable fields.
It's a wrong behavior, you should validate if nothing it's selected with javascript or some backend code before any query into DB. Don't use disabled in fields that you want, in some way, retrieve some kind of data, because you're changing the intrinsic behavior of the element, confusing the next guy that will work with your code.
If nothing is selected you can return false into your backend with some error message or just disable the visualization of submit button with javascript.
EDIT: The solution from #Autista_z is good about
To force user to select option use required on selectbox, and also leave default option disabled, so he will have to choose one option.
I just want to empathize: don't let the backend without that validation too, double validation (front/back) is a must.
I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks
A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).
I need to get the value of the last option, from a box. "SelCONTACTS"
I have a webbrowser control in VB6 and i have it source code in a TextBox
<select name="SelCONTACTS" onchange="javascript:setTimeout('__doPostBack(\'SelCONTACTS\',\'\')', 0)" id="ctl00_ContentPlaceHolder1_ddlContratos">
<option selected="selected" value="30393">6-4002582</option>
<option value="194177">A-70P0096</option>
<option value="220499">B-7000902</option>
</select>
the name SelCONTACTS is a fixed name, it wont change. VALUES and CONTENTS of LIST ITEMS do change.
Only thing i can imagine is to search for the string and go a couple spaces back (but thats an horrible way to do it)
</option>
</select>
I'm currently working on a paypal checkout form. The form allows the user to specify a few options and when they submit the form, it submits the order to paypal for processing.
The form has a <select> droplist that allows a user to select how many times they want a subscription to recur. It is set up like this:
<select name="srt"> <!-- User specifies amount of times payment should recur -->
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
<input type="hidden" name="src" value="1"> <!-- Specifies that payment should be recurring-->
This works in most cases, however when the user selects the first option with the srt value="1", paypal instead wants this to be submitted with srt blank or omitted and src (the hidden input below the form) with value="0". The reason for this seems to be that if the payment is to recur 1 time, meaning to charge the customer only once, then this is not a recurring payment at all, so srt is not valid and instead src, which specifies if payments should recur or not, should be set to 0.
I'm wondering what is the best way to handle this. The only thing I can think of is to use javascript to set hidden form values depending on what the user selects in a <select> drop list.
Is that the best way to handle this, or is there a better way that does not require the browser to handle javascript?
Thanks!
First of all I would like to make it clear that all values computed in the browser must be validated on the server. There really is no substitute for server side validation. Client-side scripts must only be used to improve user experience. Failing to do so is a security hole waiting to be exploited.
To solve the issue at hand you could exploit the fact that disabled inputs aren't submitted when a form is posted. Thus if the user doesn't select to make a recurring payment srt will never get posted.
Start out with srt both disabled and hidden.
The hidden input src should have a value of 0 to start with.
Add a "Recurring Payment?" checkbox to the form.
If the user selects the checkbox, enable and show srt via Javascript.
Set the value of src equal to whatever the user selects in srt.
Disable and blank out srt and src if the user ever unchecks the checkbox.
DEMO
Markup:
<p><input type="checkbox" value="recurring" id="recurring"/>Recurring Payment?</p>
<select disabled id="srt" name="srt">
<option selected value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" id="src" name="src" value="0">
jQuery:
$('#recurring').click(function() {
var $srt = $('#srt'),
$src = $('#src');
if (this.checked) {
$srt.prop('disabled', false).toggle();
$src.val($srt.val());
} else {
$srt.prop('disabled', true).toggle();
$src.val(0);
}
});
$('#srt').change(function() {
$('#src').val($(this).val());
});