Develop Reference

Laravel Populate Select Box Based on Another Select Box

I am not sure where even to start with this. I am using Laravel and LaravelCollective form fields. What I am looking to do is populate a second select box script (containing dates) based off of the selection in the first select box patient containing names. I'm assuming it will involve JavaScript somehow?
The Script model contains a patient_id column that links it to the Patient model, so that can be used to filter the script dates to only those that the patient owns.
Controller
$patients_select = Patient::orderBy('last_name', 'asc')
->get()
->pluck('full_name', 'id');
$scripts_select = Script::orderBy('prescribe_date', 'desc')
// ->where('patient_id', $patient_id)
->pluck('prescribe_date', 'id')
->map(function ($date, $key) {
return date('m/d/Y', strtotime($date));
});
Blade
<div class="form-group">
{{Form::label('patient', 'Patient')}}
{{Form::select(
'patient',
$patients_select,
null,
['class' => 'form-control', 'placeholder' => 'Select a Patient']
)}}
</div><!-- /form-group -->
<div class="form-group">
{{Form::label('script', 'Script')}}
{{Form::select(
'script',
$scripts_select,
null,
['class' => 'form-control', 'placeholder' => 'Select a Script']
)}}
</div><!-- /form-group -->

You're gonna have to listen to change event on event the patient select (yes, in javascript). There are at least two possibilities here:
Store all the "script" data in a javascript variable and, then populate options in the script select.
Render all the possible selects in the .blade file and hide them with display: none. Depending on the patient selection you will have to show only one script select. Be careful not to send them all when submitting the form.
Well you could also reload the page after selecting, but I doubt you wanna do that. ;)

ASP MVC Bootstrap - Select2 DropDownListFor Displays Duplicate Boxes

I have an ASP.net MVC project. All of my DropDownListFor's display as 2 boxes instead of 1. This is what the view looks like currently:
This is what the view SHOULD look like:
Here is the code from the view:
<div class="col-xs-12 col-sm-6 col-md-4 ">
<div class="form-group select-280">
#Html.LabelFor(model => model.HoleID)
<br />
#Html.DropDownListFor(model => model.HoleID, (List<SelectListItem>)ViewData["HoleList"], new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.HoleID)
</div>
</div>
Javascript from the view to make the DropDownListFor Searchable (Select2):
$(document).ready(function () {
$("#HoleID").select2();
}
Why are all of my DropDownListFor's displaying as duplicates, and how can I correct this bug?
EDIT
Removing the .select2() fixes the bug and removes the duplicate dropdown... however that makes the remaining dropdown not searchable. how can I fix this while still maintaining the search functionality?

I've experienced this using Kendo, and it's all around the form-control. The issue is the dropdown gets transformed into something more dynamic; the original SELECT element might actually get hidden in the UI. Select2 is probably using multiple elements to represent the select, and the original form-control class gets applied to both elements, and forces them to show, instead of show and hide. Or the form-control class is forcing the original select to show.
I had to stop using form-control, and then create a special class just for kendo controls just to not cause one of the elements to always show...
The way to figure that all out is inspect the markup. You'll see the form-control class getting passed down to the internal elements.

This was determined to be a server error via the Visual Studio publish process. The bootstrap select2 files were not existing correctly in the server.

changing a control label to a button to access my terms & conditions page in Razor Views

Hi I need to change this label to a button to link to my Terms & Conditions page on my site. Right now it is a label and checks the AGREE box next to it
to show that the user has agreed to terms. I would like it to be a button that
displayed the terms and then give the ability to check the AGREE box next to the label if the person agrees with terms. I'm new to Razor Views and I'm
not sure how to proceed.
Thanks
<div class="form-group">
#Html.LabelFor(model => model.AgreedToTerms, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.AgreedToTerms)
#Html.ValidationMessageFor(model => model.AgreedToTerms)
</div>
</div>

A button might be less ideal for MVC and routing to another page, I suggest an action link.
Try using an #Html.ActionLink, pass the name of the action and controller that handles that action to it, which can send a user to the AgreedToTerms page.

Passing a form value to the next form element without submitting form

I have this issue where I have created a form (using Laravel), it looks like this in part:
{{-- Choose a category from the radios provided, this is where I need to get the $category->id and pass it to the next element for the sub category selection
--}}
<div class="form-group">
<p><b>Choose a category:</b></p>
#foreach (App\Http\Models\GalleryCategories::all() as $category)
{!! Form::label('category_id', $category->name) !!}
{!! Form::radio('category_id', $category->id, null, ['class' => 'form-field']) !!}
#endforeach
</div>
{{-- Using the category id passed to this form-group I can then access only the sub categories
that have a gallery_categories_id = category --}}
<div class="form-group">
<p><b>Choose a sub category:</b></p>
#foreach (App\Http\Models\GallerySubCategories::all() as $sub_category)
{!! Form::label('sub_category_id', $sub_category->name) !!}
{!! Form::radio('sub_category_id', $sub_category->id, null, ['class' => 'form-field']) !!}
#endforeach
</div>
The way I have the database setup is that a category has many sub categories. So first it will display a list of categories, something like:
cat1 ( ) cat2 ( ) cat3 ( ) ...
Then the form will display the sub categories like this:
subcat1 ( ) subcat2 ( ) subcat3 ( )
But what I want to do is that when someone selects a category I want to capture that $category->id and then pass it immediately to the next form element that will then display the sub categories that relate to that category.
Easy enough if I was to break it all down and submit a couple of forms to pass the data back and forth however I wanted to be able to achieve this without the form being submitted.
It seems JS/Ajax would be the best way to accomplish this, I am not sure. What do you think? I have no experience yet with either however I am going to guess that it could be a fairly simple process.
Thanks

What you probably want it's to use jQuery and use the .change() event on the radio buttons that contain the categories. Then you take its value and via AJAX you send to the server the category ID and have returned via JSON their subcategories. With this JSON, you just have to loop its content, and build the new radio buttons that contain the new information. Seems a pretty easy task, there is no need at all to submit forms for this.

Angularjs, checking if radio buttons in form have been selected

I'm starting with AngularJS, and I'm building a multi-step form where user has to fill different pages. When finished a page, he's allowed to press a next button and fill the following page.
For the first page, I've built in the HMTL a form (named pageOneForm), with different text input fields, marked as required, and in the relative controller I'm doing this watch:
$scope.$watch('pageOneForm.$valid', function(validity) {
ModelData.actualPageCompleted = validity;
})
And it works like a charme. My model (ModelData) is updated.
I was trying to apply the same logic to the following part of the app, the second page. Instead of input text, the user has to select two options from 2 different radio buttons groups.
So I built in the html a list of buttons via ng-repeat :
<div ng-Controller="PageTwo" ng-show='data.actualPage == 2'>
<form name="pageTwoForm">
<h3>General Information > Knowledge About </h3>
<div>
<b>User</b>
<div ng-repeat="option in userOptions">
<input type="radio" name="userGroups" ng-model="data.knowledgeAboutUser" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
</div>
<div ng-repeat="option in targetGroupUserOptions">
<input type="radio" name = "targetUserGroup" ng-model="data.knowledgeAboutTargetGroup" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
</div>
</div>
</form>
and I've implemented the same code as above in its controller:
$scope.$watch('pageTwoForm.$valid', function(validity) {
ModelData.actualPageCompleted = validity;
})
but apparently it doesn't work, and in my model actualPageCompleted is always true...
What am I doing wrong?
Thanks

I did my best to create a controller with some dummy data to get a fiddle working with your example code. Here is the fiddle You need to force the $digest cycle to update your form's validity state on ng-click for the radio buttons (see this SO post for more details), which is why the method
$scope.forceDigest = function(){
setTimeout(function(){ $rootScope.$$phase || $rootScope.$apply(); });
};
is necessary. Alternatively, you can get rid of the method call and uncomment the html code
<h3 ng-show="false">{{data.knowledgeAboutTargetGroup}}</h3>
<h3 ng-show="false">{{data.knowledgeAboutUser}}</h3>
in the fiddle to force the form object to update as well.
And I would make sure that ModelData.actualPageCompleted is not retaining its true value from when pageOneForm.$valid became true and it was set.
I hope that this helps!