I have a select list on my test form that I am trying to get to work with parsley.js validation.
The parsley validation does work, but only when the default value of the select list is a blank value, except I need to have a value of 0 (zero).
So when the value of zero is selected / displayed in the select list the select list should be red with indicating that there is an error.
How do I get the select list to validate correctly, when I am using a default value of zero?
Here is an example of my select list with the zero value:
<select name="availability_type" id="id_availability_type" data-parsley-id="1601" data-parsley-required="true" data-parsley-required-message="You must enter at least one Detail." class="input-xlarge2 standard_input_style parsley-success">
<option value="0"> Do not display Availability</option>
<option value="1">Immediately</option>
<option value="2">1 week</option>
<option value="3">2 weeks</option>
<option value="4">3 weeks</option>
<option value="5">4 weeks</option>
<option value="6">> 4 weeks</option>
</select>
Here is the code line that works with a blank space as the value:
<option value=" "> Do not display Availability</option>
I finally got this to work using the data-parsley-min="1".
This way the input will not accept the value of zero.
Hope that this helps some one.
To make it work properly you needed to do the following
<!--Do this-->
<select id="select-id" required="" data-parsley-required-message="You must select at least one option.">
<option value=""> Do not display Availability</option>
.
.
</select>
Doing it witht data-parsley-min="1". would make your required message say something stupid like min value has to be at least 1 (even if you override it with the required message attribute)
Hope this helps any other person...
Related
I am working with laravel and in my form I am grab data to select input using some variable,
<label for="exampleFormControlSelect1">Vehicle Category</label>
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
#foreach($model_list as $model)
<option value="{{$categories->id}}">{{$categories->id}}</option>
#endforeach
</select>
Now I am going to hide this select input and this select input is depend to other select inputs values. So, I need select automatically drop down values to above select input using some technology. How can I do this? (currently it should select manually using drop down list)
Add selected="selected" to the first option.
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
{{$i = 1;}}
#foreach($model_list as $model)
<option value="{{$categories->id}}" {{($i == 1) ? "selected='selected' : ''"}}>{{$categories->id}}</option>
$i++;
#endforeach
If you need to select the first option of a select, you can do it in three ways
select.options
select.values
select.selectedIndex
For example having this form that contains the select that probably rendered blade
<form name="formName">
<label>Categories</label>
<select name="c_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
You could try
const category = document.forms.formName.c_id;
console.log(category.value)
console.log(category.options[0].value)
console.log(category.options[category.options.selectedIndex].value)
This will show on the console:
'1'
'1'
'1'
Visit this link to try the example
To read more about select and some useful options visit this article in select and option section
Now, probably I misinterpret your question, in your comment you mention that this select is dependent on another, this is not clear to me, does it have any relation to the data attribute? If this is the case, please develop your question
I want edit text with a drop down box along with custom scrollbar so end user can add data explicitly or can add from drop down box. The final entered value by end user should be saved.I want this in UI development preferably angular js.
Well from what i understood , you need a text input as well as a dropdown input together.
To be frank , this is quite easy and i dont understand what caught you up in this.
So here is the code:
<input type="text"/>
<select style="width:20px;">
<option value=""></option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
Check out the jsfiddle here:
https://jsfiddle.net/kna3fj5t/
I am using Map to populate Struts2 tag <s:select > , observed that when there are multiple submission of the form a blank line gets appened at the end of the list.
For instance, if Map has 2 key value pairs it show 3 records and append a blank record in the bottom(not at the top--for default case).
Item 1
Item 2
<-blank->
<s:select id="bankAccountId"
name="accountBean.recordDetails.BankAcct.bankAcctId" label=""
headerKey="" headerValue="" list="accountBean.bankAccountMap"
listKey="key" listValue="value" />
<select name="accountBean.recordDetails.BankAcct.bankAcctId">
<option value=""></option>
<option value="51089">BANK XXXX123</option>
</select>
<select name="accountBean.recordDetails.BankAcct.bankAcctId" id="bankAccountId"> <option value="-1" selected="selected">Default values</option> <option value="77746">Details XXXXXX2246</option> <option value="-1" selected="selected"> </option> <---this default value gets appened in the end... </select>
When i use s:select attribute emptyOption="true" same issue is observed but when emptyOption="false" top element becomes non-empty(which i dont want).
on re-submission
<option value="" selected="selected"> </option> extral option gets appened if prior to resubmission default/empty value was chosen..
Can this be handeled by javascript or jQuery??
As things seem, I think the problem is that you are adding the default value to the map after submission, so in the next rendering of the page, it already contains that item. Usually, you should refill your map in your prepare method, that way the -1 key won't be in the map.
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>
UPDATE: I was trying lots of different methods for doing this and none of them worked... until... I changed my dropdown menu name from (date-range) to (dateRange) removing the (-), sorry for wasting time!
I have a search form and a custom reset form button, which resets all the values in the form. I now have a dropdown menu and when the reset button is pressed, I want the first option to be selected.
This is my form:
<select name="date-range" id="date-range">
<option value="Any">Any date</option>
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="1 Week">Within 1 Week</option>
<option value="1 Month">Within 1 Month</option>
<option value="3 Months">Within 3 Months</option>
<option value="6 Months">Within 6 Months</option>
<option value="1 Year">Within 1 Year</option>
</script>
... and this is my javascript function that now needs to select the first dropdown value "Any".
function resetSearchForm()
{
document.searchFrm.searchStr.value='';
document.searchFrm.vertical.checked = true;
document.searchFrm.horizontal.checked = true;
** dropdown select first **
}
What is the proper way to do this? Any help gratefully received :)
This will work:
document.getElementById('date-range').selectedIndex = 0;
Example can be found here:
http://jsfiddle.net/yPmmG/3/
No javascript required, just add the selected attribute to the first option. That's what the attribute is for.
<option selected value="Any">Any date</option>
It is recommended that all select elements have one option with the selected attribute, that way there is always one selected by default. It will be the selected option when the page first loads and if the form is reset.