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.
Related
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 am trying to disable a button if input is not valid. I tried to use PHP but I think its not the right approach. Any suggestions guys? The code is here below:
<form action="" method="" enctype="multipart/form-data" data-toggle="validator">
<div class="modal fade" id="qtyModal" tabindex="-1" role="dialog" aria-labelledby="qtyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="qtyModal">Quantity</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="container-fluid">
<div class="form-group col-md-6">
<label for="quantity<?=$i;?>">Quantity:</label>
<input type="number" name="quanitity" id="quantity" value="<?= $quantity ;?>" min="0" class="form-control" data-minlength="1" pattern="([0-9]|[1-8][0-9]|9[0-9]|100)" data-error="Please enter a Positive Number between 0 - 100!!!">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<?php if(($quantity == '') || ($quantity >= 0 )) :?>
<button type="button" class="btn btn-primary" onclick="updateQtyFunction();jQuery('#qtyModal').modal('toggle');return false;">Save changes</button>
<?php endif;?>
</div>
</div>
</div>
</div>
</form>
This button (shown below) I am trying to disable (taken from the code above):
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<?php if(($quantity == '') || ($quantity >= 0 )) :?>
<button type="button" class="btn btn-primary" onclick="updateQtyFunction();jQuery('#qtyModal').modal('toggle');return false;">Save changes</button>
<?php endif;?>
</div>
Below also find the jQuery Function:
function updateQtyFunction(){
var qtyNumber='';
if(jQuery('#quantity')!=''){
qtyNumber = jQuery('#quantity').val();
}
jQuery('#qtyPreview').val(qtyNumber);
}
This is very easy to do with Javascript and you don't really need jQuery for it.
Just give the button you want to disable an id and in your function set the disabled attribute of the button to true.
<!DOCTYPE html>
<html lang="nl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="modal-footer">
<!-- Add an id to the button -->
<button type="button" id="button_1" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updateQtyFunction();">Save changes</button>
</div>
<script>
function updateQtyFunction()
{
var qtyNumber='';
if (jQuery('#quantity') != '')
{
qtyNumber = jQuery('#quantity').val();
$('#button_1').attr('disabled', 'true'); // Disable the button (jQuery)
document.getElementById('button_1').disabled = 'true'; // Disable with Javascript
}
jQuery('#qtyPreview').val(qtyNumber);
}
</script>
</body>
</html>
For PHP, something like this could work:
if(isset($_POST['button']))
echo '<button type="button" name="button" />';
If the form action is "post" and an input tag with name of "button" has a value. Then this button will show up and not if otherwise.
If you need to disable the button based on a condition that can change without reloading the page, and you are using bootstrap (which it seems you are) you can add the class .disabled to the button with jQuery. Then you can remove it to enable it when the condition is met.
On another side if the page requires to be reloaded for the button to be enabled, instead of adding / removing the class with jQuery, you can do it in PHP.
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="">
I have a simple php form and it's action link is another php file/page.
I am trying to show a popup before sending the PHP form to it's action page.
I tried onsubmit , onclick but nothing is working.
this is my form
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" >Pay Now</button>
</form>
this form send the amount value to the actions.php
but before sending this I want to show a poup that shows 'Edit' , 'Continue' with this message "Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
if user clicks 'Edit' form submission should be stopped and popup should be closed.
if user clicks 'Continue' form should submit the data to the action.php
I tried:
<button class="btn" type="submit" name="confirm" onclick="return foo();">Pay Now</button>
<script>
jQuery( document ).ready(function() {
function foo()
{
alert("Submit button clicked!");
return true;
}
});
</script>
this does not work..
I tried
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true" onsubmit="return foo()">
also not working..
Both just go to the actions.php
how can I show the popup and then send the form based on the selection?
Basically the best way I see to achieve this is to use the bootstrap modal, so what you need to do is to stop the form from submission when the button is clicked, then show the bootstrap modal using jquery , then you form will have two buttons one the edit which will then have the data-dismiss="modal" which will just close the modal and show back the form, then the continue button when clicked you will just force the form to submit using jquery as well with $('form').submit(); this tells the form to submit to the form action.
$('document').ready(function(){
$('#payBtn').on('click',function(e){
e.preventDefault();
$('#myModal').modal('toggle');
});
$('#continuebtn').on('click',function(){
$('form').submit();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" id="payBtn">Pay Now</button>
</form>
<!-- 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">Proccess Payment</h4>
</div>
<div class="modal-body">
"Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
<button class="btn btn-default" data-dismiss="modal">Edit</button>
<button class="btn btn-primary" id="continuebtn">Continue</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You could achieve your goal with using javascript alerts. Your php will not call the other php directly, but a javascript method, which then shows an alert with 2 buttons. Look into https://www.w3schools.com/js/js_popup.asp as it probably describes it better than me.
Best wishes,
Essi
Please check this its working now. You don't need document.ready just simply add to js file or in tag!
function foo()
{
if(confirm('You\'re about to make a online payment. Click "Cancel" to review the data before proceeding or click "Ok" to confirm the details for payment.'))
{
alert("confirm ok");
document.getElementById("form_id").submit();// Form submission
}
else {
return false;
}
}
<form method="post" id="form_id" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" onclick="foo();" >Pay Now</button>
</form>
I'm trying to get an input value passed via jquery and setting into a php variable, but I don't know how to do that.
This button have the value that I want to send:
<button type='button' data-a='".$fila['idPlaza']."' href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'><img src='../images/edit.png' width='20px' height='20px'></button>
Then I have this js code to send the value:
$(document).on("click", ".modalEditarUsuario", function (e) {
e.preventDefault();
var self = $(this);
$("#a").val(self.data('a'));
$(self.attr('href')).modal('show');
});
Finally I have this bootstrap modal
<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Editar usuario</h2>
</div>
<form name="formularioModificaUsuario" method='post' action="usuarios.php">
<div class="modal-body">
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = ???
?>
</div>
<div class="modal-footer">
<button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset"><img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
<button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit"><img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
</div>
</form>
</div>
</div>
</div>
</div>
My question is, how could I get the value of id='a' input into php variable $valueA to use after?
<button type='button' data-a="<?echo $fila['idPlaza'];?>" href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'>
<img src='../images/edit.png' width='20px' height='20px'>
</button>
Put below code in footer before end of </body> tag.
<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
</div>
</div>
</div>
</div>
Use Script like this.
<script>
$('.modalEditarUsuario').click(function(){
var ID=$(this).attr('data-a');
$.ajax({url:"NewPage.php?ID="+ID,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
Create NewPage.php, and paste the below code.
(Remember, this page name NewPage.php is used in script tag also. if you are planning to change the name of this page, change page name there in script tag too. Both are related.)
<?
$ID=$_GET['ID'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Editar usuario</h2>
</div>
<form name="formularioModificaUsuario" method='post' action="usuarios.php">
<div class="modal-body">
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = $ID;
?>
</div>
<div class="modal-footer">
<button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset">
<img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
<button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit">
<img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
</div>
</form>
Php loads before anything on your page, so you cannot set a php variable using jQuery or javascript, but the opposite can be done.
If you have the value of the text field initially when loading then you can set it via php on load, otherwise you will need to submit your form to use the value of the input in php.
The following code is valid, php setting javascript
<?php
$valueA = "I am value A";
?>
<script language="javascript">
var jsValueA = "<?php echo $valueA; ?>";
alert(jsValueA); // alerts I am value A
</script>
The following code is invalid, javascript setting php
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = $("#a").val();
?>
This is wrong because when PHP executed the input field would not have been created yet, besides jQuery cannot be executed within PHP scope. javascript and jQuery are used at browser level to manage user interaction and DOM objects and events while PHP is used at server level and not browser.
So if you want to set a php variable, you can only set it when the server script loads, i.e php gets executed, which comes before anything else in the page. Or you can grab a value from a posted form $_POST or URI query string $_GET