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.
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 have an issue related to an HTML page. Hoping that someone could help resolve it -
I have an HTML page with a Country select and a Text Box. The value attribute of the Option tag contains the Country codes. When the User selects a country, its respective country code should get populated in the Text Box.
This will happen each time the User changes the country.
All of the data is present in the page itself, and no server calls are made to fetch the data.
Could this be done using the delegate method? Can I also use Ajax in this case?
Any help would be very much appreciated.
Many thanks in advance!!
By using Jquery
Try this
HTML
<select id="c_code">
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<input id="code" type="text">
Script
$('#c_code').on('change',function(){
$('#code').val($(this).val());
});
DEMO
You simply need to bind the logic to the change event of select
Here is the html code
<select id="ddl">
<option value="001">India</option>
<option value="002">USA</option>
</select>
<input type="text" id="txt" />
Here is the jQuery
$('#ddl').change(function(){
$('#txt').val($('#ddl').val());
});
Here is the demo
<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.
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());
});
i have a little form with a select list, and i am submitting the form every time i select an item. the problem is that, after selecting a value and submitting the form, the selected item doesn't remain selected. Is there any method to keep the selected item selected in the list, after the form submit? (using javascript for example)?
<form name="order_of_products_by_values" id="order_of_products_by_values" method="post" action="">
<select id="order_of_products_by_values" name="order_of_products_by_values" onChange="this.form.submit();">
<option value=1 >Pret crescator</option>
<option value=2 >Pret descrescator</option>
<option value=3 >Test</option>
<option value=4 >Test</option>
</select>
</form>
thank you!
If you can't use a server side solution, you could set a cookie after the onchange-Event fires and submit the form. For informations about javascript cookies, take a look at the following site: http://www.quirksmode.org/js/cookies.html
What if you use AJAX? If you use jQuery you can submit the form and the select list wont be altered after selection.
jQuery('#order_of_products_by_values').change(function() {
jQuery.post('ajax/test.php', jQuery("#order_of_products_by_values_FORM").serialize());
});
Also, notice I changed the ID of the form since it is the same ID as the select list which can cause conflicts.
The serialize function will serialize the form and send it to the test.php script where it can be used as usual. Ex:
$select = $_POST['order_of_products_by_values'];