i am newbie.
I am Creating a button on my homepage,once clicked it shows a modal showing the signin form and i am making a separate html page for my Modal.
Here is my Main Code where the Button is placed in my homepage.
<button id="btn1"><a href="signin.html" class="btn btn-success"data-toggle="modal"data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit">
</span> Sign In</a>
</button>
In signin.html
<div class="modal"id="mymodal" >
<h3 class="modal-header">
<h1>
We Are Glad you are Here!
</h1>
</div>
<div class="modal-body">
<div class="container">
<form class="form-signin">
<h6 class="form-signin-heading">
Please sign In</p>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-sm btn-primary" type="submit" data-toggle="modal">Sign in</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"aria-hidden="true">Close</button>
</div> </div>
Issue
Modal ain't popping up on same page but it's going on next page.How should i fix it?so that my Signup form remains on the front page.
Working Example
I think the target element with the id mymodal should be in the same page with button, try to place <div class="modal"id="mymodal" ></div> after the button :
<button id="btn1">
<a href="signin.html" class="btn btn-success" data-toggle="modal"
data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit"></span> Sign In
</a>
</button>
<div class="modal"id="mymodal" ></div> //place the target div after button
Hope this helps.
Related
I'm trying to redirect my modal form to my php script, I've used action but for some reason the button just clicks and stops.
<form action="action.php" method="post" role="form" target="action.php">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password" />
</div>
<!-- Form submit button -->
<button class="btn btn-primary" data-target="action.php" data-toggle="button" type="submit">Submit</button>
</form>
</div> <!-- opened somewhere else -->
</div> <!-- opened somewhere else -->
<p>
<!-- Opens the modal -->
<button class="btn btn-light" data-target="#surveymodal" data-toggle="modal" type="button">Submit</button>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</p>
</body>
</html>
Your submit button's type seems to be incorrect:
<p><button class="btn btn-light" data-target="#surveymodal" data-toggle="modal" type="submit">Submit</button><script src="assets/js/jquery.min.js"></script><script src="assets/js/popper.js"></script><script src="bootstrap/js/bootstrap.min.js"></script></p>
Fix above.
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>
Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!
I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>
What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>
I have been trying to position a button to right right of another button. above is an example showing you what I mean.
I built it using Bootstrap. They have a navbar feature which will do the layout for me. Great feature, but I do not know why it keeps making a new row. I have tried right: 0 and positioning but none of that would work. It will stay in that same spot every time. I currently do not know what is causing this error. Thank you for your time!
My HTML looks like this:
<div id="navbar" class="navbar" style="position: relative; width: 93%;left: 3%;">
<div class="navbar-inner">
<div class="brand" style="padding-left: 0%;">
<a href="www.investorsfortunes.com">
<!-- <img class="img-polaroid" src="Images/logo.jpg"> -->
Investorsfortunes.com
</a>
</div>
<ul class="nav" style="text-align: center">
<li class="divider-vertical">Investors</li>
<li class="divider-vertical">Deals</li>
<li class="divider-vertical">Attornies</li>
<li class="divider-vertical">Appraisers</li>
</ul>
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn floatRight">Sign in</button>
</form>
<!-- SIGN-UP AREA -->
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary floatRight" data-
toggle="modal">Sign-Up</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">x</button>
<h3 id="myModalLabel">Sign-Up</h3>
</div>
<div class="modal-body">
<form class="well span8">
<div class="row">
<div class="span3">
<label>First Name</label>
<input type="text" class="span3" placeholder="Your First Name">
<label>Last Name</label>
<input type="text" class="span3" placeholder="Your Last Name">
<label>Email Address:</label>
<input type="text" class="span3" placeholder="Your email address">
<label>Password</label>
<input type="password" id="inputPassword" placeholder="Password">
<label>Retype Password</label>
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"">Close</button>
<button class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
Form is a block element is HTML.
either set the Sign Up inside the form or set the style of the form to be inline-block
<form class="form-inline" style="display:inline-block;">
You are using twitter bootstrap, so maybe you can use
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
Just put your code inside the form. Like that...
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn floatRight">Sign in</button>
<!-- SIGN-UP AREA -->
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary floatRight" data-
toggle="modal">Sign-Up</a>
</form>