I'm building a laravel project (version 9) and I need to use selectize.js for my select inputs.
I need to show a placeholder like "Select product" so users can click on it, search for items and choose one. And I need this field to be required.
Here's a sample select input :
<select name="product_id" id="select_product" class="form-control my-3">
<option value="">Select product</option>
#foreach($products as $product)
<option value="{{$product->id}}" data-price="{{$product->price}}" data-stock="{{$product->stock}}">{{$product->name}}</option>
#endforeach
</select>
This one works fine, it's not required though. And submiting the form with this field empty throws an error, I need it to be required on the front-end level.
BUT, when I add required to the select input, it doesn't show ANY of the options I'm loading inside select box with foreach loop. Doesn't even show a dropdown when I click on it.
Is there a way to have a placeholder and make the field required at the same time in select.js? If not, do you know any alternative to select.js that works with Laravel?
I also tried giving a placeholder through selectize function with JS, nothing changed, it shows placeholder but no items being shown (when the input has required tag).
<select name="customer_id" class="form-control" id="select_customer" required>
<option value=""></option>
#forelse($customers as $customer)
<option value="{{$customer->id}}">{{$customer->name}}</option>
#empty
<option value="" selected disabled>No customer found</option>
#endforelse
</select>
$('select').selectize({
placeholder: 'Select something',
});
Simplest way to put it : Select input doesn't show any options when I add required tag to it. (I'm loading options with laravel blade foreach loop.)
Related
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've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:
$scope.aAnimals.push({"animal": ""})
This causes a problem with the dropdown, since the value of "animal" is equal to ""
<Option style="display: none" value=""> Select an animal </option>
Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.
What I can do? I want the generated text fields to be empty, and the dropdown adds the item.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' value={{item.animal}} class='animal' />
</div>
$scope.obj = {}
$scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
$scope.add=function(){
$scope.aAnimals.push({ "animal": ""})
}
http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview
Let me verify what you need.
When the user click on the Add button, a new empty text box will be create in the page and a new empty option will be create in the drop down. When the user change the value in the text box, the drop down option will change.
In this case your need to modify the code like this.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' class='animal' ng-model='item.animal' />
</div>
I removed track by opt.animal like Pankas said, and added ng-model='item.animal', also don't need value={{item.animal}} since we use AngularJS 2-way binding.
Your code is working perfectly, just remove display none in option
<option value="">Select an animal</option>
I seen you are using jquery in Save functionality. We have jqlite in built in angular. Please check below code for save.
var length = $scope.aAnimals.length;
$scope.aAnimals[length-1].animal =
angular.element(document).find('.animal').eq(length-1).val();
I am facing some problem in drop down of angular js. Below is the html code
<select class="form-control" ng-init="projectName = options[0]" ng-model="projectName" name="projectName" ng-options="project.name for project in projectsList track by project.id" ng-class="{'submitted': submitted}" ng-selected="projectName" required>
<option value="">Select Project</option>
</select>
all the things coming fine.
But what i want is after selecting value from drop down we submit the form and in success am getting the value what i have selected. Now i want to set this value for the drop down, how to do it ?
In jquery it works
$("dropdown").val('successCallBackValue');
but in angular how to do it
After the sucess of the form submit just set the value in the dropdown model value as,
$scope.projectName = yourValue; // whatever selected value you are getting.
<select class="form-control" ng-init="projectName = options[0]" ng-model="projectName" name="projectName" ng-options="project.name for project in projectsList track by project.id" ng-class="{'submitted': submitted}" required>
<option value="">Select Project</option>
</select>
I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).
I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?
I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.
(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")
Lets say there is something like this:
<div class="col-md-8">
<select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
<option value="" disabled selected>Select</option>
<option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>
Use ngOptions.
<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>
With ng-options you can do it like this:
<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
<option value="" disabled selected>Choose a Country</option>
</select>
</div>
The location.id is set to the options value and the location.name is set to the text.
To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic
I have a set of input boxes and you can add more and more sets of these forms if you click the add more button. In my form I can submit data and I have got it to show up when you reload the page. However, I am stuck at making sure all of the fields have values before I run my AJAX. I use Jquery for this project
I cannot use a validation plugin because I am running magento and every time I try running the plugins in "No Conflict Mode" the plugins do not seem to work. Because I am running Magento this means I need to run Jquery in no conflict mode.
I have seen other solutions for this however they are all to do with input boxes and I have 1 input boxes and 2 select boxes. How can I make sure that all the input boxes are filled before and that all the select boxes that are not disabled have something selected before the ajax call?
Here is part of my HTML:
<form>
<input id="12">
<select id="1">
<option disabled="disabled" selected="selected">select please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
<select id="2">
<option disabled="disabled" selected="selected">Select Please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
Using a click event, if you use .val() on your <select/>, it will return null if there is no value attribute on your <option/>.
Note: This will not work if you put a value attribute on your options.
Edit: Doing a !== compare will be faster.
$("#submit-button").click(function(){
//if this is true, then it is valid
alert($("#1").val() !== null);
});
You can do it by getting the inputs value into a property.
This script would alert the number of how many inputs aren't complete or missing with base in your structure.
(no jQuery)
var myForm=document.getElementsByTagName("form")[0];
var formSelectors=myForm.getElementsByTagName("select"),
formTextBoxes=myForm.getElementsByTagName("input"),
missing=0;
var i,
length=formSelectors.length;
for(i=0;length>i;i++){
if(formSelectors[i].value===formSelectors[i].children[0].value)
//Check if select value is equal to
//select please or Select please
//MISSING! (select)
missing++
}
length=formTextBoxes.length;
for(i=0;length>i;i++){
if(formTextBoxes[i].value.length===0)
//MISSING! (input)
missing++
}
alert(missing)
Try this:
if($('#12').val()!='') {
// your code
}