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.
Related
This is my code, I was supposed to get the inputted value in db and php tag isnt working.. It is not also redirecting to "myorders.php"; My form inside is not working.. Thank you.. Really need some help :(((
<div class="container">
<form method="post">
<h2>Enter your Pin Number</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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">Enter your Pin Number</h4>
</div>
<div class="modal-body text-center">
<input type="password" id="first-name" required="required" class="form-control" name="pin">
</div>
<div class="modal-footer">
<button type="submit" name="submit3" class="btn btn-default" data-dismiss="modal"><i class="fa fa-key"></i> Confirm Pin</button>
</div>
</div>
</div>
</div>
<!-- START OF PHP -->
<?php include ('connectdb.php');
if(isset($_POST['submit3']))
{
$pin = $_POST["pin"];
$pww = "123";
if ($pin!=$pww) {
echo "WRONG PIN.. TRY AGAIN..";
}
else{
header('Location: myorders.php');
}
} // SUBMIT
?>
</form>
</div>
As per my comment, remove data-dismiss="modal" from your submit button. data-dismiss="modal" is used to close the modal dialog. You already have it here
<button type="button" class="close" data-dismiss="modal">×</button>
I have a popup model where user add the course name. I have added a form validation in my codeigniter controller and then if the validation is false, I am loading my view again with a form error showing above form input in the model, but due to page reload the model closes. What I want is if the form validation is false I want to reload the page with the modal open. I am not familiar with ajax. Any help will be really appreciated.
Codeigniter Controller
$this->form_validation->set_rules('course_name', 'Course Name', 'required|max_length[30]');
$this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>');
if ($this->form_validation->run() ) {
echo "inserted";
}else {
$this->load->view('admin/coursename');
}
Codeigniter View (Modal Code)
<center><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Add Course</button><center>
<!-- Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" 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="" method="post">
<div class="form-group">
<label for="name">Course Name:</label>
<?php echo form_error('course_name'); ?>
<input type="text" class="form-control" id="name" name="course_name" placeholder="Enter course name...">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-warning">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can use jquery ".ajax()" method to call the validation controller without refreshing, then the controller echoes its result which your j-query code will now have to interprete. An example code below.
You can modify your view code like this:
<div class="modal fade" data-backdrop="static" data-keyboard="false" 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">
<div class="err">
</div>
<form action="" method="post" id ="yourform">
<div class="form-group">
<label for="name">Course Name:</label>
<?php echo form_error('course_name'); ?>
<input type="text" class="form-control" id="name" name="course_name" placeholder="Enter course name...">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-warning">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<script>
$("#yourform").submit(function (event) {
var form = $(this).closest('form');
field1 = $(form).find('.field1').val();
field2 = $(form).find('.field2').val();
$.ajax({
url: '<?php echo site_url('your/controller/url') ?>',
type: 'POST',
data: {field2: field2, field2: field2},
success: function (result) {
//alert(result);return false;
if (result == 1)
{
location.reload();
} else
{
$('#err').html(result);
}
}
});
event.preventDefault();
});
Then you can configure your controller like such :
<?php
$this->form_validation->set_rules('course_name', 'Course Name', 'required|max_length[30]');
$this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>');
if ($this->form_validation->run()) {
echo "1";
} else {
echo "<b>" . validation_errors() . "</b>";
}
?>
Hope i helped
you can use location.reload("Your Page Name") function in ajax success function.
I'm trying a modal to my php page so when the form is submitted a modal would be triggered, but it doesn't work
here's my code:
<?php
if(isset($_POST['add'])){
$genre=$_POST['genre'];
$desc_genre=mysqli_real_escape_string($cnxn,$_POST['desc_genre']);
$sql = "INSERT INTO genres (genre, desc_genre) VALUES ('".$genre."', '".$desc_genre."')";
if(mysqli_query($cnxn, $sql)){
echo "<script>
$('#myModal').modal('show');
</script>";
}
?>
<div id="myModal" class="modal hide fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-body">
<p>This Genre Has Been Added Successfully</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Continue Task</button>
</div>
</div>
<div class="login-page">
<?php }else{ ?>
<div class="form">
<form class="login-form" name="f1" method="post" action="" enctype="multipart/form-data">
<input required name="genre" type="text" placeholder="Add Genre"/>
<textarea required name="desc_genre" type="text" placeholder="Description of the Genre"></textarea>
<button type="submit" name="add">ADD</button>
</form>
</div>
ps: everything is running fine except for the modal showing
This will be running before jQuery has loaded. You need it to run after the library has loaded:
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
Why is this not working, because of a problem in Bootstrap or ajax?
This is my modal update:
<div class="container">
<!-- Modal update -->
<div class="modal fade" id="myModals<?php echo $row->id ;?>" 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">Edit Data</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="user">Username:</label>
<input type="user" class="form-control" id="users<?php echo $row->id ;?>" value="<?php echo $row->username ;?>">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="passwords<?php echo $row->id ;?>" value="<?php echo $row->password ;?>">
</div>
<button onclick='update("<?= $row->id ?>")' type="submit" class="btn btn-default">Update</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And this is my ajax:
function update(id){
var users = $("#users"+id).val();
var passwords = $("#passwords"+id).val();
$.ajax({
dataType:'html',
url:"update.php",
type:"POST",
data:"users="+users+"&passwords="+passwords+"&id="+id,
}).done(function(data){
load();
$('back-drop').remove();
});
}
Why is this not working when I submit the change, the modal form is not closed completely like this:
Please recheck your selector in the hide() syntax. You've forgotten the # in front.
Change this:
$('myModals'+id).modal('hide');
To this:
$('#myModals'+id).modal('hide');
For checking such issues, you should use Google Chrome and press CTRL + Shift + J. The possible syntax errors will be shown in the console.
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.