HTML
<input class="form-check-input" type="checkbox" id="hotels" value=""> HOTELS
<div id="hebergement"></div>
jQuery I make input id ="nbchambre"
$(document).ready(function (){
$('#hotels').on('change', function() {
if ($('#hotels').is(":checked"))
{
var hotels = $('#hotels:checked').val()
//alert( hotels ); // or $(this).val()
$('#hebergement div').empty();
var i,ch='';
for(i=0;i<<?php echo $ln; ?>;i++) {
ch += "<option value='"+ arrayregime[i] +"'>"+arrayregime[i]+"</option>";
}
//alert(test);
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'divhotel');
newTextBoxDiv.after().html('<hr/><center> <h4 style="color: #3385c0;"> VOTRE DESTINATION</h4></center>' +
' <div class="row"> <div class="col-md-3"> '+
' <label>Date depart</label> '+
'<div class="input-group">'+
'<div class="input-group-addon">'+
' <i class="fa fa-calendar"></i> '+
'</div> <input class="form-control" name="datedepart" id="datedepart" placeholder="MM/DD/YYYY" type="date" >'+
' </div>'+
' </div>'+
' <div class="col-md-3"> '+
' <label>Date retour</label> '+
'<div class="input-group">'+
'<div class="input-group-addon">'+
' <i class="fa fa-calendar"></i> '+
'</div> <input class="form-control" name="dateretour" id="dateretour" placeholder="MM/DD/YYYY" type="date" >'+
' </div>'+
' </div> </div>'+
'<div class="form-group row" ><label class="col-xs-2 col-form-label">Categorie hotels</label> <div class="col-xs-2"><select name="categ" class="form-control"><option value="0">0 *</option> <option value="1">1 *</option> <option value="2">2 *</option> <option value="3">3 *</option> <option value="4">4 *</option> <option value="5">5 *</option> </select> </div> '+
'<label class="col-xs-2 col-form-label">Pention hotels</label> <div class="col-xs-2"><select name="categ" class="form-control"> '+ch+' </select> </div></div> '+
'<input class="form-control" type="number" name="nbchambre" id="nbchambre" value="0" /><div id="typechambre"> </div>'+
' ');
newTextBoxDiv.appendTo("#hebergement");
}
else{
$('#hebergement div').empty();
}
});
});
Action with input nbchambre
<script type="text/javascript">
$(document).ready(function (){
$('#nbchambre').on('change', function() {
//alert( this.value ); // or $(this).val()
var test = parseInt($("#nbchambre").val(), 10);
//alert(test);
$('#typechambre div').empty();
var i,ch='';
ch = "<option value='single'>Single</option><option value='double'>Double</option><option value='triple'>Triple</option><option value='quadruple'>Quadruple</option><option value='appartement'>Appartement</option>";
for(i=1;i<=test;i++) {
//$( "#TextBoxesGroup" ).remove();
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'chambre' + i);
newTextBoxDiv.after().html('<label class="col-xs-2 col-form-label">Chambre '+ i + ' : </label> <div class="col-xs-1">' +
'<select class="form-control" name="enfants[]" >'+ch+'</select>' );
newTextBoxDiv.appendTo("#typechambre");
}
});
});
Question
Why does the action not apply the input?
Change in your input which you are binding run time.
<input class="form-control" type="number" name="nbchambre" id="nbchambre" value="0" />
change to
<input class="form-control nbchambre" type="number" name="nbchambre" id="nbchambre" value="0" />
Now write your change event as follow
$(document).on('change', '.nbchambre', function() {
//alert( this.value ); // or $(this).val()
var test = parseInt($("#nbchambre").val(), 10);
//alert(test);
$('#typechambre div').empty();
var i,ch='';
ch = "<option value='single'>Single</option><option value='double'>Double</option><option value='triple'>Triple</option><option value='quadruple'>Quadruple</option><option value='appartement'>Appartement</option>";
for(i=1;i<=test;i++) {
//$( "#TextBoxesGroup" ).remove();
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'chambre' + i);
newTextBoxDiv.after().html('<label class="col-xs-2 col-form-label">Chambre '+ i + ' : </label> <div class="col-xs-1">' +
'<select class="form-control" name="enfants[]" >'+ch+'</select>' );
newTextBoxDiv.appendTo("#typechambre");
}
});
Hope it will be helpful for you.
Delegate the change event to #hebergement because #nbchambre is added after the page load.
$('#hebergement').on('change', 'input[name=nbchambre]', function(){
...
...
});
Info: Understanding Event Delegation
Side note: don't repeat the same ID for multiple elements (id="nbchambre")
Related
I am using Codeigniter but my issue is not related to Codeigniter. I am getting some issues in my jQuery.
On page load, I am displaying the Add more button so when the user clicks on Add more then it will display the dropdown dynamically. (Note: The second dropdown will display from ajax success. So now I am displaying only text for understanding).
Below are the two dropdowns.
Now if you choose from the dropdown then it will display dynamically input field some think like this
The user can add more one the dropdown field only clicking on Add more.
check below image
Now my main issue is, I increment the name of the input field but not getting increment value. I am getting the below output
For example
First dropdown
<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">
Second dropdown
<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">
Notice here every time i am getting name="pp_fileStatus2" for every dropdown and name="reasonDate2" for every input field.
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
var count = 2;
var numberIncr = 1; // used to increment the name for the inputs
var addrm = '';
$.ajax({
type: "POST",
async: false,
url: "/access_control/getRMname",
//data: {},
dataType: 'json',
success: function(response) {
addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
$.each(response, function(key, data) {
addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
//rm_details.push(addrm);
});
addrm += '</select>';
}
});
//Once add button is clicked
$(document).on('click', '#clicktoadd', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
}
count++;
});
$(document).on('change', '.pp_fileStatus', function(event) {
if (($(this).val() == '1') || ($(this).val() == '3')) {
$(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '" class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '" class="form-control" placeholder="Remark">');
} else {
$(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '" class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
}
});
numberIncr++;
});
<div id="clicktoadd">Add More</div>
<div class="row">
<div class="medication_info">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
You need to increment value inside the .click callback since you are generating form name inside the .click event.
Increment numberIncr when you trigger a click. Also remove numberIncr++ at the end script.
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
var count = 2;
var numberIncr = 1; // used to increment the name for the inputs
var addrm = '';
$.ajax({
type: "POST",
async: false,
url: "/access_control/getRMname",
//data: {},
dataType: 'json',
success: function(response) {
addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
$.each(response, function(key, data) {
addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
//rm_details.push(addrm);
});
addrm += '</select>';
}
});
//Once add button is clicked
$(document).on('click', '#clicktoadd', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
// CHECK: Added this to increment number on click
numberIncr++;
$(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
}
count++;
});
$(document).on('change', '.pp_fileStatus', function(event) {
if (($(this).val() == '1') || ($(this).val() == '3')) {
$(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '" class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '" class="form-control" placeholder="Remark">');
} else {
$(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '" class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
}
});
// CHECK: remove the below numberIncr logic
// numberIncr++; --> remove this
});
<div id="clicktoadd">Add More</div>
<div class="row">
<div class="medication_info">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
i would like to append a new html code, buy clicking a button. however in the append there are a looping to show the html code.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
$.each(day_left,function (i,val) {
$('<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>');
})+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>
actually i could append the html. But there is a bug in my $.each(day_left,function(i,val)){});
its only return the value of day_left which they are like sunday,monday,.... The code doesn't show the html code
My expected is it would be returned like this
but my code is only return :
Please make a function like this
function makeString(day_left,stack){
var str = '';
for(var i = 0; i <= day_left.length ; i++ ){
str += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+day_left[i]+'</label> </li>';
}
return str;
}
and change as following
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
makeString(day_left,stack)+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
plnkr https://plnkr.co/edit/aBLj49Yv2g4EakeKjlqI?p=preview
you can do like that......
just use return function or make you iteration returnable.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Solved
function(){var s='';
$.each(day_left,function (i,val) {
s += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>';
});
return s;}
+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>
I have an HTML page in which it has to returns data from a JSON. I made a filter in such a way that it returns the values based on the filter. Here my problem is, the page is not displaying all values when the document is ready even I made the radio button "All" as checked by default. It works when I click on radio buttons later. Can someone help me how can I return all values when the page is initiated?
Here is my fiddle: http://jsfiddle.net/sDsCM/805/
Html:
<fieldset class="question">
<input class="hello" type="radio" name="filter" value="All" checked/>
<span class="item-text">All</span>
<input class="hello" type="radio" name="filter" value="1"/>
<span class="item-text">One</span>
<input class="hello" type="radio" name="filter" value="2" />
<span class="item-text">Two</span>
<input class="hello" type="radio" name="filter" value="3" />
<span class="item-text">Three</span>
</fieldset>
<div id="dbg">
</div>
Javasript:
var i;
$("input[name=filter]").on('change', function () {
var no = $(this).val();
i=no;
var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
$.getJSON( dmJSON, function(data) {
var el = $('#dbg');
var html = '<div class="row s12"/>';
$.each(data.route, function(key, value) {
if(i=="All"){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
else if(value.no==i){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
});
el.html(html);
});
});
Your API seems to be not working message is "Quota exhausted for day" but i have updated code as you can find in below snipeet you just have to add one function which is load data on page load as well as on change function
var i;
var el = $('#dbg');
var HtmlData = LoadData();
el.html(HtmlData);
$("input[name=filter]").on('change', function () {
var no = $(this).val
i=no;
var HtmlData = LoadData();
el.html(HtmlData);
});
function LoadData()
{
var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
var html = '<div class="row s12"/>';
$.ajax({
url: dmJSON,
dataType: 'json',
async: false,
data: {},
success: function(data) {
$.each(data.route, function(key, value) {
if(i=="All"){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
else if(value.no==i){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
});
}
});
return html;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="question">
<input class="hello" type="radio" name="filter" value="All" checked/>
<span class="item-text">All</span>
<input class="hello" type="radio" name="filter" value="1"/>
<span class="item-text">One</span>
<input class="hello" type="radio" name="filter" value="2" />
<span class="item-text">Two</span>
<input class="hello" type="radio" name="filter" value="3" />
<span class="item-text">Three</span>
</fieldset>
<div id="dbg">
</div>
i have a conflict with jquery and can not find a correct solution, every time something breaks, i have a form that i add one input and one select at the time dynamically, by default the html form have on input and one select, and after adding new fields if is required.
The problem is that the fields are added dinamically with jquery and can be removed as well, but if you add a few new fields and remove just the last one the form will not be working anymore, can not be added new fields, but if you remove a field from the middle than it is fine is working.
I need to fix if you remove even the last element to be abble to add again new fields.
Please see the example below.
HTML
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<span class="multiple-field-container-add">
<span class="content-panel-flat-raw-double-sub">
<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">
<label>IBAN</label>
<input class="form-control" id="0-iban" name="0-iban" type="text" value="">
</span>
<span class="content-panel-flat-raw-double-sub-raw">
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<label>Currency</label>
<select class="select select2-hidden-accessible" id="0-currency" name="0-currency" tabindex="-1" aria-hidden="true"><option value="-">Select currency</option><option value="USD">USD</option><option value="EUR">EUR</option></select>
</span>
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<b><i class="icon-plus2"></i></b> Add new
</span>
</span>
</span>
</span>
</form>
Jquery
var next = 1;
$(".multiple-add-input").click(function(e){
e.preventDefault();
var addto = "#" + next + "-iban";
next = next + 1;
var newIn = '<span class="content-panel-flat-raw-double-sub">'+
'<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">'+
'<label>IBAN</label>'+
'<input class="form-control" id="' + (next) + '-iban" name="' + (next) + '-iban" type="text" value="">'+
'<div class="form-control-feedback">'+
'<i class="icon-font-size"></i>'+
'</div>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw">'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<label>Currency</label>'+
'<select name="' + (next) + '-currency" id="' + (next) + '-currency" class="select">'+
'<option value="EUR">EUR</option>'+
'<option value="USD">USD</option>'+
'</select>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<div class="btn bg-teal-400 btn-labeled btn-custom-width remove-me" onclick="_multiple_field_remove_('+ (next) +')"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
'</span>'+
'</span>'+
'</span>';
alert(next);
var newInput = $(newIn);
$(addto).parent().parent().after(newInput);
$('.select').select2();
_multiple_field_remove_ = function(id){
alert(id);
$('#'+ id +'-iban').parents('span.content-panel-flat-raw-double-sub').remove();
};
ionluchian
the reason cause the issue,it's the number next.
when you delete the last element, and you click add button next,
var addto = "#" + next + "-iban";
...
// can't find item 'addto',so it's not work
$(addto).parent().parent().after(newInput);
this code can't find the last items at all.
Please use above instead:
change: $(addto).parent().parent().after(newInput);
to : $('.multiple-field-container-add').append(newInput)
This is not the best looking end result, but its working
$(function(){
addElement();
});
function addElement(){
$(".multiple-add-input").on('click', function(e){
e.preventDefault();
$(this).off('click');
var next = parseInt($('.iban-input').last().attr('id'));
var addto = "#" + next + "-iban";
next++;
var newIn = '<span class="content-panel-flat-raw-double-sub">'+
'<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">'+
'<label>IBAN</label>'+
'<input class="form-control iban-input" id="' + (next) + '-iban" name="' + (next) + '-iban" type="text" value="">'+
'<div class="form-control-feedback">'+
'<i class="icon-font-size"></i>'+
'</div>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw">'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<label>Currency</label>'+
'<select name="' + (next) + '-currency" id="' + (next) + '-currency" class="select">'+
'<option value="EUR">EUR</option>'+
'<option value="USD">USD</option>'+
'</select>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<div class="btn bg-teal-400 btn-labeled btn-custom-width remove-me" id="remove-'+ (next) +'"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
'</span>'+
'</span>'+
'</span>';
// Add element
$(addto).parent().parent().after(newIn);
// Bind removing
$('.remove-me')
.off('click')
.on('click', function(){
removeElement($(this).attr('id'));
});
// Bind adding
addElement();
});
}
function removeElement(id){
$('#'+id).parent().parent().parent().remove();
}
.content-panel-flat-raw-double-sub{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<span class="multiple-field-container-add">
<span class="content-panel-flat-raw-double-sub">
<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">
<label>IBAN</label>
<input class="form-control iban-input" id="0-iban" name="0-iban" type="text" value="">
</span>
<span class="content-panel-flat-raw-double-sub-raw">
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<label>Currency</label>
<select class="select select2-hidden-accessible" id="0-currency" name="0-currency" tabindex="-1" aria-hidden="true"><option value="-">Select currency</option><option value="USD">USD</option><option value="EUR">EUR</option></select>
</span>
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<b><i class="icon-plus2"></i></b> Add new
</span>
</span>
</span>
</span>
</form>
I'm having a big problem in trying to get the value of these inputs and associates them to the object "book" when you click " Book Now! "
No matter where I declare the object in js , it just does not work.
It was for the object like this:
$scope.book = {
bday_i : new date(day, month, year),
bday_f : book(bday_i),
bfrom : getHours(bday_i),
buntil : getHours(bday_i),
bresource : "Small meeting room ",
bmember : "Lucas Gabriel da Costa",
busercredit : ("4 hours left of", book(bresource)),
bcoment : "Test"
}
And i try to get the values and assign them to variables like this:
$scope.book.bday_i = myForm.day_i.value;
$scope.book.bday_f = myForm.day_f.value;
$scope.book.bfrom = myForm.from.value;
$scope.book.buntil = myForm.until.value;
$scope.book.bresource = myForm.resource.value;
$scope.book.bmember = myForm.member.value;
$scope.book.busercredit = myForm.usercredit.value;
$scope.book.bcoment = myForm.coment.value;
$modalInstance.close(result);
$scope.dayClick = function (date, jsEvent, view, value) {
$scope.newEventDate = date;
var
t =
'<div class="modal-header">' +
'<h5>New booking</h5>' +
'</div>' +
'<form ng-model="myForm" name="myForm" id="myForm">'+
'<div class="modal-body" name="box" >' +
'<p>Time: ' + ' ' + '<pre >' + ' Initial date:' +
'<input id="day_i" class="form-control" type="date" name="day_i" ng-model="day_i" type="text" min = "dia_hj" value="dia_hj" required /> ' +
' Final date:' +
'<input id="day_f" class="form-control" type="date" name="day_f" ng-model="day_f" type="text" min = "day_i" value="dia_hj" required /> ' +
' From:' +
' <input id="from" class="form-control" name="from" ng-model="from" type="time" min = "getHours()" value="" required />' +
' Until' +
' <input id="until" class="form-control" name="until" ng-model="until" type="time" min = "myForm.from.value" value="" required /> </pre></p>' +
'<p> Resource:' +
' <pre><input id="resource" class="form-control" name="resource" ng-model="resource" type="text" placeholder ="Ex: Small Meeting Room" value="" required /></pre></p> ' +
'<p> Member: ' +
' <pre><input id="member" class="form-control " name="member" ng-model="member" type="text" placeholder="Ex: Lucas Gabriel da Costa" value="" required /> </pre></p> ' +
'<p> User credit:' +
' <pre><input id="usercredit" class="form-control" name="usercredit" ng-model="usercredit" type="text" placeholder="Ex: 4 hours included(Small meeting Room)" value="" required /></pre></p>' +
'Note:' +
'<pre><textarea id="coment" ng-model = "coment" name="coment" rows="4" cols="46" placeholder="Insert ur comment"></textarea></pre></form>' +
// validação:
'<div ng-hide= " myForm.day_i.$pristine">' +
'<span ng-show="myForm.day_i.$error.required " class="alert alert-danger"> The INITIAL DATE camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide= " myForm.day_f.$pristine">' +
'<span ng-show="myForm.day_f.$error.required || (myForm.day_f.value <= myForm.day_i.value)" class="alert alert-danger"> The FINAL DATE camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide =" myForm.from.$pristine">' +
'<span ng-show="myForm.from.$error.required " class="alert alert-danger"> The FROM camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide =" myForm.until.$pristine">' +
'<span ng-show="myForm.until.$error.required || myForm.until.value < myForm.from.value" class="alert alert-danger"> The UNTIL camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide=" myForm.resource.$pristine ">' +
'<span ng-show="myForm.resource.$error.required " class="alert alert-danger"> The RESOURCE camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide= " myForm.member.$pristine">' +
'<span ng-show="myForm.member.$error.required " class="alert alert-danger"> The MEMBER camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide=" myForm.usercredit.$pristine">' +
'<span ng-show="myForm.usercredit.$error.required " class="alert alert-danger"> The CREDIT camp is required. Or a invalid value was inserted <br/><br/> </span> </div> ' +
'</div>' +
'<div class="modal-footer">' +
'<button ng-click="close(result)" id="b1" ng-model="b1" name="b1" class="btn btn-danger " >Close</button>' + //botão de fechar
'<button ng-click="close2(okay) " id="b2" ng-model="b2" name="b2" class="btn btn-success" ng-disabled="myForm.usercredit.$pristine || myForm.day.$pristine || myForm.from.$pristine || myForm.until.$pristine || myForm.resource.$pristine || myForm.member.$pristine "> Book Now! </button>' +
'</div>';
var
modalInstance = $modal.open({
template: t,
controller: 'TestDialogController',
backdrop: "true",
resolve: {
event: function () {
return $scope.newEventDate;
},
stage: function () {
return $scope.stage;
}
}
});
modalInstance.okay.then(
function () {
alert('');
;
});
modalInstance.result.then(
function (result) {
//console.log('called $modalInstance.close()');
alert(result);
$scope.addEvent();
},
function (result) {
//console.log('called $modalInstance.dismiss()');
$scope.addEvent();
}
);
};
app.controller('TestDialogController', function ($scope, $modalInstance) {
$scope.close = function (result) {
alert(result);
$modalInstance.close(result);
}});
<div class="container pad-35">
<div class="row">
<!-- Space Header -->
<venue-header title="{{ venue_title }}" nav="header"></venue-header>
<!-- Dashboard -->
<div class="col-md-12 pull-left" ng-cloak>
<section id="directives-calendar" ng-controller="CalendarCtrl">
<div class="well">
<div class="row-fluid">
<div class="span8">
<tabset>
<tab select="renderCalender('myCalendar1');">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Calendar One
</tab-heading>
<div class="btn-toolbar">
<center><p class="pull-right lead">Calendar One View Options</p></center>
<div class="btn-group">
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">AgendaDay</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">AgendaWeek</button>
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
<!--select para definir o resource a ser usado no controler js-->
</div>
<p class="textalign1">
<center>
<select id="select-lucas" class="dropdown-toggle btn btn-success " ng-model="model.id" convert-to-number>
<option value="" selected="selected" onclick="">small meeting room</option>
<option value="1" selected="selected" onclick="">medium meeting room</option>
<option value="2" selected="selected" onclick="">Big meeting room</option>
<option value="3" selected="selected" onclick="">Giant meeting room</option>
</select>
</center>
</p>
</div>
<div class="calendar ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
</tab>
</tabset>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
The result is this pop up:
Your form is defined in the modal which have his own controller and his own scope.
So when you do
ng-model="until"
In your input, this is binding a variable "until" ont eh scope modal's controller.
so if you want to build an object you ave to do like this in the modal controller :
var book = {};
book.buntil = $scope.until;
Same for every fields.
After if you want to display that books to the main view you could use an event that is emitted and listen on the $rootscope.
I don't know which modal library you use so i can't say if the scope generated if a child of the other.