I have this code in html where i click on submit to hit an api .After hitting the api , i get some response and on basis of that i need to open a model .
How do we achieve this ?
<div class="container mr-0">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12 contact-form pb-5">
<div class="sign-up">
<h4>Get Quote</h4>
</div>
<form onsubmit="myFunction('myForm')" id="myForm">
<div class="form-group">
<input class="form-control" placeholder="Name of company" type="name">
</div>
<div class="form-group">
<input class="form-control" placeholder="Number of employees" type="number" required="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Contact person name" type="name" required="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Contact person email" type="email" required="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Contact person mobile number" type="number" required="">
</div>
<div class="pt-3">
<!-- <button type="submit" class="get-button-light">SUBMIT</button> -->
<button type="submit" class="get-button-light" " >SUBMIT</button>
</div>
</form>
</div>
<!-- <div class="col-md-2"></div> -->
</div>
</div>
<div class="col-md-7 position-relative">
<div class="lets-start">
<img src="./assets/images4/lets-start.png" width="100%">
</div>
</div>
</div>
</div>
</section>
Code for model in same html .
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content inner-content">
<!-------------->
<section class="all-done">
<div class="container">
<div class="row">
<div class="col-md-12 p-4" >
<div class="all-bg">
<h4>Done</h4>
<p>Team <span>Vital</span> will connect with you in <br>next 24 hours .</p>
<div class=" text-right">
<img src="assets/images4/base-plan-like.png" />
</div>
</div>
</div>
</div>
</div>
</section>
<!-------------->
</div>
</div>
</div>
My fellow developer did this on submit button
data-toggle="modal" data-target="#exampleModalCenter"
but it opens up model even when api has not been hit .How can we control this from javascript .on click of submit ,i have hit an api .my concern is how to do it with javascript .
You can trigger model after your API response using the call
$('#exampleModalCenter').modal('show');
Here the call back function triggers after modal is opened.
$('#exampleModalCenter').on('shown.bs.modal', function () {
$('#myInput').focus()
})
DOCUMENTATION
Related
I'm using modal to save items to a database, and I'm wondering how to remove previously entered data without refreshing whole website, because right now when I click again "Add new item" which is opening modal there are stored / cached values inthere...
How to remove them ?
For example here is my modal:
<div [id]="id" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content dash-modal-content">
<div class="modal-header dash-modal-header">
<button type="button" class="close dash-close" data-dismiss="modal">×</button>
<h4 class="modal-title">ADD PRODUCT</h4>
</div>
<form (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-xs-7">
<div class="form-horizontal" action="">
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Product code:</label>
<div class="col-sm-5">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleCode" [(ngModel)]="article.code" (keyup.enter)="checkCode()">
</div>
<div class="checkbox col-sm-4" style="text-align: right; padding-right: 15px;">
<label style="font-size: 2em">
<input type="checkbox" value="" checked="" name="articleIsActive" [(ngModel)]="article.isActive">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
<span class="checkbox-label-text">Is product active?</span>
</label>
</div>
</div>
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleTitle" [(ngModel)]="article.title">
</div>
</div>
</div><!--End of form horizontal-->
</div><!--End of col-->
</div><!--End of row-->
</div><!--End of modal body-->
<div class="modal-footer">
<button type="submit" class="btn main-content-button pull-right" style="margin: 0;"><i class="fas fa-save"></i></button>
</div>
</form>
</div><!--End of modal content-->
</div>
</div>
<div>
</div>
onSubmit I'm simply saving data to a database:
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
});
}
// $('#' + this.id).removeData(''); < - maybe smth like this? But don't thinks so :(
}
I'm wondering how to immediately after submiting values to clear modal's content (text boxes etc)...
Thanks guys
Cheers
Try
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
article = {}; // <---- Reset the variable
});
}
}
my contact us page, a pop up is meant to show and disappear when i send a message,but nothing happens. please help
the contact us page and pop up modal
<!-- The Contact Us Page -->
<div class="jumbotron jumbotron-sm">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 header"></div>
</div>
</div>
</div>
<div class="container card">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">Contact us <span class="fa fa-envelope"></span> <!--<small class="col-xs-12" style="padding-left: 0">We will get back to You</small>--></h1>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="cardStyle">
<form name="contact" id="form" data-toggle="validator">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
<div class="form-group">
<label for="subject">
Subject</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="none" selected="" disabled>Choose One:</option>
<option value="general">General Customer Service</option>
<option value="collaborate">Collaborate with Us</option>
<option value="bug">Found a Bug/Issue</option>
<option value="other">Any other Queries</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-success pull-right" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
this is the pop up modal that is supposed to appear
<!-- Form submitted Thank You Modal -->
<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 text-center" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<h3 class="h3 text-center">Thank you for your feedback! We will get back to you.</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
the JavaScript file
$(document).ready(function() {
$('#form').validator().on('submit', function(e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
$('#myModal').modal('hide');
} else {
// everything looks good!
$('#myModal').modal('show');
}
})
});
Since you try to show the modal only when preventDefault() has NOT been called, the form's default action will take place, which is to submit the form. This causes a page load and since you haven't specified an action attribute on the form, it will submit to the same page. In other words, the page just reloads.
If you don't want to cause a page reload, you have to always call preventDefault() and then submit the data with AJAX.
I'm building a website and tried to embed a form as a partial view inside a modal window. I succeeded in getting the form inside the modal, but it only appears on the left half of the modal body. Does anyone know a fix for this?
I never set the col-md-6 anywhere so there i no reason for it to appear this way. I even tried to exactly copy some modal examples from the internet that appeared to be correct, but i had the same problem.
Modal window that the form is loaded in:
<!-- Modal -->
<div id="addLeverancierModal" class="modal fade" tabindex="-1" role="dialog">
<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">Leverancier toevoegen</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleer</button>
<button type="button" class="btn btn-success">Opslaan</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Modal form(partial view):
<form role="form">
<div class="form-group">
<label>Leveranciernummer</label>
<input type="email" class="form-control" id="leveranciernummerInput" placeholder="Leveranciernumer">
</div>
<div class="form-group">
<label>Naam</label>
<input class="form-control" id="leveranciernaamInput" placeholder="Naam">
</div>
<div class="form-group">
<label>Straatnaam</label>
<input class="form-control" id="straatnaamInput" placeholder="Straatnaam">
</div>
<div class="form-group">
<label>Huisnummer</label>
<input class="form-control" id="huisernummerInput" placeholder="Huisnummer">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" id="postcodeInput" placeholder="Postcode">
</div>
<div class="form-group">
<label>Plaatsnaam</label>
<input class="form-control" id="plaatsnaamInput" placeholder="Plaatsnaam">
</div>
<div class="form-group">
<label>Land</label>
<input class="form-control" id="landInput" placeholder="Land">
</div>
<div class="form-group">
<label>VAT</label>
<input class="form-control" id="vatInput" placeholder="VAT">
</div>
<div class="form-group">
<label>Telefoon</label>
<input class="form-control" id="telefoonInput" placeholder="Telefoon">
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" id="emailInput" placeholder="Email">
</div>
<div class="form-group">
<label>Email extra</label>
<input class="form-control" id="emailExtraInput" placeholder="Email extra">
</div>
</form>
JQuery to load form inside modal:
var GetLeverancierForm = function () {
$.ajax({
type: "GET",
url: baseURL + '/AddLeverancier',
success: function (data) {
$(".modal-body").html(data);
}
});
}
Base container all content is loaded in(all html files):
<div class="container body-content">
#RenderBody()
</div>
Picture of how the modal appears:
Design your form like this
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>
It would look like this :
below is my modal i want this to open automatically once the song gets over in default audio player
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">
Don't Wait, Login now!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
Forgot your password?
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" id="namea" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</div>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" id="emailField" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="txtEmail" placeholder="Email" <input type="text" />
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="text" id="txtPhoneNo" class="form-control" id="mobile" placeholder="Mobile" onkeypress="return isNumber(event)" />
</div>
</div>
<div class="form-group">
<label for="password" id="p1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" id="pass1" class="form-control" id="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Re-Enter Password</label>
<div class="col-sm-10">
<input type="password" id="pass2" class="form-control" id="password1" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="button" onclick="ValidateName();myFunction();ValidateNo();checkEmail();" class="btn btn-primary btn-sm" >
Save & Continue</button>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
OR</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3 class="other-nw">
Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
Facebook <a href="#" class="btn btn-danger">
Google +</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login And Register -->
<!-- Java scripts -->
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".pop").click(function () {
$("#myModal").modal();
});
});
</script>
Html5 audio player has events which will get triggered when the audio stops playing
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("The audio has ended");
};
Refer this page
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="text" name="email" id="email" class="form-control" placeholder="Enter Email..."/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Enter Password..."/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<input type="hidden" name="action" value="login">
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-default">Clear</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
I'm trying to show this modal automatically, with this javascript code:
<script>
$('#myModalLogin').modal({
show: true
})
</script>
But it seems not work, and i don't understand why.
ps: of course I have included javascript files bootstrap 3:
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
Any help and/or direction would be greatly appreciated. Thanks!
I do not see any issues with your code:
with code
$('#myModalLogin').modal({
show: true
})
without it it does not.
Check this: http://jsfiddle.net/usecide/99xKj/1/