I have this code for passing values from multiple inputs to other inputs and it's working well. The problem is that I'm saving the value of one input inside an object, but if I do this process, I'll have to add 8 values inside the object and inside conditions statements.
I found this answer
How can I add it to my code and make it works?
How I can get the values of the 8 inputs and pass it to other 8 inputs.
This is my JS code:
var data = {
first_name: $('#first_name'),
}
if ($('#checkbox').is(':checked')) {
$('#check_name').val(data.first_name.val());
}
$('#checkbox').change(function() {
if ($('#checkbox').is(':checked')) {
$('#check_firstname').val(data.first_name.val());
} else {
$('#check_name').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is my view
//These are which I'm getting the values
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked" id="first_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
</form>
<!--These are the inputs which I'm passing the values-->
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check" id="check_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
</form>
try this:
$(".mt-4.mb-4.ml-4:eq(0) .row").each(function(i,r){
$(".mt-4.mb-4.ml-4:eq(1) .row:eq("+$(r).index()+") input").val(function(I){return $(r).find(".col:eq("+$(this).parent().index()+")>input").val();});
});
this works with this html structure.
How about if you do this:
$('.checked').keyup(function () {
if (this.id === 'first_name' && ...some other condition...) {
$('#check_name').val(this.value);
}
});
Changed keydown to keyup because on keydown if you type fast it might happen to skip some data
Basically Yoannes's approach is a good idea. I kept the keyup()-bit! However, it gets a bit tedious with all of the name and attribute comparing business.
Basically, jQuery offers a builtin method index(). This method returns the relative position of a matched element within its parent container. This would have worked if all of your input elements were in a common parent <div>. As this is not the case we will have to dig a little deeper:
My approach creates two jquery selections of input elements. One for each of your <form>s: src and trg. I then attach the keyup-event to all input elements of the first form. The attached function gets the current value of the input and finds the relative position of the element in the array of matched DOM-elements of src. The function then sets the value of the idx-th element of the jquery-trg-collection to txt. And that is all: jquery - write less, do more!
And, yes, it can also be done with the .on('input' ...) binding, like this:
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
var srca=$('form.mt-4.mb-4.ml-4:eq(0) input').on('input',function(){
trg.eq($.inArray(this,srca)).val($(this).val());
}).get()
var src=$('form.mt-4.mb-4.ml-4:eq(0) input'), srca=src.get();
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
src.keyup(function(){
var idx=$.inArray(this,srca);
var txt=$(this).val();
trg.eq(idx).val(txt);
})
form {font-family:verdana;font-size:8pt}
div.col {display:inline-block}
h6 {font-size:6pt;margin:0px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>1First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked" id="first_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
</form>
<!--These are the inputs which I'm passing the values-->
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>2First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check" id="check_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
</form>
Related
i have this html code that has a list. in my css listName is set to display='none'
when the dom page opens up i need the FIRST element of the class="listName" to show.. obviously this class in js is an array.. can you please show me
i need to make the page more user friendly. i need one li showing and if the user decides to book more shipments he can click on Add more shipments to show another li
the css file has this
.listHolder {
display: none;
}
here is the image of what it looks like now
<div class="container">
<div class="listHolder" th:each="freight, itemStat : *{freightsDto}">
<ul class="list">
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
</ul>
</div>
<div id="toggleBtn" class="row mtp">
<button id="addBtn" class="col-sm-12">
Add more shipments
</button>
</div>
</div>
You can get the list of elements with class "listName", and change the first element of that list.
Javascript
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
.listName {
display: none;
}
<html>
<body>
<div class="listHolder">
<ul class="list">
<li>
<span class="listName">Macbook</span>
</li>
<li>
<span class="listName">Amazon Firestick</span>
</li>
<li>
<span class="listName">Keyboard</span>
</li>
<li>
<span class="listName">Headphones</span>
</li>
<li>
<span class="listName">Airpods</span>
</li>
</ul>
</div>
</body>
</html>
I think you can do with JavaScript
<script type="text/javascript">
// create the function with JavaScript
function removerClass() {
// get all elements with listName class
let element = document.getElementsByClassName("listName");
// get the first element
element = element[0];
// remove the element's class
element.classList.remove("listName");
}
// call the function when the page is loaded
removerClass()
</script>
I hope it's usefull
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>
Actually am making a online quiz func in my website here is my quiz code
<form method="POST">
<div id="questions">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question <label id="question_no" value='1'>1</label></label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success mb-4">Submit</button> <button id="add_more" class="btn btn-primary mb-4">Add More</button>
</form>
actually i want that when add more button is clicked then the same code in div with id questions is append next to this div and also question no will be increased automatically
i tried diff method but none of them works prefectly and help
Thank You ...
~~~~~~~UPDATE~~~~~~~~
here is what i do simply wrote this code
<!--TEMPLATE-->
<script type="text/javascript" id="questions_template">
<div id="questions_template1">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question 1</label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
</script>
<!--END OF TEMPLATE-->
and after that here is my jquery code
$("#add_more").click(function(e){
e.preventDefault();
$("#questions").append($("#questions_template").html());
})
First, add div for your template question, this is the one you will duplicate.
<form method="POST">
<div class="question">
.....
</div>
<button>submit</button>
<button>add_more</button>
</form>
Now use jquery to duplicate this 'question' and update it with correct id.
$("#add_more").click(function(e) {
e.preventDefault();
var id = $(".question").length;
id++;
var $newQuestion = $("form").find(".question:last").clone();
$newQuestion.find("label").attr("value", id);
$newQuestion.find("#question_no").text(id);
$newQuestion.insertBefore($(".btn-success"));
})
Jsfiddle : https://jsfiddle.net/xpvt214o/411294/
The requirement is the label should be on top of the input element whereas the group of each label and input element should be inline with one another.
I am able to achieve the same with the below piece of code when label text is a bit long. When the text of the label is short, the input element is appearing inline with the label.
Probably what I am doing is wrong. Please let me know a better way to handle it through bootstrap.
Thanks in advance.
Code -
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>
Try usingd-flex and flex-column classes. Tried on some Bootstrap 4 playgrounds, worked as you need it to work.
You can read more about it here.
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A1</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A2</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A3</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
</div>
</form>
In bootstrap 4 you can use d-inline-block class
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</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.