I have done bootstrap modal in different page means modal in another page(modal.html) and button in different page(career.php) it's working but same modal i want to link for multiple buttons. How to do that i am not getting
$(document).ready(function(e){
$('#btnModal') .click(function(){
//using ajaz post
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx) //fill div tmpmodal with modal.html content..!!
//calling modal
$('#testModal').modal('show');
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary apply" id="btnModal">Apply</button>
<li style="display:block;"></li>
<div id="tmpModal"></div>
Add bootstrap CSS & JS
Modal
Modal
Modal
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/k0yfpcs1/
Just do that based on the class not on id
<button class="btn btn-primary someclassname" id="btnModal">Apply</button>
and update javascript to click event on that class
$('.someclassname') .click(function(){
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx)
$('#testModal').modal('show');
})
})
Related
Using the following form with required tags does not actaully validate my input, and always alerts "ok", what am I missing?
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputFirstName">Förnamn</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputLastName">Efternamn</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputPhone">Telefon</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Telefon"/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputMobile">Mobiltelefon</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon"/>
</div>
<div class="form-group col-sm-8">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="inputCompany">Företag</label>
<input type="text" class="form-control" id="inputCompany" placeholder="Företag" required/>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-3 pull-right" data-bind="click: submit">Submit</button>
</form>
Javascript, where i want to alert "ok" if validation passes:
vm.submit = function(){
alert("ok");
};
I'm learning ejs and I have some trouble to get some thinge working properly. I'm trying to fill out a form when user click modify, depending on which line it is, but the form is showing all the same data and I don't know why.
For exemple, if i click "Modify on the second line of the table, it's supposed to take what's on second row and fill the form with dats. But it's always filling it using the first row data, regardless of where I click. Here's the code :
<% if(data.length){
for(var i = 0;i < data.length;i++) { %>
<tr>
<td><%=data[i].ID%></td>
<td><%=data[i].NOM%></td>
<td><%=data[i].EMPLACEMENT%></td>
<td><%=data[i].UTILITE%></td>
<td><%=data[i].MARQUE%></td>
<td><%=data[i].MODELE%></td>
<td><%=data[i].NUMEROSERIE%></td>
<td><%=data[i].PROCESSEUR%></td>
<td><%=data[i].MEMOIRE%></td>
<td><%=data[i].OS%></td>
<td><%=data[i].CATEGORIE%></td>
<td><%=data[i].VALEUR%></td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5" placeholder="ID" name="<%=data[i].ID%>" value="<%=data[i].ID%>" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm" placeholder="Nom" name="<%=data[i].NOM%>" value="<%=data[i].NOM%>">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m" placeholder="Emplacement" name="EMPLACEMENT" value="<%=data[i].EMPLACEMENT%>">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m" placeholder="Utilité" name="UTILITE" value="<%=data[i].UTILITE%>">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m" placeholder="Marque" name="MARQUE" value="<%=data[i].MARQUE%>">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m" placeholder="Modèle" name="MODELE" value="<%=data[i].MODELE%>">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m" placeholder="Numéro de série" name="NUMEROSERIE" value="<%=data[i].NUMEROSERIE%>">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m" placeholder="Processeur" name="PROCESSEUR" value="<%=data[i].PROCESSEUR%>">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m" placeholder="Mémoire" name="MEMOIRE" value="<%=data[i].MEMOIRE%>">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m" placeholder="OS" name="OS" value="<%=data[i].OS%>">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m" placeholder="Catégorie" name="CATEGORIE" value="<%=data[i].CATEGORIE%>">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m" placeholder="Valeur" name="VALEUR" value="<%=data[i].VALEUR%>">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Here's how data looks like:
Data are different, but when I click edit, it shows data only from the first row.
Heres the rendered HTML (for the two rows in my last screenshot) :
<tr>
<td>20</td>
<td>test</td>
<td>1</td>
<td>S</td>
<td>HP</td>
<td>EWE</td>
<td>DFERu</td>
<td>weWE</td>
<td>wesdf</td>
<td>ESFDdddddddddddddddddddddddddddd</td>
<td>Cdeqawed</td>
<td>989</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-7" placeholder="ID" name="ID" value="20" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-7" placeholder="Nom" name="NOM" value="test">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-7" placeholder="Emplacement" name="EMPLACEMENT" value="1">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-7" placeholder="Utilité" name="UTILITE" value="S">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-7" placeholder="Marque" name="MARQUE" value="HP">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-7" placeholder="Modèle" name="MODELE" value="EWE">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-7" placeholder="Numéro de série" name="NUMEROSERIE" value="DFERu">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-7" placeholder="Processeur" name="PROCESSEUR" value="weWE">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-7" placeholder="Mémoire" name="MEMOIRE" value="wesdf">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-7" placeholder="OS" name="OS" value="ESFDdddddddddddddddddddddddddddd">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-7" placeholder="Catégorie" name="CATEGORIE" value="Cdeqawed">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-7" placeholder="Valeur" name="VALEUR" value="989">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
<form name = form2 action="/delete" method="post">
<input type="submit" name="20" value="Delete" class="btn btn-outline-danger" />
</form>
<!--20-->
<!--<form action="/update" method="put">
<input type="submit" name="20" value="Update" class="btn btn-outline-primary" />
</form>
<form action="" method="post">
<input type="submit" name="Delete" value="Delete" class="btn btn-outline-danger" />
</form>-->
</td>
<!--20-->
</tr>
<tr>
<td>21</td>
<td>r5y</td>
<td>5ry</td>
<td>r5y</td>
<td>y5r</td>
<td>w3</td>
<td>ww3</td>
<td>w3</td>
<td>55</td>
<td>6</td>
<td>7</td>
<td>677</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-8" placeholder="ID" name="ID" value="21" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-8" placeholder="Nom" name="NOM" value="r5y">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-8" placeholder="Emplacement" name="EMPLACEMENT" value="5ry">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-8" placeholder="Utilité" name="UTILITE" value="r5y">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-8" placeholder="Marque" name="MARQUE" value="y5r">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-8" placeholder="Modèle" name="MODELE" value="w3">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-8" placeholder="Numéro de série" name="NUMEROSERIE" value="ww3">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-8" placeholder="Processeur" name="PROCESSEUR" value="w3">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-8" placeholder="Mémoire" name="MEMOIRE" value="55">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-8" placeholder="OS" name="OS" value="6">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-8" placeholder="Catégorie" name="CATEGORIE" value="7">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-8" placeholder="Valeur" name="VALEUR" value="677">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Can you help me?
Thanks
hm, my first bet would be, that the ids must be unique.
Have you tried to replace id="Input2m" with id="Input2m-<%=i%>"? (That is, adding the loop index to it).
I solved my problem, i modified these :
id="myModal1"
data-target="#myModal1"
to this :
data-target="#myModal1-<%=i%>"
id="myModal1-<%=i%>"
I have a wierd issue.
The email input value is not logged, however the password value is logged.
Any idea guys?
<div class="container" ng-controller="loginCtrl">
<div class="row" style="height: 50px;"> </div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4" >
<div class="form-group">
<label for="emailinput">Email address</label>
<input type="email" class="form-control" id="emailinput"
ng-model="user.email"
placeholder="Enter Email Address">
</div>
<div class="form-group">
<label for="passwordinput">Password</label>
<input type="password" class="form-control" id="passwordinput"
ng-model="user.pass"
placeholder="Enter Password">
</div>
<div class="form-group">
<button class="btn btn-primary ladda-button"
ng-click="verifyCredentials()"
data-style="expand-left">
<span class="ladda-label">Login</span>
</button>
</div>
<div class="form-group">
<label for="passwordinput">
Forgot Password?
</label>
</div>
</div>
</div>
</div>
My angular code is as below.
var app = angular.module('bookie',[]);
app.controller('loginCtrl', function($scope, $http){
$scope.user = {};
$scope.verifyCredentials = function(){
console.log($scope.user);
}
});
The email will only show when it is a legal email address:
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app ng-init="user={}">
<div class="form-group">
<label for="emailinput">Email address</label>
<input type="email" class="form-control" id="emailinput"
ng-model="user.email"
placeholder="Enter Email Address">
</div>
<div class="form-group">
<label for="passwordinput">Password</label>
<input type="password" class="form-control" id="passwordinput"
ng-model="user.pass"
placeholder="Enter Password">
</div>
<div class="form-group">
<button class="btn btn-primary ladda-button"
ng-click="verifyCredentials()"
data-style="expand-left">
<span class="ladda-label">Login</span>
</button>
</div>
<div class="form-group">
<label for="passwordinput">
Forgot Password?
</label>
</div>
{{user | json}}
</div>
It will display email only when the user types the correct email address (i.e -something#xyz.com)
<label>EMAIL:</label>
<input type="email" ng-model="uemail" name="ueamil" placeholder="Enter EMAIL">
<h4> EMAIL: {{uemail}}</h4>
I want to do some operations after submitting of form. But the page gets reloaded after clicking of "Submit" button. I have used evt.preventDefault() still its not stopped.
<form class="user-info-form">
<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="create-user-label">User Details</h4>
<div class="error-message"></div>
</div>
<div class="modal-body">
<div class="form-group">
<label for="user-email" class="control-label">Email:</label>
<input type="email" class="form-control" id="user-email" name="email" required>
</div>
<div class="form-group">
<label for="user-first-name" class="control-label">First Name:</label>
<input type="text" class="form-control" id="user-first-name" name="first_name" required>
</div>
<div class="form-group">
<label for="user-last-name" class="control-label">Last Name:</label>
<input type="text" class="form-control" id="user-last-name" name="last_name" required>
</div>
<div class="form-group">
<label for="user-password" class="control-label">Password:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="form-group">
<label for="user-confirm-password" class="control-label">Confirm Password:</label>
<input type="password" class="form-control" id="confirmPassword" name="confirm-password" required>
</div>
<input type="hidden" name="id" class="uuid" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary submit-btn">Submit</button>
</div>
</div>
</form>
And JS code is -
$(".submit-btn").submit(function (evt) {
evt.preventDefault();
oThis.onSubmitBtn();
});
You should apply the submit function to your form tag, not to your submit button.
$(".user-info-form").submit(function (evt) {
evt.preventDefault();
oThis.onSubmitBtn();
});
I have a minor front end issue. When I load Bootstrap DIV's into the JQuery Modal's body it over flows into the footer instead of expanding the body. Thanks.
<div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="fname" placeholder="First Name">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="lname" placeholder="Last Name">
</div>
<div class="col-sm-12"><br></div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw" placeholder="Password">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
</div>
<!-- END ADDRESS FORM -->
</div>
</form>
</div>
<div class="modal-footer">
<a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
</div>
</div>
</div>
</div>
Add the 'row' class to your .modal-body
http://jsbin.com/fehivowimu/edit?html,output
<div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body row">
<form action="" method="POST">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="fname" placeholder="First Name">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="lname" placeholder="Last Name">
</div>
<div class="col-sm-12"><br></div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw" placeholder="Password">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
</div>
<!-- END ADDRESS FORM -->
</div>
</form>
</div>
<div class="modal-footer">
<a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
</div>
</div>
</div>
</div>