I know this question has many solutions in SO.But still I cant spot my mistake.The following is my bootstrap modal form
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/lib/bootstrap/css/bootstrap.min.css">
<script src="../asset/modal/js/jquery.min.js"></script>
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<? if(isset($_POST["sendmail"]))
echo "Form 1 have been submitted";
?>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<? echo $token; ?>
<!-- Modal content-->
<form class="form-horizontal" role="form" method="post" name="sendmail" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<textarea rows="8" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" >Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
But whenever i submit the form it redirects to the index page of my project.Please Help me spotting my error.:-(
Yes its because you are not directing it anywhere...You need to write something like this:-
<form class="form-horizontal" role="form" method="post" name="sendmail" action="page_name_here.php" >
So you need to add action="page_name_here.php">
If you want to stay on the same page then just write action="#">
Update:-
<button type="submit" class="btn btn-default" name="send">Send</button>
Add a name to the button send then in the Php:-
<? if(isset($_POST["send"]))
echo "Form 1 have been submitted";
?>
This way when you click the send button everything in the form is submitted, since its a button of type=submit
Use this for the submit button. Your button has not been named as sendmail for the POST so the info will not pass.
<? if(isset($_SERVER['REQUEST_METHOD'] == 'POST' ))
echo "Form 1 have been submitted";
?>
Add empty action as shown for the same page
<form class="form-horizontal" role="form" method="post" name="sendmail" action="">
Related
I have a sample code below which consists of a simple bootstrap modal for delete confirmation message. The code is working perfectly,while i give input type= button , but once i give type=submit it does not submit form and dialog modal dont open. Here is my code.
<?php
if(isset($_POST['submit'])){
echo $_POST['first_name'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javasript">
$('.submit').click(function(e){
e.preventDefault();
});
</script>
<title>JS Bin</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="first_name" id="first_name">
<!--<button type="button" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>-->
<button type="submit" name="submit" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Confirm</h2>
</div>
<div class="modal-body">
<p>Are you sure you want to submit?</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Yes, Submit</button>
<button type="submit" name="" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Please help me..
In the modal footer [SOLVED]
<div class="modal-footer">
<button type="submit" class="btn btn-success">Yes, Submit</button>
<button type="submit" name="submit" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
As your first button on the form,
<button type="submit" name="submit" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>
opens the modal but doesn't submit the form as you have used e.preventDefault(); on that button click,
After modal opens once you click on 'Yes, Submit' it will submit the form again but this time isset($_POST['submit']) will be blank as the 'Yes, Submit' button doesn't have name.
Just add name to that button and it will work.
Final code will look like as above [SOLVED]
<script type="text/javascript">
$(document).on('submit', 'form', function(e){
e.preventDefault();
});
</script>
You (first) have a typo in the script tag (should be javascript).
Then you have to listen to the submit of the form to prevent it. You listen to a click of an element with the class submit which doesn't exist.
I have a form that have a select input, and there's another pop up that sets a session. i want to save the selected values while the page reloading for the session setting is there's any solution for that ?
example of my code
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="">
<select name="first">
<option value="example1">first opt</option>
<option value="example2">second opt</option>
</select>
<input type="submit" value="Done">
</form>
<p>you have added > <?php echo $_SESSION['sessionset']; ?></p>
<button data-toggle="modal" data-target="#myModal">Adding something by setting a session</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form method="post" action="">
<select name="sessionset">
<option value="cupcake">cupcake</option>
<option value="cookie">cookie</option>
</select>
<input type="submit" value="Done">
</form>
</div>
</div>
php
if(isset($_POST['sessionset'])) {
$_SESSION['sessionset'] = $_POST['sessionset'];
}
this is a little example of my page, now i need to set the session and i don't want the user to reset his select because of the reload
I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.
My output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
</form>
</body>
<script>
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
</script>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
Edit: Here is a screenshot: Modal Screenshot
Edit: I edited the code and I am no longer redirected to a new page when clicking the 'Search" button, but my output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?
I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.
My code isn't displaying anything in the modal window. When I click the 'Search' button, the modal window opens but immediately afterwards a new page is loaded with the query results.
How do change it so that the query results display in the modal window rather than a new page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
</form>
</body>
<script>
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
</script>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
You can try this possible solution by following this changes
- Remove Form tag
- Add Onclick Listner on Search Button
- First put content in Modal and then show Modal
index.php
$(document).ready(function () {
$('.search').click(function () {
var q= $('#q').val();
// AJAX request
$.ajax({
url: 'search.php',
type: 'post',
data: {
q: q
},
success: function (response) {
// Add response in Modal body
$('.modal-body').html(response);
$('#mymodal').modal('show');
}
});
});
});
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<!-- Script -->
<script src='jquery-3.1.1.min.js' type='text/javascript'></script>
<script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
</head>
<body>
<input type="text" id="q" name="q" placeholder="Enter query"/>
<input type="button" class="search" name="search" value="Search">
</body>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have a html form with one text field and one bootstrap module popup and two types of submit.
I'am able to collect the value from the html field using $_POST but I'am not getting the value from the popup window.
HTML :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<form id="contactform" method="post" action="http://****/post.php">
<tr>
<td>
<label for="name">Name :</label>
</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>
<button type="submit"> Submit</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Update</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label for="plan">Plan :</label>
<input type="radio" name="plan" value="Yes" > Yes</input>
<input type="radio" name="plan" value="No"> No</input>
</div>
<div class="modal-footer">
<button type="submit" formaction="update.php" class="btn btn-default" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</form>
</body>
</html>
Here for two submits am using two php files: post.php and update.php
Where one submit is outside (post.php) the popup and other inside (update.php) the popup.
In post.php I am only collecting text field using
$name = $_POST['name'];
Which is working, but not in update.php code:
<?php
$conn = mysqli_connect("localhost", "username", "password", "database");
if($conn === false){
die("ERROR: Could not connect. " . mysqli_connect_error($conn));
}
$name = $_POST['name'];
$plan = $_POST['plan'];
$sql = "INSERT INTO table (name, plan) VALUES ('$name', '$plan')";
if(mysqli_query($conn, $sql)){
echo "Records added successfully.";
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($conn);
}
?>
Here in db I'am only able to collect name.
Please help to collect the values form both html field (name) and popup window field (plan).
Thanks in advance.
For your button in popup remove data-dismiss like this:
<button type="submit" formaction="update.php" class="btn btn-default">Submit</button>
Then in your post.php process just $name and in update.php $plan and $post.