We Keep Coding

Adding form elements with javascript before and after validation in Laravel

I have a customer registration form, it has a button for adding additional phone number fields. After submitting the form and validating the input, the page needs to recreate the same forms with the old inputs. I made the below solution, I would like to know if this is an efficient way and also if I can not create the empty lines, since currently it will recreate all fields even if they were empty.
html
<h3>{{__('Phone Numbers')}} <button type="button" id="addPersonPhone">+</button></h3>
<input type="hidden" name="personPhoneLines" id="personPhoneLines" value="{{(old('personPhoneLines')? old('personPhoneLines') : 1)}}">
<div id="personPhone">
<div class="form-group row">
<div class=" col-2">
<label class="col-form-label col-form-label-sm" for="personPhoneType-1">{{__('Type')}}</label>
<select class="custom-select form-control-sm" id="personPhoneType-1" name="personPhoneType-1">
<option selected value=''>{{__('Choose')}}...</option>
#foreach ($phonetypes as $phonetype)
<option value="{{$phonetype->id}}" {{(old( 'personPhoneType-1')==$ phonetype->id)? "selected":""}}>{{$phonetype->name}}</option>
#endforeach
</select>
</div>
<div class="col-3">
<label class="col-form-label col-form-label-sm" for="personCountryCode-1">{{__('Country')}}</label>
<select class="custom-select form-control-sm" id="personCountryCode-1" name="personCountryCode-1">
<option selected value="">{{__('Choose')}}...</option>
#foreach ($countries as $country)
<option value="{{$country->id}}" {{(old( 'personCountryCode-1')==$ country->id)? "selected":""}}>{{$country->name.' (+'.$country->dialing_code.')'}}</option>
#endforeach
</select>
</div>
<div class="col-4">
<label class="col-form-label col-form-label-sm" for="personPhoneNo-1">{{__('Number')}}</label>
<div class="input-group mb-2">
<input type="text" class="form-control form-control-sm" placeholder="{{__('Number')}}" name="personPhoneNo-1" id="personPhoneNo-1" value="{{old('personPhoneNo-1')}}">
</div>
</div>
</div>
javascript
var phoneLines = parseInt($("#personPhoneLines").val(), 10);
var phoneRow = $('#personPhone').html();
var oldPersonPhones =["{{old('personPhoneNo-1')}}", "{{old('personPhoneNo-2')}}",
"{{old('personPhoneNo-3')}}", "{{old('personPhoneNo-4')}}", "{{old('personPhoneNo-5')}}"];
for (i = 2; i <= phoneLines; i++) {
newLine = phoneRow.split('personPhoneType-1').join('personPhoneType-' + i);
newLine = newLine.split('personCountryCode-1').join('personCountryCode-' + i);
newLine = newLine.split('personPhoneNo-1').join('personPhoneNo-' + i);
$("#personPhone").append(newLine);
$("#personPhoneNo-" + i).val(oldPersonPhones[i-1]);
}
$('#addPersonPhone').click(function(){
if (phoneLines >=5) {
alert('You cannot add more than 5 lines')
} else {
phoneLines = phoneLines + 1;
newLine = phoneRow.split('personPhoneType-1').join('personPhoneType-'+phoneLines);
newLine = newLine.split('personCountryCode-1').join('personCountryCode-'+phoneLines);
newLine = newLine.split('personPhoneNo-1').join('personPhoneNo-'+phoneLines);
$("#personPhone").append(newLine);
$("#personPhoneLines").val(phoneLines);
}
});

Best practice would be to change your input name to an array like this:
<select name="people[phone_type][]"></select>
<select name="people[phone_country_code][]"></select>
<input type="text" name="people[phone_number][]">
This way you can simply duplicate the fields, without needing to name them after something.
Then in your validation you can refer to docs for your fields: https://laravel.com/docs/5.6/validation#validating-arrays
And to parse in your controller simply loop them to get the array you need.

Show / Hide Elements within the same parent div

I'm having trouble getting a div ('.option-other') within a parent group ('.other-row') to show/hide when the corresponding option of the select element ('.select-toggle') is selected. Right now if "other" is selected from either question set 1 or 2 it will show both of the '.option-other' divs. I tried using .parent() and .closest() as described in this solution, but can't seem to figure out the proper way to utilize it for this use case.
$(".select-toggle").change(function() {
var oth = false;
$(".select-toggle option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
if (oth) $('.option-other').show();
else $('.option-other').hide();
// tried this method as well but still doesnt work
// if (oth) $(this).closest('.other-row').children('.option-other').show();
// else $(this).closest('.other-row').children('.option-other').hide();
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>

// you wrote:
// tried this method as well but still doesnt work
// if (oth) $(this).closest('.other-row').children('.option-other').show();
// else $(this).closest('.other-row').children('.option-other').hide();
You're close, but $.children only selects direct children of each .other-row. Since .option-other is inside .col inside .other-row, $.children can't see it. Use $.find instead.
// your original code:
var oth = false;
$(".select-toggle option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
This sets one visibility value for the entire page: if at least one "other" option is selected, anywhere, show all the text inputs. The change event is fired for the <select> that actually changed, so focus your efforts there:
var oth = false;
$(this).children("option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
if (oth) $(this).closest('.other-row').find('.option-other').show();
else $(this).closest('.other-row').find('.option-other').hide();
This works, but it could be cleaner. Showing or hiding an element based on a boolean is a common enough requirement that jQuery has a function for it: $.toggle. You can replace the if/else lines with
$(this).closest('.other-row').find('.option-other').toggle(oth);
Your $.each loop does one thing: set oth if there exists at least one selected <option> with a value of "other". You can get the same logic as a one-liner by using an attribute selector:
var oth = ($(this).find('option:checked[value="other"]').length !== 0);
(I changed :selected to :checked because you're already filtering on option elements, and :selected has a performance penalty.)
The final version:
$(".select-toggle").change(function() {
var oth = ($(this).find('option:checked[value="other"]').length !== 0);
$(this).closest('.other-row').find('.option-other').toggle(oth);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
Vanilla JS version:
document.querySelectorAll('.select-toggle').forEach(el => {
el.addEventListener('change', evt => {
const oth = evt.target.querySelector('option:checked[value="other"]');
evt.target
.closest('.other-row')
.querySelector('.option-other')
.style.display = (oth ? '' : 'none');
});
// trigger change event programmatically
const event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
});

Here is a solution that is a little clunky but I did it relatively quick. It's kind of a work around for having to know which of your two selectors with the same class had been selected.
Here is a working example using your code.
$(".select-toggle").change(function () {
var oth = false;
$(".select-toggle option:selected").each(function () {
if ($(this).val() == "otherFood") {
oth = true;
$('.option-other-food').show();
} else {
$('.option-other-food').hide();
};
if ($(this).val() == "otherDrink") {
oth = true;
$('.option-other-drink').show();
} else {
$('.option-other-drink').hide();
};
});
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="otherFood">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other-food">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like"/>
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="otherDrink">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other-drink">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like"/>
</div>
</div>
</div>
Cheers!

Angular js, on ng-change how to update options of other select control

On change of year value I want to change options of Make drop down, but not getting how to update options of other control.
Below is my plunker with form.
https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
api.php is server response these options should display in Make drop down on change of year.
autoQuoteCtrl.js
$scope.updateMakeList = function(){
}
index.html
<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>
<span class="form-error" ng-show="submitted && DTOstep1.VehicleYear.$error.required">This field is required.</span>
</div>

You need to put this function in your controller -
$scope.updateMakeList = function(name)
{
// Your logic to change value in Make dropdown
$scope.questions[name].VehicleMake.QuestionData._answerOptions = [{'_value':"test",'_promptText':"Test"}];
}
And update your HTML (year select box)-
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList($state.current.name)" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>

How to enable disable a select drop down list using radio buttons with angularjs?

I have been searching all over for the internet looking on how to enable or disable this drop down list using radio buttons specifically when the radio button value is equal to prof the drop down list should be disabled, but with no help. I did come up with an example but didn't work. Any help would be appreciated.
registration.html
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
//This is the drop down that I need to diable
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
This is the code I implemented to work above scenario. But didn't work :(
regController.js
$scope.$watch('QualificationDetails.qualicication_type', function (QualiType) {
if (angular.isUndefined($scope.QualificationDetails)) {
return;
}
if (QualiType === 'prof') {
$scope.QualificationDetails.qualification_type = $scope.QualiType;
}
else {
if ($scope.QualificationDetails.qualification_type !== null) {
$scope.QualiType = $scope.QualificationDetails.qualification_type;
$scope.QualificationDetails.qualification_type = null;
}
}
});
the above scenario is that when it comes to qualifications if qualification type is equal to professional (prof) drop down list is disabled and when it is educational the drop down list should be enabled. Any idea on how to achieve this.
This is the Quality level json. I get it through the qualitylevel.service.
(function initController() {
deptService.getdepts(function (res) {
$scope.depts = JSON.parse(res.data);
});
qualiService.getquali(function (res) {
console.log("inside ");
$scope.qualiLevel = JSON.parse(res.data);
});
console.log("inside service");
})();

It seems to me, that your code works fine without watcher you have added. I hope I understood what you want correctly. Try this snippet:
angular
.module('app', [])
.controller('Ctrl', function($scope) {
$scope.qualiLevel = [
{quali_level: 'A', qualification_id: 1},
{quali_level: 'B', qualification_id: 2}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
</div>
</div>

As the control is radiobutton, your QualificationDetails.qualification_type value will be set to 1 or 0 and not to the label value. You have to have different variables for two radio buttons. Based on their value you have to set QualificationDetails.qualification_type = 'prof' or something
You can also try $parent.QualificationDetails.qualification_type instead as answered in How can I get the value of the checked radio button when submitting a form using angularjs?

Thanks everyone for helping me out. Just felt wanted to show I implemented it correctly and other programmers to increase their knowledge. Using $watch to temporaly hide the drop down list details).
the registrationController.js
$scope.$watch('QualificationDetails.qualification_type', function (Val) {
if (angular.isUndefined($scope.QualificationDetails))
return;
if (Val !== 'prof') {
$scope.QualificationDetails.qualification = $scope.tempValue;
}
else {
if ($scope.QualificationDetails.qualification !== null) {
$scope.tempValue = $scope.QualificationDetails.qualification;
$scope.QualificationDetails.qualification = null;
}
}
});
Implemented through this example.

PHP Not Recognizing Array in HTML Form "name" Attribute

I have a list of and fields where users enter the name of an item and the quantity. The PHP function
generateMaterialsTable();
is responsible for generating one text field and one number field if there are no existing records in the database. If there are multiples, the function shows all items and their corresponding quantities. Here is the PHP code:
function generateMaterialsTable($month_id, $table, $item, $addOrEdit){
global $mysqli;
$item_singular = substr($item, 0, strlen($item)-1);
$item_singular_title = $item_singular.'_title';
if($addOrEdit == 'Edit'){
$materials_query = "SELECT * FROM archivestats.".$table."_".$item." WHERE month_id = '$month_id'";
$materials_result = $mysqli->query($materials_query);
if($materials_result->num_rows > 0){
$counter = 1;
while($materials_match = $materials_result->fetch_assoc()){
$output .= '
<div class="form-group '.$item_singular.'-row row">
<div class="col-sm-8">
<input type="text" name="'.$item_singular.'[]" class="form-control item-field" value="'.htmlentities($materials_match[$item_singular_title]).'">
</div>
<div class="col-sm-4">
<input type="number" name="'.$item_singular.'qty[]" class="form-control align-right '.$item_singular.'qty" value="'.$materials_match['quantity'].'">
</div>
</div>
';
$counter++;
}
} else {
$output .= '
<div class="form-group '.$item_singular.'-row row">
<div class="col-sm-8">
<input type="text" name="'.$item_singular.'[]" class="form-control item-field" value="">
</div>
<div class="col-sm-4">
<input type="number" name="'.$item_singular.'qty[]" class="form-control align-right '.$item_singular.'qty" value="">
</div>
</div>
';
}
}
return $output;
}
The user also has the option to add a new text and quantity field. This is done via the following JQuery:
//WHEN USER CLICKS '+Add Another Field'
$('.new-field').click(function(){
var newFieldId = $(this).attr('id'); //find id of the '+Add Another Field' paragraph
var newField = newFieldId.substr(0, newFieldId.lastIndexOf('-')); //find the name of the field before the last - (eg. 'book' from 'book-new')
var fields = $(this).parents().siblings().closest('.'+newField+'-row').find('input[type="text"]');
var count = 0;
$(fields).each(function(){
//we only need to get information for the last text box in the bunch
if(count == fields.length-1){
var last_field = $(this).attr('name'); //the name attribute of the last text box
var field_name = last_field.substr(0, last_field.indexOf('[')); //find the name of the field before a _ (eg. 'book' from 'book_1')
var regEx = /\d+/; //find the number of the field contained in the name (eg. '1' from 'book_1')
var field_number = parseInt(last_field.match(regEx));
$(this).parent().parent().after('<div class="form-group '+ field_name +'-row row"> <div class="col-sm-8"><input type="text" name="'+ field_name +'[]" class="form-control item-field"></div><div class="col-sm-4 add-field"><input type="number" name="'+ field_name +'qty[]" class="form-control align-right ' + field_name + 'qty"></div></div>');
}
count++; //iterate our counter
});
}); //end .new-feild.click()
For whatever reason, when I go to submit the form, the array as defined in
name="'.$item_singular.'[]"
only works properly with one group of text fields - that is, it properly records all array items. For example, let's say I have the following:
<div class="form-group book-row row">
<div class="col-sm-8">
<input type="text" name="book[]" class="form-control item-field">
</div>
<div class="col-sm-4">
<input type="number" name="bookqty[]" class="form-control align-right bookqty">
</div>
</div>
</div>
<div class="form-group book-row row">
<div class="col-sm-8">
<input type="text" name="book[]" class="form-control item-field">
</div>
<div class="col-sm-4">
<input type="number" name="bookqty[]" class="form-control align-right bookqty">
</div>
</div>
For this, I will input values of EXAMPLE 1 / 4 and EXAMPLE 2 / 15. When I submit and do:
print_r($_POST['book'])
I get the proper value of
Array([0] => "Example 1", [1] => "Example 2")
But then in another section of that EXACT SAME FORM I do this:
<div class="form-group book-row row">
<div class="col-sm-8">
<input type="text" name="digbook[]" class="form-control item-field">
</div>
<div class="col-sm-4">
<input type="number" name="digbookqty[]" class="form-control align-right digbookqty">
</div>
</div>
</div>
<div class="form-group book-row row">
<div class="col-sm-8">
<input type="text" name="digbook[]" class="form-control item-field">
</div>
<div class="col-sm-4">
<input type="number" name="digbookqty[]" class="form-control align-right digbookqty">
</div>
</div>
</div>
For this, I will input values of EXAMPLE 3 / 1 and EXAMPLE 4 / 20. Now I'll get ONLY the first item in the array:
Array([0] => "Example 3")
This makes absolutely no sense and it is driving me crazy. It is the exact same function spitting out the exact same code with two completely different results. Unreal...