im new to php and still learning. i tried to customized bootstrap template and tried to connect a form to a database.
insert.php
$con=mysqli_connect("localhost","root","","finalproject");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO stokbarang (Merek, Tipe, Harga)
VALUES
('$_POST[merek]','$_POST[tipe]','$_POST[harga]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
header("Location: stock.php");
and a page where the form is stock.php, the form is below :
<form name="sentMessage" class="well" id="contactForm" novalidate action = "insert.php" method = "post">
<legend>Masukkan Data</legend>
<div class="control-group">
<div class="controls">
<label>Merek Mobil</label>
<input type="text" class="form-control" placeholder="Merek mobil" id="merek" required
data-validation-required-message="Masukkan Merek mobil" name = "merek"/>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Tipe Mobil</label>
<input type="text" class="form-control" placeholder="Tipe Mobil" id="email" required
data-validation-required-message="Masukkan tipe mobil" name = "tipe"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Harga</label>
<input type="number" class="form-control" placeholder="Harga"
id="email" required
data-validation-required-message="Masukkan harga mobil" name = "harga"/>
</div>
<br>
<div id="success"> </span></div> <!-- For success/fail messages -->
<br>
<button type="submit" class="btn btn-primary pull-right">Insert</button><br/><br>
</form>
the form is work and i can insert the data by clicking Insert button to database.
Now i want to add a modal as alert after the form is submitted to database in stock.php
i modified the Insert button as following
<button type="submit" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">Insert</button><br/><br>
here is the modal :
<!-- 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">SUCCESS</h4>
</div>
<div class="modal-body">
<p>Data Inserted!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
but it seems like the button only trigger the modal to appear without submit the form to database. Any suggestion to make the modal appear after successful inserting data to database (after redirecting to stock.php)? or maybe there is better way to make alert after redirect? thank you for your time and help :)
change the header location on insert.php as below :
header("Location: stock.php?sucsess=true");
then stock.php on the head :
<script type="text/javascript">
<?php
if ($_GET['sucsess'] =='true'){
echo '$(function() {
$( "#myModal" ).dialog();
});'
}
?>
</script>
here is a demo only for the alert demo
Related
On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.
$(document).on("click",".Change_Nodes",function(){
cmd_name = $(this).attr("id");
if(confirm("Sure to Update \""+cmd_name+"\" Command Executable Nodes?"))
{
$('#custom_script_modal').modal('show');
}
else
{ return false; }
}
); //update: removed extra curly brace
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>
</div>
<div class="modal-body">
<form method="POST" id="custom_script_modal">
<label class="control-label col-sm-4" for="cmd">List of Nodes</label>
<div class="col-sm-8 tab-pan fade in active">
<select size="3" name="popup_hostlist[]" id="popup_hostlist" class="dis_tab" multiple>
<?php
//-----------Database echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";
?>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info form-control">Update</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.
Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.
Check out the following JSFiddle and let me know if helps with your case:
(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)
I want to load content to a result div that is located inside a modal-body after form is submitted and after modal is shown but i can't figure out the problem. when i want to load content to a result div outside modal it works, but when i use the result div inside a modal it doesn't.
this is my code so far:
html:
<div class="col-lg-12">
<div class="row">
<div id="form-content">
<form method="post" id="reg-form" autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div id="monetarylayout" class="form-group">
<input class="form-control number" type="text" value="0" name="subjectvalue" id="txt_subjectvalue">
</div>
<div class="form-group">
<button class="btn btn-primary">submit</button>
</div>
<input class="form-control number" type="text" value="0" name="coinquantity" id="txt_coinquantity" style="display:none"> <!--just to make the form post work-->
</form>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<div id="result"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
jquery:
<script type="text/javascript">
$(document).ready(function() {
// submit form using $.ajax() method
$('#reg-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'testcontroller.php',
type: 'POST',
data: $(this).serialize() // it will serialize the form data
})
.done(function(data){
$('#myModal').modal(), function() {
// do something when the modal is shown
$('#result').fadeIn('slow').html(data);
}
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
i figured out myself. i should have added these attributes to my form button:
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">submit</button>
and edited this function as follows:
.done(function (data) {
$('#result').fadeIn('slow').html(data);
})
I want to make a form appear on a popup window when I click "Add" button. So I am using a modal to show a PHP form but when I tried to save the data inserted into the form into database, it does not work. When I clicked save, a weird URL came out as so :
.../pembelitkatakutest.php?image=025pikachu_xy_anime_3.png&save=
I am not sure, but I think the URL should not have the "image=025pikachu_xy_anime_3.png&" part.
My code is as below:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Add Tongue Twister</button><br><br><br>
<!-- 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Add Tongue Twister</h4>
</div>
<div class="modal-body">
<form method = "POST">
<div class="form-group">
<label for="usr">Please Choose a Picture:</label>
<input type="file" name="image">
<script type="text/javascript">
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
</div>
<div class="form-group">
<label for="pwd">Please write the tongue twister:</label>
<input type="text" rows = "3" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save">Save changes</button>
<?php if(isset($_POST['save']))
{
//target folder to keep the media
$target = "images/".basename($_FILES['image']['name']);
//get all submitted data from form
$image = $_FILES['image']['name'];
$text = $_POST['text'];
if(!empty($_FILES['image']['name']))
{
$sql = "INSERT INTO pembelitkataku(image, text) VALUES ('$image','$text')";
mysqli_query($db, $sql);
}
else
{
$message = "Sila pilih semua fail";
echo "<script type='text/javascript'>alert('$message');</script>";
}
move_uploaded_file($_FILES['image']['tmp_name'], $target);
}
?>
</div>
</form>
</div>
May I know what went wrong in my code and what can I do to fix it ?
If it is possible, I want to avoid using Javascript as it is very confusing to understand.
Thank you.
Use <form method="POST" enctype="multipart/form-data">
Because by default your code is making GET request but your PHP code want to receive a POST request. You can see it in this line of code :
if(isset($_POST['save']))
I have a button that opens modal box. However i saved id value to that button in data-id and i want to use that value to generate content in modal box from DB.
<?php while($car = mysqli_fetch_assoc($sqlquery)) : ?>
<div class="col-md-4 text-center">
<h4><?=$car['model'];?></h4>
<img src=<?php echo $car['image'] ?>/>
<br/>
<a id="firstButton" type="button" class="show-modal btn btn-default" data-id="<?=$car['id']?>">DETAILS</a>
</div>
<?php endwhile ?>
This is how i generate the button... I need to get the data-id value somewhat to the modal box.
$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
var productID = $(this).attr('data-id');
//$.post('detailbox.php', {data: productID}, function(data){
// console.log(data);});
$("#itemBox").modal('show');
// kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa
$('.product_id').val(productID);
});
// Pridani do kosiku v modalu
$('.add-to-basket').click(function(){
var productID = $('.product_id').val();;
// skryty input do ktere si zapsal ID produktu po otevreni modalu
document.cookie= 'data='+productID;
$.ajax({
type: 'POST',
cache: false,
data: {id : productID},
url: 'cart/cartid.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
success: function(data) {
window.location.replace("/shop/cart/cart.php")
alert("Product was added to basket");
// treba nejaka hlaska, ze byl pridan do kosiku
}
});
});
});
This JS gets the data-id and i can get it within input box, i tried to move the while cycle a bit down so it doesnt cycle whole modal, only the things i need to generate, but i cannot get data from input box that i need.
?php while($details = mysqli_fetch_assoc($sqlquery)) : ?>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="itemBox" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body display-content">
<div class="container-fluid">
<div class="col-md-4"><img src=<?php echo $details['image'];?> class="image-responsive">
<div class="col-sm-6">
<form action="add_cart.php" method="post">
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="text" class="form-control" id="quantity" name="quantity">
</div>
</form>
</div>
<div class="col-sm-6">
<br/>
<!-- Getting product ID from JS, -->
<div class="product_id">
<input class="product_id" type="text" id="input_product_id" name="input_product_id" value=""/>
</div>
<button type="button" class="add-to-basket btn btn-success" >ADD TO CART</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-7" id="desc">
<p><b>Model:</b> <?php echo $details['model'];?></p>
<p><b>Engine:</b> <?php echo $details['engine'];?></p>
<h4>Description</h4>
<p><?php echo $details['description'];?></p>
<hr>
<hr>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
I want to display this modal popup after php condition check
<div id="myModal65" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
in this php code used for display the popup. But it cannot display.
<?php
if($intwschdle==1)
{
echo "<script type='text/javascript'>$('#myModal65').modal('show');</script>";
}
?>
I think it's much better if you show you modal by default and put it in the php condition like :
<?php
if($intwschdle==1){
?>
<!--full html for modal goes here showing by default - - >
<?php } ? >