I'm having a slight issue with jquery on IE.
My Internet Explorer version is 11 and the page has been built using a Bootstrap template that should be compatible with all browsers. It works perfectly fine on Firefox, Safari and Chrome. In the head section I have a
<meta http-equiv="X-UA-Compatible" content="IE=edge">
and also
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
On my IE console it states that with
<input value="Send" class="btn btn-primary" onclick="sendCall()">
'sendCall' is not defined.
I have been looking for the same problem around to find a solution with $.Post in jquery but what i got mostly is that the problem has nothing to do with that, as it works fine but maybe on how it should be stated for IE. Could someone help me writing it correctly?
Here is my html:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">¿Cuándo te llamamos?</h4>
</div>
<div class="modal-body">
<form id="callForm" name="sentMessage">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name *" id="name" name="name" required data-validation-required-message="Please enter name" autocomplete="on">
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Phone *" id="phone" name="phone" required data-validation-required-message="Please enter phone number" autocomplete="on">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="dd/mm/yyyy *" id="date" name="date" required data-validation-required-message="please entter a date" autocomplete="on">
</div>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" name="timepicker1" type="text" class="form-control input-small" data-minute-step="30" data-default-Time="current" data-show-Meridian="false">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<br>
<br>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<input value="Send" class="btn btn-primary" onclick="sendCall()">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script> function sendCall()
{
//the following url is where the form is sent to
var petition = $.post( "http://www.myweb.com/Call.php", $( "#callForm" ).serialize() )
.done(function( data ) {
$('#success').html(data);
})
.fail(function() {
alert( "error, action failed..." );
});
}
</script>
Related
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>
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 am trying to generate a modal box on submitting a form but when I submit it, it is not validating the required input because it's type='button'. If I replace it with 'submit' then it not showing pop-up box. And also I want to validate first and then generate pop-up. Would someone please help me out in this!
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</html>
Simply prevent the default behaviour like this:
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
//If the form is valid open modal
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
So for your example it would be:
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form id="form1" name="form1">
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<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.1/js/bootstrap.min.js"></script>
<script>
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
</script>
</html>
For more information check out:
https://stackoverflow.com/a/5688798/7667467
Change your button to:
<input type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg" value="Generate">
You can add classes to any element and it will look the same
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
<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/