This question already has answers here:
Resetting a multi-stage form with jQuery
(31 answers)
Closed 5 years ago.
Could you help me with my post-form? I am gonna try realised reseting form after closing modal window with message about sending, but it isn't working! Why? I'm using Bootstrap 3.
<form id='send-form' action="#" method="post" target="iframe1">
<div class="input-field">
<input type="text" name="name" class="form-control" placeholder="name">
</div>
<div class="input-field">
<input type="email" name="email" class="form-control" placeholder="e-mail...">
</div>
<div class="input-field">
<input type="text" name="subject" class="form-control" placeholder="Тема...">
</div>
<div class="input-field">
<textarea name="message" class="form-control" placeholder="message"></textarea>
</div>
<div class="input-field">
<input type="checkbox" checked autocomplete="on" name="law">check</input>
</div>
<button type="submit" id="submit" class="btn btn-blue btn-effect" data-toggle="modal"
data-target="#modal-send">send</button>
</form>
<div class="modal" id="modal-send">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button id='reset-but' class="close" type="button" data-dismiss="modal">
<i class="fa fa-close fa-2x"></i></button>
<script>
$(index.html).ready(function(){
$('#reset-but').click(function () {
$('#send-form')[0].reset();
});});
</script>
<h4 class="modal-title">Сообщение отправлено<br><br></h4>
</div>
</div>
</div>
</div>
Just delete $(index.html).ready(function(){} and it will works
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='send-form' action="#" method="post" target="iframe1">
<div class="input-field">
<input type="text" name="name" class="form-control" placeholder="name">
</div>
<div class="input-field">
<input type="email" name="email" class="form-control" placeholder="e-mail...">
</div>
<div class="input-field">
<input type="text" name="subject" class="form-control" placeholder="Тема...">
</div>
<div class="input-field">
<textarea name="message" class="form-control" placeholder="message"></textarea>
</div>
<div class="input-field">
<input type="checkbox" checked autocomplete="on" name="law">check</input>
</div>
<button type="submit" id="submit" class="btn btn-blue btn-effect" data-toggle="modal" data-target="#modal-send">send</button>
</form>
<button id='reset-but' type="button" data-dismiss="modal">
<i class="fa fa-close fa-2x"></i></button>
<script>
$('#reset-but').click(function () {
$('#send-form')[0].reset();
});
</script>
<h4 class="modal-title">Сообщение отправлено<br><br></h4>
Related
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%>"
In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model
Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
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');
})
})
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>