Why doesn't my submit button work?

Why doesn't my submit button work? - javascript

The form is available when the user clicks a modal. When I click the submit button in the modal, it button does not work.
foreach ($posts as $post) { echo '
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
</tr>
</tbody>
';
}
Here is the modal:
echo '
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">'; echo '
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype=\ "multipart/form-data\">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>' ;

You need to check if the submit button has been passed then run the code. This will ensure that you won't get an undefined index error.
if (isset($_POST['submit'])) {
// Your code here.
}
Also use form (<form></form>) tags to specify POST request in method="post".

Errors
Wrong placement of <form> open and close
Miss-Match Character in enctype=\ "multipart/form-data\", (\).
So Final Well-Form Code is
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
**
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">**
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
Note: You are not uploading any Files in your form. So No use of enctype

Don't use echo with single quote: that's what's making your headache. Create code like this:
<div id="<?php echo $id_user ?>" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/<?php echo $id_user ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
and this other code:
<?php
foreach ($posts as $post): ?>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
<?php endforeach; ?>
Also read What is the difference between single-quoted and double-quoted strings in PHP?

Related

Why bootstrap modal is not closing?

Does anyone know what's wrong with below code? The modal is opened when I click the button that has to trigger this action, but when I click on close buttons that has data-dismiss="modal", it happens nothing.
<div class="modal fade show" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-modal="true" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> Schedule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form action="/schedule" id="modal-form" method="post">
<div class="input-container mb-3">
<textarea class="textarea-input" style="resize:none; width: 100%;" rows="5" maxlength="280" name="Text" required=""></textarea>
<br>
<div id="success-message" class="success-message mt-3" style="display: none;">
<span>Successfully scheduled</span>
</div>
<div id="error-message" class="error-message mt-3" style="display: none;">
<span>There was an error during scheduling</span>
</div>
</div>
<button class="btn btn-success" type="submit">Schedule</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Get data to Bootstrap modal to update data

I want to edit/ update data that show in my page. The edit/ update data should done in modal. Below is code that I tried and it didn't work.
I tried lots of methods to done this. But not succeeded. IF anyone can help on this it would be very grateful. Thank you.
<?php
$query1=mysqli_query($dbconn, "SELECT * FROM food_menu WHERE status='1' AND category='Breakfast'" );
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="card-deck">
<div class="card border-dark">
<div class="card-body">
<h3 class="card-title"><b>Breakfast Menu</b></h3>
<?php
while ($row1=mysqli_fetch_array($query1)){
$id=$row1['id'];
$name=$row1['name'];
$details=$row1['details'];
$category=$row1['category'];
$price=$row1['price'];
$image=$row1['image'];
?>
<div class="row">
<div class="col">
<div class="zoom">
<img src="<?php echo $image; ?>" class="rounded float-left img-thumbnail" alt="Food Image">
</div>
</div>
<div class="col">
<div hidden><?php echo $id; ?></div>
<h5><?php echo $name; ?></h5>
<h7><?php echo $details; ?></h7><br>
<h7><b>Rs. <?php echo $price; ?></b></h7><br>
<div class="text-right"><button type="button" class="btn btn-primary btn-sm editbtn" name="edit" id="edit" data-id="<?php echo $id; ?>" data-toggle="modal"><span class="icon text-white-100">
<i class="fas fa-pencil-alt"></i>
</span>UPDATE</button>
</div>
</div>
</div>
<br>
<?php } ?>
<button type="button" class="btn btn-success" name="add" id="add">Add New</button>
</div>
</div>
</div>
</div>
<!-- End of Page Content -->
My Modal is below
<div class="modal fade" id="editmodal" name="editmodal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<input type="text" name="fid" name="fid" >
<input type="text" name="food_name" id="food_name">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
JavaScript Used.
<script>
$(document).ready(function(){
$('.editbtn').on('click', function(){
$('#editmodal').modal('show');
var ids = $(this).attr('data-id');
$(".modal-body #fid").val( ids );
$(".modal-body #food_name").val( ids );
});
});
</script>
When I click update button the modal is shown but data is not showing the modal.

How to uncheck all checkboxes when i close a modal?

I want to pop up a modal on clicking the checkbox. And wants to uncheck it when I close a modal automatically.
I tried both attr and prop methods. None of them worked.
//uncheck all when modal closes
$(document).on('click', '#closeInvoiceModal', function() {
$('.creditCheckbox').prop('checked', false);
});
This was expected to uncheck all the checkboxes having the same class '.creditCheckbox'. But none of them didn't close.
<td>
<input type="checkbox" id="invoiceDetail{{$loop->iteration}}"
name="invoiceDetail{{$loop->iteration}}"
class="filled-in chk-col-green invoiceCheckbox"
data-campaignId="{{$item['id']}}"/>
<label class="invoiceDetailLink" for="invoiceDetail{{$loop-
>iteration}}">Inv. Details</label>
</td>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</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="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect
pull-right" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Please use this code I hope it's work for you.
Thanks
$(document).ready(function(){
$("#myModal").on('hide.bs.modal', function(){
$('.creditCheckbox').prop('checked', false);
});
});

I have to make an example like your code, please review once, hope it will help you, it is working for me.
Thanks.
<div class="container">
<input type="checkbox" name="check" class="checkOption"> check 1
<input type="checkbox" name="check" class="checkOption"> check 2
<input type="checkbox" name="check" class="checkOption"> check 3
<input type="checkbox" name="check" class="checkOption"> check 4
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#cbreInvoiceDetailsModal">Open Modal</button>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</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="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#cbreInvoiceDetailsModal").on('hide.bs.modal', function(){
$('.checkOption').prop('checked', false);
});
});
</script>

Every time modal open same file

I have a problem. I want my data dynamically view in modal. When I click first modal button its open dynamically and show data then when I click second button its show same previews data which opens first time. After reload the page when I click second its open dynamically again when I click first button its show second modal data.
Its WordPress site.
<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal">Book IT</a>
<div class="modal booking-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<?php
foreach ($query as $row)
{
//var_dump($row);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-md-12">
<div class="booking-modal-form">
<form action="">
<div class="form-group">
<label>Check-in / Out</label>
<input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">
</div>
<div class="info-text">
<?php echo $row->description ?>
</div>
<div class="book-it-btn">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</form>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
Jquery Modal data destroy code:
jQuery('body').on('hidden.bs.modal', '.modal', function () {
jQuery(this).removeData('bs.modal');
});

because you are repeating part of the dialog only not all dialog
try this
<?php
foreach ($query as $row)
{
//var_dump($row);
?>
<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal<?=$row->id?>">Book IT</a>
<div class="modal booking-modal fade" id="myModal<?=$row->id?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-md-12">
<div class="booking-modal-form">
<form action="">
<div class="form-group">
<label>Check-in / Out</label>
<input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">
</div>
<div class="info-text">
<?php echo $row->description ?>
</div>
<div class="book-it-btn">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>

Get the value of Bootstrap.modal

I have this Bootstrap modal:
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Max #pics per cluster:</label>
<input type="text" class="form-control" id="message-text">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="paramsOkay" type="button" class="btn btn-primary">
Okay
</button>
</div>
</div>
</div>
</div>
and I am doing this:
$('#exampleModal').on('click','#paramsOkay', function (e) {
console.log($('#recipient-name').text());
console.log(e);
});
which will fire when the "Okay" button is clicked, but the first console.log() is empty, and there I would expect to get user's input! The second console will log the event, but I don't really now how to extract the user's input from that...
How to get the value the user inputed, after the "Okay" value is clicked?

You must use of val() no text().
Change:
console.log($('#recipient-name').text());
To:
console.log($('#recipient-name').val());
Final code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label>
<input type="text" class="form-control" id="recipient-name" value="Test">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Max #pics per cluster:</label>
<input type="text" class="form-control" id="message-text">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="paramsOkay" type="button" class="btn btn-primary">
Okay
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#exampleModal').on('click','#paramsOkay', function (e) {
console.log($('#recipient-name').val());
//console.log(e);
});
})
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Why doesn't my submit button work? - javascript

You need to check if the submit button has been passed then run the code. This will ensure that you won't get an undefined index error. if (isset($_POST['submit'])) { // Your code here. } Also use form (<form></form>) tags to specify POST request in method="post".

Related

Why bootstrap modal is not closing?

Get data to Bootstrap modal to update data

How to uncheck all checkboxes when i close a modal?

Every time modal open same file

Get the value of Bootstrap.modal

Categories

Resources