I've got a button:
<a data-target='#login' role='button' class='btn' data-toggle='modal'>Login</a>
That was working earlier, but now it won't open my modal.
Here is my modal:
<!-- Login Modal -->
<div id="login" class="modal hide fade" tabindex="-1" aria-labelledby="loginform" aria-hidden="true">
<!-- Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Welcome!</h3>
</div><!--/header -->
<!-- Body -->
<div class="modal-body">
<form action="loginmanager.php" class="form-signin" method="post">
<input name="username" type="text" class="input-block-level" placeholder="Username">
<input name="password" type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me">"Remember me"</label>
</label>
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
</form>
</div><!--/.modal-body -->
<!-- Footer -->
<div class="modal-footer">
Close
</div><!--/.modal-footer -->
What in the world did I do wrong? I looked at it multiple times and can't find why
Probably you're missing the inclusion of "bootstrap.js" (or, in the specific, the "bootstrap-modal.js")
Try to make your 'package' here (with the Modals) and to include the javascript in your page: http://twitter.github.io/bootstrap/customize.html
Found the answer. I corrupted my .js and .css files when I used find and replace.
Whoops!
just remove the "hide" class from this line
<div id="login" class="modal hide fade" tabindex="-1" aria-labelledby="loginform" aria-hidden="true">
Related
enter image description here
The image is showing the data in the table.
What I want is when I click the view button, it will pop up the modal to display the row of data.
I want get the row of data and display in the pop up modal.
After I added this script, the modal will pop up and close directly.
The modal cannot show, the modal just display one second and close directly
script code
$(document).ready(function() {
$('.resetbtn').on('click', function() {
$('#resetmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#pass_id').val(data[0]);
});
});
button code
<button type="button" style="border:none; background-color: transparent;" data-toggle="modal" data-target="#resetmodal" class="resetbtn">view<i class="glyphicon glyphicon-asterisk" style="font-size:15px; color:blue;"></i></button> |
modal code
<div class="modal fade" id="resetmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<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>
<h3 class="modal-title" id="exampleModalLabel"><b>RESET PASSWORD</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="modal-body">
<div class="form-group">
<input name="pass_id" id="pass_id" type="text" class="form-control" value="<?php echo $db_pass_id; ?>"></input>
</div>
<div class="form-group">
<label><b>Password : </b></label> <span class="validation">*</span>
<input name="p_password3" id="p_password3" type="password" class="form-control input-box" onkeypress="return AvoidSpace(event)" onblur="this.value=removeSpaces(this.value);" minlength="6" required></input>
<input type="checkbox" onclick="myFunction3()"> Show Password</input>
</div>
<div class="form-group">
<label><b>Confirm Password : </b></label> <span class="validation">*</span>
<input name="p_password4" id="p_password4" type="password" class="form-control input-box" onkeypress="return AvoidSpace(event)" onblur="this.value=removeSpaces(this.value);" minlength="6" required></input>
<input type="checkbox" onclick="myFunction4()"> Show Password</input>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="reset" class="btn btn-primary">RESET</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
data-target="#resetmodal" does the show/hide for you!. But inside your script you have
$('#resetmodal').modal('show');
In other words, you are showing modal with that script and hiding with data-target="#resetmodal"
sorry if the answer is really simple but I wanted to send data from a form on a modal to a raw text file using PHP but I can't seem to get it to work. It just redirects me to a PHP file and doesn't generate the text file.
HTML form:
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="action.php" method="POST">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"#>Input your details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" required value="Enter Username" name="username" id="usr">
</div>
<div class="form-group">
<label for="psw">Password:</label>
<input type="password" class="form-control" id="psw" required value="Password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
</div>
</div>
<!-- Password validation -->
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
PHP:
<?php
$path = 'data.txt';
if (isset($_POST['username']) && isset($_POST['password'])) {
$fh = fopen($path,"a+");
$string = $_POST['username'].' - '.$_POST['password'];
fwrite($fh,$string); // Write information to the file
fclose($fh); // Close the file
exit;
}
?>
I appreciate any help, thank you!
I have two kinds of users in database (teacher / student)
How can i show some functions of my website ( button / review section )for teacher only and vice versa ?
i want to know the concept and any thing to help me
i got an error telling me that Undefined variable user while i am using the same query in another page
<div class="container">
<!-- Trigger the modal with a button -->
<button <?php if($user[0]['type']=="student")?> type="button" id="mah"
class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"
>Add Course</button>
<!-- Modal -->
<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">Add Course</h4>
</div>
<div class="modal-body">
<form action="/action_page.php">
Name:<br>
<input type="text" name="firstname" value="">
<br>
Course Name<br>
<input type="text" name="Add_course" value="">
<br>
Course Link<br>
<input type="text" name="Course_link" value="...">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i would suggest have a different section for teacher and the other for student . Using logic based on the names "teacher/student" the have different teacher adds marks , register student. while student view his enrollment .
Since the code is incomplete do a var_dump() on your array $user your can see if the value exist
I am trying to save data inserted from a modal. I have tried the script in localhost its works perfect. After upload to Production, The "note" field not save into DB table. But my hidden type='hidden' name='leaveID' manage to save in DB table. Not sure why? Please help...
Below is my view file..
<button type="button" class="btn-cs btn-sm-cs" data-toggle="modal" data-target="#myModal" data-html="true" href="#" id="modal"><span class="fa fa-pencil"></span> Note</button>
<!-- Modal -->
<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>
<form action="<?php echo base_url('leave/note'); ?>" id="formid" method="POST" >
<textarea class="form-control" id="note" name="note" ><?=set_value('note')?></textarea>
<input type='hidden' name='leaveID' value="<?= set_value("leaveID", $leave->leaveID) ?>" />
</div>
<div class="modal-footer">
<button type="submit" name="submit" class="btn btn-info " >Add Note</button></div>
</div>
</form>
<script>
$("[data-toggle=modal]").popover({
html: true,
content: function() {
return $('#modal-header').html();
}
});
</script>
</div>
</div><?php } ?>
Manage to solve the issue. Just has some permission issue.
I want to display a number in a bootstrap modal after i use post method to submit a form .
But the bootstrap modal cannot show out the number ($_POST[number]).
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">submit</button>
<?php
$number = $_POST['number'];
?>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
number
</h4>
</div>
<div class="modal-body">
<?php
echo $number;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
How can i do it?
A few observations and flaws with your approach:
Fix HTML Errors (e.g. you are not properly closing your form, add: </form>
PHP is a server-side scripting language.
Bootstrap cannot function without Jquery which is a client-side scripting language.
You cannot trigger a Bootstrap modal on a form submission button, unless its Ajax driven!
Show the Modal after the form has been submitted (Page load) see jsfiddle example
Complete code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">submit</button>
</form>
<?php if (isset($_POST["number"])) : ?>
<!-- Show the Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
number
</h4>
</div>
<div class="modal-body">
<?php
echo htmlspecialchars($_POST["number"]);
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php else : ?>
<!-- Do other stuff here -->
<?php endif; ?>
You need to add one more button ( input submit button ). that button will send the post request to self and update the variable $number.
First of all, you didn't close your form tag and you are trying to use submit button as a button for your modal...I don't know if that is gonna work.
Close your form tag and add input field of submit type...and then add a button for modal..that will work.
Here is the working code:
<html>
<head>
<link rel="stylesheet" href="../includes/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../includes/css/bootstrap.min.css">
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<input type="submit" value="submit">
</form>
<?php
$number = $_POST['number'];
?>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
number
</h4>
</div>
<div class="modal-body">
<?php
echo $number;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../includes/js/bootstrap.min.js"></script>
</body>
</html>
Change <script> and <link> tag source according to your needs.
u can remove class model and fade from 'myModel' class div or can write style for display:block. I tried your code and checked in my browser and removed above classes. I hope you get the problem. You can also view your number with viewing page source.
I also noticed something about this Modal Problem, remove type="button" from your <button> and the code runs.
Would have posted this as comment but I don't have enough rep yet.
This is because the PHP code gets executed server side and is executed before the HTML is loaded, so the $number is an empty string.