I have the following code on 2 pages:
<input class="btn btn-primary" type="button" value="Sign Up" data-toggle="modal" data-target="#myModal"/>
<!-- my modal dialog-->
<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" id="myModalLabel">Create New User</h4>
</div>
<div class="modal-body">
<form id="myform" action="add_user.php" method="POST">
<div class="form-group">
<input class="form-control" type="text" id="username" name="username" placeholder="Username"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-input" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-confirm-input" placeholder="Confirm Password" onblur=";"/>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="User Type"/>
</div>
<div class="form-group" id="msg">
<input class="form-control" type="text" name=email placeholder="E-mail Address"/>
</div>
<div>
<label id="label" for="male"></label>
</div>
<br>
<div class="form-group pull-right">
<input class="btn btn-success" type="submit" id="create_user2" value="Create User"/>
</div>
</form>
</div>
</div>
</div>
</div>
This code works on the index.php page, a modal dialog pops up.
in another page, dashboard.php, it does not.
I have the exact same button and modal code in the body tags
Be sure you have bootstrap JS references in both pages:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
How can I delete the captcha option in form from formsubmit.co? It says I should add this in my code (line 1):
<input type="hidden" name="_captcha" value="false">
<!-- Modal for Contact - us Button -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Contáctanos</h4>
</div>
<div class="modal-body">
<form action="https://formsubmit.co/myemail" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Nombre" required>
</div>
<div class="form-group">
<label for="Phone">Celular</label>
<input type="tel" class="form-control" id="phone" placeholder="Celular" required>
</div>
<div class="form-group">
<label for="Email">Correo</label>
<input type="Email" class="form-control" id="Email-1" placeholder="Correo" required></textarea>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" style="margin:0;display:block;width:100%">Enviar</button>
</div>
</form>
Add that line of code within the <form> tags.
<!-- Modal for Contact - us Button -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Contáctanos</h4>
</div>
<div class="modal-body">
<form action="https://formsubmit.co/myemail" method="POST">
<input type="hidden" name="_captcha" value="false"> <!-- ADD THE LINE HERE -->
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Nombre" required>
</div>
<div class="form-group">
<label for="Phone">Celular</label>
<input type="tel" class="form-control" id="phone" placeholder="Celular" required>
</div>
<div class="form-group">
<label for="Email">Correo</label>
<input type="Email" class="form-control" id="Email-1" placeholder="Correo" required></textarea>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" style="margin:0;display:block;width:100%">Enviar</button>
</div>
</form>
I'm trying to send a message to an email like in this code, once you click on "Enviar", your message goes to your email with the name, email and message info. I'm using this provider but it's not working: https://formsubmit.co/ this is the code:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Contáctanos</h4>
</div>
<div class="modal-body">
<form>
<form action="https://formsubmit.co/myemaiL#gmail.com" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email-1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</div>
</div>
</div>
</div>
</div>```
Hopefully someone can help me out, thanks!
The problem with your code is that submit button is outside <form> open and close tag. However the <form tag immediately after the modal-body class is not necessary
Your code should be like this
<form action="https://formsubmit.co/laide_lawal#yahoo.com" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email-1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</form>
Good day pips. I am struggling on printing after I click create.
the ui for creating and printing
When I click the create button, it will add to the database and print a number or ticket. All I know is dompdf but that one is downloading pdf
<div class="modal fade" id="callModal" tabindex="-1" role="dialog" aria-labelledby="callModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="callModalLabel">New Call</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!--start of the form-->
<form id="form-data" class="form-horizontal" method="POST" action="{{ route('call.store') }}">
{{ csrf_field() }}
<div class="row form-group">
<div class="col-md-12">
<input type="hidden" class="form-control" id="trans-id" name="trans_id" readonly>
</div>
<div class="col-md-12">
<label>Transaction Type:</label>
<input type="text" class="form-control" id="trans-name" readonly>
</div>
<div class="col-md-12">
<input type="hidden" id="called" name="called" value="NO">
</div>
<div class="col-md-12">
<label>Department:</label>
<select class="form-control" id="dept_id" name="dept_id" required>
<option value="" data-hidden="true"
selected="selected">-- Select Department --
</option>
#foreach($departments as $department)
<option value= "{{ $department->id }}">
{{ $department->dept_name }}
</option>
#endforeach
</select>
</div>
<div class="col-md-12">
<label>RFID</label>
<input type="text" id="rfid" class="form-control" name="rfid" required>
</div>
<div class="col-md-12">
<label>Student First Name</label>
<input type="text" id="firstname" class="form-control" name="firstname" required="">
</div>
<div class="col-md-12">
<label>Student Last Name</label>
<input type="text" id="lastname" class="form-control" name="lastname" required>
</div>
<div class="col-md-12">
<label>Amount</label>
<input type="number" id="amount" class="form-control" name="amount" step=".01" required>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-fill pull-right" id="form-button-add" name="form-button-add" onclick="window.print()">
CREATE <!--CREATE, SAVE AND PRINT THE TICKET-->
</button>
<button data-dismiss="modal" aria-hidden="true" class="btn btn-basic pull-right" style="margin-right: 2%">
CANCEL
</button>
<div class="clearfix"></div>
</form>
<!-- end of the form -->
</div>
</div>
</div>
</div>
I already code the javascript onclick in my create button. My problem is it prints the current page of the ui. I just want to print the details such as C-1, counter 1. Another problem is that is show the preview but it doesn't add on the database.
It appears that I either have trouble spacing correctly or making things stack either horizontally or vertically.
Still new to Bootstrap but I'm pretty happy with what I got so far. Currently I have this for my login form:
I would like to make my contact form the same way, vertically stacked. But here is what I end up with:
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact me!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<form role="form" class="navbar-form" action="" method="post">
<span>Your Name</span>
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
<span>Your Email</span>
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
<span>Your Message</span>
<textarea id="contact-message" class="form-control" placeholder="Your message..." required></textarea>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use form-groups. Just make sure you wrap your input in <div class="form-group"></div>:
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Modal code
<!-- Signup Modal -->
<div class="modal fade" id="signUpForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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>
<h3 class="modal-title" id="myModalLabel">Please Sing Up</h3>
</div>
<div class="modal-body">
<?php echo form_open('Registration')?>
<div class="form-group">
<label for="login-email" class="control-label">Email:</label>
<input type="text" class="form-control" name="login-email" id="login-email">
</div>
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<input type="password" class="form-control" name="password" id="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Signup</button>
</div>
<?php echo form_close()?>
</div>
</div>
</div>
And I have controller named Registration. when I click on button to launch the modal nothing happens. Button code that launches the modal.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signUpForm">Signup
</button>
You should add jQuery bootstrap "REQUEST"
More info here http://getbootstrap.com/2.3.2/javascript.html#modals
Add reference to jquery and bootstrap.min.js files in header and also add links for bootstrap css files.