Populate block of codes based on radio button selection - javascript

I am beginner in php, javascript coading. I am working on a project where I need the code to work like;
(radio buttons) Category: Size, quantity, weight
based on any one of this radio button selection, populate input tags field, where user can input tags relevant to the category selected
and after that based on number of input tags, ask for entering the prices for each tag.
Overview:
Category list Size, Quantity, Weight.
If category is size
then input tag 5cm, 10cm, 50cm, ....
Price for each tags
and this all details need to be stored in the database.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Sold in</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
<input type="radio" name="sold_in" value="size" onclick="#size"> Size
</label>
<label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
<input type="radio" name="sold_in" value="quantity" checked="checked"> Quantity
</label>
<label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
<input type="radio" name="sold_in" value="weight"> Weight
</label>
</div>
</div>
</div>
<div class="control-group" id="size">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Input Tags</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="tags_1" type="text" class="tags form-control" name="tags" placeholder="Size1 Size2" value="" data-role="tagsinput" />
<div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"></div>
</div>
</div>

Related

How to add multiple div element below other div on button click?

I am trying to generate a div with its contents below a particular div . On clicking add button, the same div should display below the current div.
I have a list of checkboxes generated from a loop. I have another checkbox which is outside the loop labeled as 'Other' . On clicking the 'Other' checkbox, it should display a product and volume textbox which is placed in a div. On clicking the add button, this div with the textboxes should display again below the current div. Whenever I click the add button, the div should be generated below the current div. How to do so?
What I have tried is
<div class="container">
#foreach($res as $product)
<div class="form-group row">
<div class="col-sm-6 text-left">
<label for="recipient-name{{$product->id}}" class="col-form-label">
<input type="checkbox" class="chooseProduct" id="recipient-name{{$product->id}}" name="pname[]" data-id="{{$product->id}}" value="{{$product->product}}" onchange="enableVolume(this);" >{{$product->product}}</label>
</div>
<div class="col-sm-6">
<label for="volume{{$product->id}}"> <input type="number" id="volume{{$product->id}}" class="form-control" name="volume[]" placeholder="Volume" min="0" step="0.01" disabled> </label>
</div>
</div>
#endforeach
<div class="form-group row">
<div class="col-sm-6 text-left">
<label for="recipient-name_o" class="col-form-label">
<input type="checkbox" class="chooseProduct" id="recipient-name_o" name="other_product" data-id="o_id" value="" onchange="otherOption(this);" >Other</label>
</div>
<div class="col-sm-6">
<!--<label for="volume_o"> <input type="number" id="volume_o" class="form-control" name="volumeo_id" placeholder="Volume" min="0" step="0.01" disabled> </label>
--> </div>
</div>
<div class="form-group row" id="otherCheck">
<div class="col-sm-6 text-left">
<label for="text-o" class="col-form-label">
<input type="text" class="chooseProduct form-control" id="text-o" name="text-o" data-id="text-o" placeholder="Product Name" value="" ></label>
</div>
<div class="col-sm-6">
<label for="volume_o"> <input type="number" id="volumetext-o" class="form-control" name="volumeo_id" placeholder="Volume" min="0" step="0.01"> </label>
</div>
<button class='btn btn-primary' id='add_btn' onclick="addDiv();" >Add</button>
</div>
#if(count($pdf_data)>0)
<div class="form-group row">
<div class="col-sm-6 text-left">
<label for="prescription" class="col-form-label">
<input type="checkbox" class="chooseProduct" id="prescription" name="prescription" data-id="prescription" value='Agronomist Prescription' onchange="enableVolume(this);" >Most Recent Agronomist Prescription</label>
</div>
<div class="col-sm-6">
<label for="volume_pres"> <input type="number" id="volumeprescription" class="form-control" name="volume_pres" placeholder="Volume" min="0" step="0.01" disabled> </label>
</div>
</div>
<div id='append'></div>
#endif
</div>
My output
Expected Output should generate textbox below current div . On clicking add button again, another two textboxes should generate again, and so on. How to do so?

JavaScript Event Listeners interacting with hidden DOM Elements

I'm creating a travel reimbursement form for work. We have 4 separate types of travel, so my plan was to have a button for each type, and when you click on the button the correct form appears within it's own <section> element. I'm using Bootstrap 4, and I have each form on my index.html file with a class of "d-none" so that none display on load.
In the mileage section of the form, I have a Font-Awesome plus and minus sign to add another row or delete a row. The problem I'm running in to is that my event listeners work fine with the first form listed in index.html. But it doesn't work at all on the second form.
Each form has a class of ".mileage-form". I know that you can't have separate HTML elements with the same ID, but I thought classes were ok. I know I can fix this issue by having the HTML rendered with JavaScript when the correct form button is clicked, instead of just unhiding the html, but I'm trying to understand WHY what I'm trying doesn't work.
The index.html looks as follows:
<!----------------------------- ITINERANT TRAVEL ----------------------------->
<section id="itinerant" class="d-none">
<form class="mileage-form">
<div class="form-group form-row justify-content-center" id="row-1">
<div class="col-sm-2 col-md-1">
<label for="date-1">Date</label>
<input type="date" id="date-1" class="form-control">
</div>
<div class="col-sm-3 col-md-3">
<label for="origin-1">Origin Address</label>
<input type="text" class="form-control" id="origin-1" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-3 col-md-3">
<label for="destination-1">Destination Address</label>
<input type="text" class="form-control" id="destination-1" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-2 col-md-1">
<label for="personal-1">Personal Miles</label>
<input type="text" class="form-control" id="personal-1" placeholder="0">
</div>
<div class="col-sm-2 col-md-1">
<label for="calculated-1">Calculated Miles</label>
<input type="text" class="form-control" id="calculated-1" placeholder="0" value="" disabled>
</div>
</div>
</form>
<div class="form-group form-row justify-content-center">
</i>
</i>
</div>
<div class="form-group form-row justify-content-center">
<button type="button" class="btn btn-outline-success" id="calculate-mileage">Calculate Mileage</button>
<button type="button" class="btn btn-outline-danger" id="clear-all">Clear All</button>
</div>
</section>
<!-------------------- Single Day Travel ----------------------->
<section id="single-day" class="d-none">
<form class="mileage-form">
<div class="form-group form-row justify-content-center" id="row-101">
<div class="col-sm-2 col-md-1">
<label for="date-101">Date</label>
<input type="date" id="date-101" class="form-control">
</div>
<div class="col-sm-3 col-md-3">
<label for="origin-101">Origin Address</label>
<input type="text" class="form-control" id="origin-101" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-3 col-md-3">
<label for="destination-101">Destination Address</label>
<input type="text" class="form-control" id="destination-101" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-2 col-md-1">
<label for="personal-101">Personal Miles</label>
<input type="text" class="form-control" id="personal-101" placeholder="0">
</div>
<div class="col-sm-2 col-md-1">
<label for="calculated-101">Calculated Miles</label>
<input type="text" class="form-control" id="calculated-101" placeholder="0" value="" disabled>
</div>
</div>
</form>
<div class="form-group form-row justify-content-center">
</i>
</i>
</div>
</section>
And my event listeners look like this:
document.querySelector('.add-row').addEventListener('click', mileage.addRow);
document.querySelector('.delete-row').addEventListener('click', mileage.deleteRow);
The functions to add and delete a row are in a Mileage Class, but I don't think there is a problem there, because they do function properly with the "Itinerant" section. And if I comment the "Itinerant" section out, they work fine with the "Single Day" section. But like I said, if both sections are uncommented, and just hidden, they only work with the Itinerant section. If you want to see that code though, I have it all on github, and they would be in the mileage.js file.
I would greatly appreciate any explanation on what I did wrong!
use
querySelectorAll(".add-row").forEach(function(item){ item.addEventListener .. etc }):
to target all of the elements

Toggle visibility between DropDownList and TextBox in the given scenario?

In my project, I have two RadioButtons called UserTypeRadio. With that, I have a DropDownList and a TextBox. I want to toggle the visibility of the DropDownList and the TextBox depending on which RadioButton is selected.
RadioButton
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" onclick="radioButtonEmployeeSelected()" checked class="userSelection" /> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" onclick="radioButtonOtherUserSelected()" class="userSelection" /> Other User</label>
</div>
</div>
</div>
DropDownList
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
TextBox
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" hidden />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
jQuery Code
$('.userSelection').on('change', function () {
//alert($(this).val());
//if ($(this).val() === "Employee") {
$("#textBoxOtherUser").toggle();
$("#dropDownUserNames").toggle();
//}
});
I am trying to hide TextBoxOtherUser when Employee is selected from the RadioButton, and I am trying to hide DropDownUserNames when I click Other User option from the RadioButton.
The toggle() is performing as per expectation. However, on performing Inspect Element from the Browser, when Other User is selected from the RadioButton, I see that the DropDownList is not getting disbled. In fact, I see that when the Employee is not selected, style="display: inline-block;" is present in the code. On the other hand, when the Employee is selected, style="display: none;" is shown. In other words, on selecting Employee displays the DropDownList in the required UI. But when Employee is not selected, instead of getting disabled, the DropDownList is shown in the plain old block format.
What to do?
by using data attribute you can do this .. add data-user for employee and otheruser radio inputs and add data-show to the related select/textbox and you can then use the next code
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames" data-show="employee">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" data-show="otheruser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
Note: if you include your js code before including jquery you'll need to wrap your js code inside $(document).ready(function(){ // code here })
Finally if you need to hide the whole row you can simply cut/paste the data-show attribute to the parent instead of select or textbox
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20" data-show="employee">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20" data-show="otheruser">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
by adding .filter(':checked').change(); at the end this mean run the change event for the checked radio on load

How can I read/write from a plain text in JavaScript

I don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.
Here's my Plain Text data.txt:
Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test
Here's my Div:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
That's the script I got from you guys, because I was looking for code to do it and that's what I got.
The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.
Is there a way to make it work? thanks!
Entire code bellow.
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', '/data.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
</div>
I don't know i a more efficient solution exists, but below code is working.
Here is how I achieved it, using jQuery .load()
$(document).ready(function(){
// Load the file in an hidden div element.
$("#hiddenFileLoad").load("data.txt", function(){
// Callback executes when content is loaded
// Place the content in a var
var loadedText = $("#hiddenFileLoad").text();
console.log("loadedText:\n\n"+loadedText);
// Split into an array
var loadedTextSplitted = loadedText.split(",");
// Remove the label part for each
for (i=0;i<loadedTextSplitted.length;i++){
temp = loadedTextSplitted[i].split(": ");
loadedTextSplitted[i] = temp[1];
}
// Place each info in the HTML form
$(".form-panel").find("input").each(function(index){
$(this).val( loadedTextSplitted[index] );
});
}); // End of .load callback
});
I used and hidden div, in order to load the .txt file content, which I gave the "hiddenFileLoad" id.
I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.
I assume you know how to save to file...
I didn't make the save button to work.
Here is a live example on my server.

ng-disabled in Angular JS

I have a modal popup with few mandatory fields.
<form name="myReferenceDataForm" role="form" ng-submit="AddNewGroupMembershipReferenceRecord()" style="margin: 10px">
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupCode" class="col-sm-4 form-control-label">
Group Code <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupCode" class="form-control" id="GroupCode" type="text">
</div>
</div>
</div>
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupName" class="col-sm-4 form-control-label">
Group Name <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupName" id="GroupName" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group row">
<label for="GroupType" class="col-sm-4 form-control-label">Group Type </label>
<div class="col-sm-8">
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupType.id" ng-model="referenceAddRecord.groupType"></select>
</div>
</div>
Only above 3 fields groupName , groupCode are mandatory.
If they exist or not filled I want to have the submit button in the page disabled.
So , I did ...
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)|| addReferenceDataGroupNameExists() || addReferenceDataGroupCodeExists()" />
But it is not working . Even Only the whether the fields are filled that check is failing. Whenever I enter only one field it is getting enabled.
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)" />
What am I doing wrong here ?
Check out this plunker
<input type="submit" id="submit" ng-disabled="!(referenceAddRecord.groupName && referenceAddRecord.groupCode)" value="Submit" />

Categories