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?
Related
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
I would like to know what is the best way to do something like this, I have this form:
<div class="telefono">
<label>Telefonos</label>
<div class="tel" *ngFor="let t of tfonos">
<div class="row">
<div class="col-md-2">
<label for="tfijo">Telefono fijo</label>
<input type="text" class="form-control" [(ngModel)]="telefono.telFijo" name="tfijo">
</div>
<div class="col-md-2">
<label for="tcel">Telefono Celular</label>
<input type="text" class="form-control" [(ngModel)]="telefono.telCelular" name="tcel">
</div>
<div class="col-md-3">
<label for="email">E-mail</label>
<input type="email" class="form-control" [(ngModel)]="telefono.email" name="email">
</div>
</div>
</div>
</div>
<button type="button" (click)="agregar()" class="btn btn-primary">Add</button>
The button agregar adds an element to tfonos so the div gets duplicated, the issue is that the [(ngModel)] also gets duplicated and binds them together, the ideal scenario for me would be to give each duplicate a different ngModel instance or something along those lines.
You should put telefono instances inside your tfonos array.
<div class="telefono">
<label>Telefonos</label>
<div class="tel" *ngFor="let t of tfonos; let i = index">
<div class="row">
<div class="col-md-2">
<label for="tfijo">Telefono fijo</label>
<input type="text" class="form-control" [(ngModel)]="t.telFijo"
[name]="'tfijo' + i">
</div>
<div class="col-md-2">
<label for="tcel">Telefono Celular</label>
<input type="text" class="form-control" [(ngModel)]="t.telCelular"
[name]="'tcel' + i">
</div>
<div class="col-md-3">
<label for="email">E-mail</label>
<input type="email" class="form-control" [(ngModel)]="t.email"
[name]="'email' + i">
</div>
</div>
</div>
</div>
I am having a problem removing an element from a form when a select input option is changed. When the select input is placed to "Manually Specify" the javascript correctly adds to the form as i would expect. When the option is changed again to anything other than "Manually Specify i would like it to remove the form inputs previously added, but can not seem to get this to work.
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceSelectInput").after(html);
} else {
var child = document.getElementById("distanceSpecifyInput");
if (child) {
child.parentNode.removeChild(child);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Thanks for any help.
You should create a specific DIV to hold the content, rather than using .after(). That way you can clear it with .empty().
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceOutput").html(html);
} else {
$("#distanceOutput").empty();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div id="distanceOutput">
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Note that copying the HTML like this results in duplicate IDs distance and distanceFormat. IDs are supposed to be unique, so you should fix up the IDs after copying.
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>
what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>
You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...
Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.