let myOtherModal = new bootstrap.Modal(
document.getElementById("signUpModal"),
{}
);
myOtherModal.show();
let myModal = new bootstrap.Modal(document.getElementById("myModal"), {});
myModal.show();
I have the above code on the js file linked to the layout page. It works out with the first modal, that correctly pops up when the page is loaded, but does not work with the second one. It doesn't work also when I move myOtherModal.show() to after the myModal variable declaration...
Why does order matters here and how can I make all modals work?
HMTL code - view "profile"
<div
class="modal fade"
id="myModal"
tabindex="-1"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Sign Up</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="/login" method="POST" enctype="multipart/form-data">
<label for="username">Username</label>
<input type="text" name="username" />
<br />
<label for="email">Email</label>
<input type="text" name="email" />
<br />
<label for="password">Password</label>
<input type="password" name="password" />
<br />
<label for="passwordCheck">Confirm password</label>
<input type="password" name="passwordCheck" />
<br>
<label for="imageUrl">Profile Picture</label>
<input type="file" name="imageUrl">
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Close</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#logInModal" data-bs-dismiss="modal">Log In</button>
</form>
</div>
</div>
</div>
</div>
HTML code - view "index"
<div
class="modal fade"
id="signUpModal"
tabindex="-1"
aria-labelledby="signUpModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signUpModalLabel">Sign Up</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="/signup" method="POST" enctype="multipart/form-data">
<label for="username">Username</label>
<input type="text" name="username" />
<br />
<label for="email">Email</label>
<input type="text" name="email" />
<br />
<label for="password">Password</label>
<input type="password" name="password" />
<br />
<label for="passwordCheck">Confirm password</label>
<input type="password" name="passwordCheck" />
<br>
<label for="imageUrl">Profile Picture</label>
<input type="file" name="imageUrl">
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Close</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#logInModal" data-bs-dismiss="modal">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
Related
My jQuery is not working well if placed on the same file with the html the output will be just one value password, and email will not be displayed, but if placed on a different file when i click on the Login button the values console.log(datatopost) will disappear (like refreshing) on the console.
HTML Code
<!-- Login Modal -->
<form id="loginForm" method="post">
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login to your Account</h5>
<!-- SIGN IN ERROR MESSAGE-->
<div id="loginerrorMessage"></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="loginemail" class="sr-only">Email address</label>
<input type="email" class="form-control" id="loginemail" aria-describedby="emailHelp" placeholder="Enter email" autocomplete="on">
</div>
<div class="form-group">
<label for="loginpassword" class="sr-only">Confirm Password</label>
<input type="password" class="form-control" name="password" id="loginpassword" placeholder="Enter Password" autocomplete="on">
</div>
<h6>Login as:</h6>
<div class="form-check form-check-inline">
<input type="radio" name="loginRadio" class="form-check-input" id="checkbank" value="bank">
<label class="form-check-label" for="checkbank">Bank</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="loginRadio" id="checkcustomer" value="customer">
<label class="form-check-label" for="checkcustomer">Customer</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="loginRadio" id="checkadmin" value="admin">
<label class="form-check-label" for="checkadmin">Admin</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto" data-target="#signupModal" data-toggle="modal" data-dismiss="modal">Register</button>
<input type="submit" value="Login" class="btn btn-info" name="login">
<!-- <button type="submit" class="btn btn-info">Login</button> -->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
jquery code
$(document).ready(function(){
$('#loginForm').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
let datatopost = $(this).serializeArray();
console.log(datatopost);
});
});
Please I'm just a Beginner...
The email doesn't appear because you didn't set name="email"
Correct is:
<input type="email" name="email" class="form-control" id="loginemail" aria-describedby="emailHelp" placeholder="Enter email" autocomplete="on">
Result:
[{
name: "email",
value: "test#test.it"
}, {
name: "password",
value: "passwordtest"
}, {
name: "loginRadio",
value: "bank"
}]
In Chrome, right click in the console to reveal a menu with "Preserve Log upon Navigation" as an option. Selecting this will keep your console content.
Try it out and run your code again.
I have a bootsrap modal form.In that if i click on the radio button,'For All Subjects','Subject' textbox should be in disabled state.Similarly,if I click on radio button 'Specific Subject', 'Subject' textbox should be enabled.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="adminContent">
<div class="row">
<div class="col s12 m12 l12" style="float: right">
<button type="button" class="btn btn-lg"
data-toggle="modal" data-target="#addMasterData" >Add Master</button>
</div>
</div> </div>
<div class="modal fade vertical-align-center" id="addMasterData"
role="dialog" style="width: 500px"; role="dialog"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<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">
<b><font class="font">Add Master</font></b>
</h4>
</div>
<form id="mastercreate" action="addConfig" method="post">
<div class="modal-content ">
<div class="modal-body ">
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects"
value="Yes" >For All Subjects
</label> <label class="radio-inline"> <input type="radio"
name="roleSubjectRadio" id="specificFlights"
value="Specific" checked>Specific Subject
</label> <input type="hidden" class="form-control" id="specs" name="specs"
value="">
</div>
<div class="form-group" id="subName">
<label for="createorigin" class="form-control-label"><font >Subject
Name:</font></label> <input type="text" class="form-control" id="subNo"
name="subNo" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
onclick="addMaster()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
Please suggest how to do it from javascript.
Using javascript you can do this. Give onclick="disableSubjectField()" to the radio buttons:
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects" value="Yes" onclick="disableSubjectField()" >For All Subjects
</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="specificFlights" value="Specific" onclick="disableSubjectField()" checked>Specific Subject
</label> <input type="hidden" class="form-control" id="specs" name="specs" value="">
</div>
Then write this javascript to disable the Subject input field.
function disableSubjectField() {
if(document.getElementById('forAllSubjects').checked) {
document.getElementById('subNo').disabled = true;
}else if(document.getElementById('specificFlights').checked) {
document.getElementById('subNo').disabled = false;
}
}
For that you need to use event handling for radio buttons, you can try below snippet for that. I have written that in jQuery, you can also use JavaScript for the same.
$('input[type=radio]').click(function(){
if($(this).prop("id")==="forAllSubjects"){
$("#subNo").prop("disabled","remove");
} else {
$("#subNo").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="adminContent">
<div class="row">
<div class="col s12 m12 l12" style="float: right">
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#addMasterData" >Add Master</button>
</div>
</div>
</div>
<div class="modal fade vertical-align-center" id="addMasterData" role="dialog" style="width: 500px"; role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<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">
<b><font class="font">Add Master</font></b>
</h4>
</div>
<form id="mastercreate" action="addConfig" method="post">
<div class="modal-content ">
<div class="modal-body ">
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects" value="Yes" >For All Subjects
</label>
<label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="specificFlights" value="Specific" checked>Specific Subject
</label>
<input type="hidden" class="form-control" id="specs" name="specs" value="">
</div>
<div class="form-group" id="subName">
<label for="createorigin" class="form-control-label">
<font >Subject Name:</font>
</label>
<input type="text" class="form-control" id="subNo" name="subNo" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addMaster()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
you should add a click function depends on your library
lets get from a point you don`t use any library
you should do this : (you can copy past and it will work)
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<div class="container" id="adminContent">
<div class="row">
<div class="col s12 m12 l12" style="float: right">
<button type="button" class="btn btn-lg"
data-toggle="modal" data-target="#addMasterData" >Add Master</button>
</div>
</div> </div>
<div id="addMasterData"
role="dialog" style="width: 500px"; role="dialog"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<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">
<b><font class="font">Add Master</font></b>
</h4>
</div>
<form id="mastercreate" action="addConfig" method="post">
<div class="modal-content ">
<div class="modal-body ">
<div class="form-group">
<label for="text">Subjects:</label> <label class="radio-inline">
<input type="radio" name="roleSubjectRadio" id="forAllSubjects"
value="true" onclick="radioClicked(this.id)" >For All Subjects
</label>
<label class="radio-inline">
<input type="radio"
name="roleSubjectRadio" id="specificFlights"
value="Specific" onclick="radioClicked(this.id)" checked>
Specific Subject
</label> <input type="hidden" class="form-control" id="specs" name="specs"
value="">
</div>
<div class="form-group" id="subName">
<label for="createorigin" class="form-control-label"><font >Subject
Name:</font></label> <input type="text" class="form-control" id="subNo"
name="subNo" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
onclick="addMaster()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
function radioClicked (me){
//specificFlights
//forAllSubjects
if(me === "forAllSubjects" && document.getElementById("subNo").classList.contains('disabled') === false){
document.getElementById("subNo").setAttribute("disabled",'disabled');
}else{
document.getElementById("subNo").removeAttribute("disabled",'disabled');
}
}
</script>
Modal can't be displayed because there is value single quote (') javascript:edit in variable three. please resolve this problem...
I've been using htmlspecial character in javascript function, but still no effect in single quotes.
thanks before -_-.
<div class="modal fade" id="mEditComment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit comment</h4>
</div>
<br>
<form name="editCmmt" class="form-horizontal" method="POST">
<fieldset>
<div class="control-group">
<!-- nama -->
<label class="control-label">Email</label>
<div class="controls">
<input type="text" name="email" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- nama -->
<label class="control-label">Name</label>
<div class="controls">
<input type="text" name="email" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- asal-->
<label class="control-label">Komentar</label>
<div class="controls">
<input type="text" name="comment" class="input-xlarge">
</div>
</div>
</fieldset>
<div class="modal-footer">
<input type="submit" name="edit" class="btn btn-success" value="Update">
<input type="reset" name="reset" class="btn btn-danger" value="reset">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//open modal dialog for edit
function edit(satu, dua, tiga) {
document.editCmmt.email.value = satu;
document.editCmmt.name.value = dua;
document.editCmmt.komentar.value = tiga;
$('#mEditComment').modal('show');
</script>
Edit comment
Simply escape the single quote with \
<a href="#"
onclick="javascript:edit('bagus#domain.com','Bagus Wicaksono','the prob\'lem was here')"
data-toggle="modal"
class="btn btn-success btn-lg">
Edit comment</a>
and it'll work. This tells the parser that you want a literal ' to be inserted into the string.
It seems that my submit button is not activating the ng-click angular directive and I cannot figure out why. It seems that every other person that had this problem didn't include their submit button inside of their form, and I'm 99% sure I did that.
<div class="modal fade" id="subModal" ng-controller="SubscriberController" ng-controller-as="subCtrl">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">× </span><span class="sr-only">Close</span></button>
<h2 class="modal-title">Subscribe</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form ng-submit="console.log('submit')">
<div class="form-group">
<label for="subscriber-name" class="control-label"><strong>Name:</strong></label>
<input type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="subscriber-email" class="control-label"><strong>Email:</strong></label>
<input type="email" class="form-control" ng-model="subCtrl.subData.email" placeholder="johndoe#example.com" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block"><i class='fa fa-envelope'></i> Subscribe</button>
</div>
<div re-captcha ng-model="subCtrl.subData.captcha"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to put something like
<input ng-model="myForm.email" type="email" class="form-control" id="subCtrl.subData.email" placeholder="johndoe#example.com" required>
and
<input ng-model="myForm.name" type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
into your inputs, and give your form a name attribute
<form name="myForm" ng-submit="submit()">
plnkr: http://plnkr.co/edit/KRmZkPS6t4ANmAHwTevQ
I'm trying to pass the user_id contained in my database to a form that's displayed within a Bootstrap Modal upon clicking a button.
The button:
<td id="fired">
<button class="btn btn-default btn-danger btn-xs fired" data-id="<?php echo $row['user_id']; ?>">
Fired
</button>
</td>
JQuery:
$(document).ready(function(){
$(".fired").click(function(){
$("#user_id").val($(this).attr('data-id'));
$('#firedModal').modal('show');
});
});
Modal:
<div class="modal fade" id="firedModal" tabindex="-1" role="dialog" aria-labelledby="firedModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="firedModal">Fire Habbo</h4>
</div>
<form class="form-signin" role="form" action="" method="post">
<div class="modal-body">
<input type="text" class="form-control" placeholder="Firing Reason" name="fired_reason" required autofocus />
<input type="text" class="form-control" placeholder="Firing Tag" name="fired_tag" required />
<input type="text" class="form-control" placeholder="Date" name="fired_date" required />
<input type="text" class="form-control" placeholder="Status (MAY JOIN AS RECRUIT/PARDONED/NEVER REHIRE)" name="fired_status" />
<input type="hidden" class="form-control" name="user_id" value="" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Fire</button>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</form>
</div>
</div>
</div>
However, on clicking the button the modal shows but the value of the user_id input is not filled by the row's user_id. What am I doing wrong? Thanks.
Modify your code , with this one.
<input type="hidden" class="form-control" id="user_id" name="user_id" value="" />
$(document).ready(function(){
$("#fired").click(function(){
$("#user_id").val($(this).attr('data-id'));
$('#firedModal').modal('show');
});
});