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
Related
I am using a Bootstrap modal window for a form. I need to prevent the modal from closing after pressing the submit button. I need to close the modal only after clicking the close button. Please help me.
<!--Login, Signup, Forgot Password Modal -->
<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<!-- login modal content -->
<div class="modal-content" id="login-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"><span class="glyphicon glyphicon-lock"></span> Login Now!</h4>
</div>
<div class="modal-body">
<form method="post" id="Login-Form" role="form">
<div class="form-group">
<div class="input-group">
<input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" >
</div>
</div>
<div class="form-group">
<div class="input-group">
<input name="password" id="login-password" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg">LOGIN</button>
</form>
</div>
<div class="modal-footer">
<p>
<a id="FPModal" href="javascript:void(0)">Forgot Password?</a> |
<a id="signupModal" href="javascript:void(0)">Register Here!</a>
</p>
</div>
</div>
Try this code to see if you can prevent the dialog from submit
$( "form" ).submit(function( event ) {
event.preventDefault();
});
And then close it using close button.
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 :
Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.
From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.
<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/