I am trying to validate dynamic content in my modal popup but the dynamic content which is added by button click on modal popup is not validating. As in the below working snippet there is a Add field button after clicking on the add field buton a field is added to the modal but the issue is that dynamically generated field is not getting validated.
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
$(this).rules("add",
{
required: true,
messages: {
required: "This field is required",
}
});
});
$(document).on('click', '#add_field', function (e) {
$('#dynamic_div').html("<input type=text class=form-control>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Dynamic field:</label>
<div class="col-md-9" id="dynamic_div">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
You can add a function to validate the new input added:
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
required($(this))
});
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<input type=text class=form-control>");
required($(this))
});
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Dynamic field:</label>
<div class="col-md-9" id="dynamic_div">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
Related
I have a button which pops up a modal, it does pop up & is functional. The form is in there how it should be, etc. Just one thing doesn't work which is that the modal just isn't focusing. I also tried doing it with JS which I found on another stackoverflow post but that didn't help me either.
The code
<div class="modal" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit" autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>
Shows up an unfocussed modal when it's called.
The button that triggers the modal
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" data-target="#joinModal" autofocus>Inschrijven</button>```
I guess you are looking for the shown.bs.modal event. More about this in the documentation.
So when that event fires for your modal, just target the first input and focus it.
There is no use in focussing a div. A focussed input generally is what a user wants.
$("#joinModal").on("shown.bs.modal", function(){
$(this).find("input").first().focus()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" onclick="focus()" data-target="#joinModal" autofocus>Inschrijven
</button>
<div class="modal" id="joinModal" tabindex="0" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit"
autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>
I have a modal containing two forms, I want to switch between them when one of the radio buttons is checked, so i need to hide one of them in modal load, i did the following code, but it doesn't hide, can anyone help me in that?
The Form need to be hidden on modal load is called LocateOnMap to hide all its content.
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input type="radio" name="optradio">Enter Address</label>
<label class="radio-inline"><input type="radio" name="optradio">Locate on Map</label>
</div>
</div>
<form id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly >
</div><br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly >
</div>
</div>
</div><br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
<script>
initModalfrmmap();
</script>
</div>
</div>
</form>
<form id="EnterAddress">
<label style="color:red;">Hiii</label>
</form>
<script type="text/javascript">
$('#LocateOnMap').hide();
</script>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
</div>
</div>
</div>
You can't have <form></form> under <form></form>, so removed that instead used div. By default assign hidden class to LocateOnMap. Then on change event of radio you can use jquery toggleClass() method to toggle visibility of LocateOnMap & EnterAddress.
$("#modal-Frm").modal("show");
$('input[name=optradio]').change(function() {
$("#EnterAddress,#LocateOnMap").toggleClass("hidden");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input value="address" type="radio" name="optradio" checked>Enter Address</label>
<label class="radio-inline"><input value="location" type="radio" name="optradio">Locate on Map</label>
</div>
</div>
<div>
<div class="hidden" id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly>
</div><br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly>
</div>
</div>
</div><br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
</div>
</div>
</div>
</div>
<div id="EnterAddress">
<label style="color:red;">Hiii</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
</div>
</div>
</div>
On show.bs.modal you can hide the form and set the radio button:
$('#modal-Frm').on('show.bs.modal', function (e) {
$('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})
I'd suggest to add a data attribute to each name="optradio" like:
data-form-id="#EnterAddress"
and for the second one:
data-form-id="#LocateOnMap"
In this way, on radio change you can switch between the two forms:
$('[name="optradio"]').on('change', function(e) {
$('#modal-Frm').find('form[id]').hide();
$(this.dataset.formId).show();
})
$('#modal-Frm').on('show.bs.modal', function (e) {
$('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})
$('[name="optradio"]').on('change', function (e) {
$('#modal-Frm').find('form[id]').hide();
$(this.dataset.formId).show();
})
function CancelModal() {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-Frm">
Launch modal
</button>
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input type="radio" name="optradio"
data-form-id="#EnterAddress">Enter Address</label>
<label class="radio-inline"><input type="radio" name="optradio" data-form-id="#LocateOnMap">Locate
on Map</label>
</div>
</div>
</form>
<form id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude"
placeholder="Latitude" style="border-radius: 5px;" readonly>
</div>
<br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput"
name="Longitude" placeholder="Longitude" style="border-radius: 5px;"
readonly>
</div>
</div>
</div>
<br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
</div>
</div>
</form>
<form id="EnterAddress">
<label style="color:red;">Hiii</label>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add
</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()"
style="font-weight: bold;">Cancel
</button>
</div>
</div>
</div>
</div>
<form id="LocateOnMap" hidden>
this will make the form hidden on load
document.getElementById("LocateOnMap").style.display="block";
this is to display it
I'm creating a form confirmation window with Bootstrap Modal before user submission.
Here is the html part:
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-3 control-label">Email:</label>
<div class="col-sm-9">
<input type="text" name="Email" id="Email" size="50" maxlength="100" class="form-control" placeholder="Email">
</div>
</div>
<input type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
And here is the jQuery part:
$('#submitBtn').click(function() {
$('#mCompany').text($('#Company').val());
$('#mDepartment').text($('#Department').val());
$('#mUsername').text($('#Username').val());
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
$('#mEmail').text($('#Email').val());
});
You can see and try with this
link to JSFiddle.
Not all fields are required, and what I want to do is to show only the entry with data.
For example in the below image, I don't want the red bordered part to show up.
Example Screen Shot
The sample on JSFiddle has only 6 fields but my form has over 30 fields. I'm wondering if there's a way to show only the fields with data.
Remove below part from HTML
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
remove below part from jquery
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
I make some improvents:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
//console.log(id);
//console.log("#m"+id);
$("#m"+id).text($(this).val());
all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTEL"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->
You can add some classes to know what field did you want to show in the modal and what not to show.... I think could be add dynamical to the modal too...
Add inputs dynamical:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$("#modalBody").html('');
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
if($(this).hasClass('add')){
all = all + $(this).val();
var input = '<div class="row">'
+ '<div class="entryname col-xs-3">' + id + ':</div>'
+ '<div class="entrydata col-xs-9" id="m' + id +'">' + $(this).val(); + '</div>'
+ ' </div>';
//console.log(input);
$("#modalBody").append(input);
}
//console.log(id);
//console.log("#m"+id);
//$("#m"+id).text($(this).val());
// all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control add" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control add" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control add" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control add" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div id="modalBody"></div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->
https://github.com/PatrickO10/meetUp/blob/master/index.html#L73
I am new in this field and reading one code.
I can't understand logForm.$invalid.$setValidity here. I can't find anything about it from internet. The setvalidity in the internet has two perimeters but here has not.
And the invalid here https://docs.angularjs.org/api/ng/type/form.FormController has been a boolean why setvalidity? Why don't you use ng-disabled="logForm.$invalid"
Could you tell me? Thanks.
<div class="modal fade login" tabindex="-1" role="dialog" aria-labelledby="loginModelLabel" ng-controller="LoginCtrl as logCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header primary-color-dark-bg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="loginModelLabel">Login</h4>
</div>
<div class="modal-body primary-bg">
<form class="row form-horizontal" id="loginForm" ng-submit="logCtrl.login(user)" name="logForm">
<label for="logEmail" class="col-xs-12 col-md-6 margin-top">
<span class="pad-right">Enter your email</span>
<input type="email" id="logEmail" ng-model="user.email" class="form-control" placeholder="example#krustykrab.com" required autocomplete="email" autofocus>
</label>
<label for="logPass" class="col-xs-12 col-md-6 margin-top">
<span>Enter your password</span>
<input type="password" id="logPass" ng-model="user.password" class="form-control" placeholder="Enter your password" required>
</label>
<div class="col-xs-12 margin-top" ng-show="loginError">
<p class="invalidPass">Login Fail! {{loginErrMsg}}</p>
</div>
<label class="col-xs-12 margin-top">
<input id="submitLogin" type="submit" value="Login" ng-disabled="logForm.$invalid.$setValidity">
</label>
</form>
</div>
<div class="modal-footer primary-color-dark-bg">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<input id="submitLogin" type="submit" value="Login"
ng-disabled="logForm.$invalid.$setValidity">
You are basically saying the input to be ng-disabled when the form is $invalid. i.e, here you are setting the input to $invalid, which makes the input to be disabled.
I tried to use bootstrap modal class to make a popup signup form and when i press the signup button window just fade and reload that's it. popup doesn't work. I'm using bootstrap 3.3.6. please help.
this is the sign up button code:
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
I am using the signup button inside a nav (navbar-inverse).
this is the popup form code:
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I coded this popup form code below the signup button code and that means it's inside the navbar
Please check this:
I have created a JS Fiddle and it is working fine here.
---- https://jsfiddle.net/DTcHh/19115/
You must include Bootstrap js and css file to your project in order to make it work.
Here your working code
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I fixed the problem. I find out the cause is that button type should be button not submit. I changed the button type to button then it worked.