I have 2 buttons for which I want to call same modal but the text on the modal should be changed depending on which button was clicked. How do I do that please?
<div>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo)>Edit</a>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo.id)>Delete</a>
</div>
Modal
<div class="reveal" data-reveal id="new-modal">
<h5>Edit Student Info?</h5> // I want to add "Delete student info
here too"
<div class="secondary button-group">
<a class="button" href="#">Yes</a>
<a class="button" href="#">No</a>
</div>
</div>
pass a second parameter to your confirmModal() function, and store the content in a variable accessible by the modal within your ts or js code, and use this variable to load relevant configuration in your modal
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
<script>
$(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>
<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>
Related
I have written a web page which contains a table like this:
RFP Table
When the user clicks on an RFP#, a modal popup will appear that will look like this:
Modal Popup
When the user has completed and submitted the form, a download link will appear wherein they may download a pdf of the RFP.
My problem is that the other modals do not function properly. The first modal works fine: after completing and submitting the form, the download button appears, and email gets sent. I'm suspecting that it may be the way I implemented the modals: I just made one modal at first, copy and paste to make several more then change the id and data-target. By the way, I'm doing this on site hosted on A2Hosting.
Here's my code:
<table class="table table-bordered" style="text-align:center; background-color:aliceblue">
<thead>
<tr style="text-align:center">
<th scope="col">RFP #</th>
<th scope="col">Description of RFP</th>
<th scope="col">End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight:700">RFP19-CHCC-GSS-015</td>
<td>Pest Control Services</td>
<td>07/24/2019</td>
</tr>
<tr>
<td style="font-weight:700">RFP19-CHCC-CGC-CCP-017</td>
<td>Crisis Counseling Program</td>
<td>07/23/2019</td>
</tr>
</tbody>
</table>
<!-- Modals Start-->
<div id="modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="text-align:center; margin-top:20px">
Contact Us
</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<p> Send your message in the form below and we will get back to you as early as possible. </p>
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="phone"> Phone Number:</label>
<input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h3>Sent your message successfully!</h3>
<a href="docs/RFP/test.pdf" download="RFP19.pdf">
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</a>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
</div>
<div id="modal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="text-align:center; margin-top:20px">
Contact Us
</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<p> Send your message in the form below and we will get back to you as early as possible. </p>
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="phone"> Phone Number:</label>
<input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h3>Sent your message successfully!</h3>
<a href="docs/RFP/test.pdf" download="RFP19.pdf">
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</a>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
</div>
Got it working. I did not realize that I had to change the id's of some of the modal's components.
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 :
I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?
you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href
Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>
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