I have a list of product on mypage each product is having a enquiry button on it.
By clicking enquiry button bootstrap pop up opens.
I want that form to work for every product with product id of each product
I have achieved this by putting bootstrap pop up model in loop
my Question is. Instead of repeation blok of bootstrap pop up model , instead of keeping popup html in loop,is it possible to achieve this with function and keeping popup html outside loop ?
<?php if(isset($ser_gal)){
$gal_count =1;
foreach($ser_gal as $s){?>
<div class="element">
<div class="tz-inner" >
<div class="tz-image-item"> <img alt="" src="<?php echo URL;?>gallery/thumbs/thumb_<?php echo $s->IMAGE_PATH ; ?>"> </div>
<h6><?php echo $s->interior_cat;?></h6>
<hr />
<div class="cl"></div>
<?php echo $s->title;?>
<div align="center" >Enquiry</div>
</div>
</div>
<!--form-->
<div class="bs-example">
<div id="myModal<?php echo $gal_count;?>" 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">Enquiry</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="recipient-name" class="control-label">Name</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Email Id</label>
<input type="text" class="form-control texttrans_none" id="recipient-name">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Mobile No</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Product</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!---->
<?php $gal_count++;} }?>
Related
i have a cms where on click open modal and inside i have few fields and then i have another button inside of modal where i can add dynamically ckeditors fields by clicking on button, here is what i was trying to do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-12">
<button style="margin-bottom:5px;" type="button" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i> Adauga</button>
</div>
<div id="add_data_Modal" class="modal fade" 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>
<h4 class="modal-title">Adauga categorie</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="container">
<form action="add.php" method="POST">
<div class="form-group">
<label for="input-1">Nume Categorie</label>
<input type="text" class="form-control" name="nume" id="nume" placeholder="Nume categorie">
</div>
<div class="form-group">
<label for="input-1">Categorie</label>
<select class="form-control" id="categorie" name="categorie">
<option value="0">Categorie principala</option>
</select>
</div>
<div class="form-group">
<label for="input-1">Vizibil</label>
<select class="form-control" id="activ" name="activ">
<option selected>Selecteaza vizibilitatea</option>
<option value="1">Da</option>
<option value="0">Nu</option>
</select>
</div>
<div class="form-group">
<label for="input-1">Pozitia</label>
<input type="text" class="form-control" name="pozitie" id="pozitie" placeholder="Pozitie">
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="icheck-material-primary">
<input type="checkbox" id="user-checkbox1" checked="">
<label for="user-checkbox1">Modele Produse</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="icheck-material-primary">
<input type="checkbox" id="user-checkbox2" checked="">
<label for="user-checkbox2">Paletar Materiale</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="icheck-material-primary">
<input type="checkbox" id="user-checkbox3" checked="">
<label for="user-checkbox3">Estimare Pret</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rowa">
<div class="add-plus">Adauga tab-uri</div>
<div class="col-md-12">
<span id="add_aut" class="btn btn-primary">+</span>
<div id="auth-rows"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Inchide</button>
<button type="submit" name="submit" class="btn btn-primary"><i class="fa fa-check-square-o"></i> Salveaza</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(e){
// variable
var html3 = '<div class="row" id="parent-autor"> <p id="auth-del"><i class="fa fa-minus-square" aria-hidden="true"></i></p> <div class="row"> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="titlu_tab" name="titlu_tab[]"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="Pozitie" name="pozitie_tab[]"> </div> </div> </div> <div class="col-md-12"> <div class="form-group"> <textarea name="editor[]" class="ckeditor" id="continut" rows="8" cols="80"></textarea> </div> </div></div>';
$("#add_aut").click(function(e){
$('#auth-rows').append(html3);
});
$('#auth-rows').on('click', '#auth-del', function(E){
$(this).parent('div').remove();
});
});
</script>
In this modal when i click on add i want to add more fields, is done this but not appear ckeditor just a plain textarea which i don`t need that.
Thank you!
You are probably going to want to give the textarea a custom id if you plan to have multiple of them.
let currentId = 0;
I moved the 'var html' code inside the create function so that we can edit the id every time the add button is clicked because we need a unique id each time. After the textarea exists, I call .ckeditor() on that textarea which should enable the ckeditor tools for that field. Then I increment the customId to make sure that the next form that is added has a different id.
$("#add_aut").click(function(e){
var html3 = '<div class="row" id="parent-autor"> <p id="auth-del"><i class="fa fa-minus-square" aria-hidden="true"></i></p> <div class="row"> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="titlu_tab" name="titlu_tab[]"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="Pozitie" name="pozitie_tab[]"> </div> </div> </div> <div class="col-md-12"> <div class="form-group"> <textarea name="editor[]" class="ckeditor" id="continut' + currentId + '" rows="8" cols="80"></textarea> </div> </div></div>';
$('#auth-rows').append(html3);
$('#continut' + currentId).ckeditor();
currentId += 1;
});
You may not want the customId in the id of the textarea depending on what you are trying to accomplish, but this should get you going in the correct direction.
Also, you need to add the ckeditor.js as well as a jquery adapter script for this to work.
See this fiddle https://jsfiddle.net/bkqxnu8f/3/
I am building this website for a takeaway restaurant and the client requested 2 models one for career (receiving the resumes ) and the other for subscription to email updates.
How can I let the Form of the MODEL send the data to a Php page for GET_POST ?
The reason I am asking this is I need to record all the Model data to a database of the server not only send an email with the data.
First Model #join us
<div class="modal" id="JoinModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe for our updates</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="addmail.php" method="post">
<div class="form-group">
<label for="username">Name</label>
<input type="text" id="fname" placeholder="Name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" value="Submit">Join</button>
</div>
</div>
</div>
</div>
The other model for receiving the resumes
<!-- Career MODAL -->
<div class="modal" id="CareerModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Join our Team</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username">Name</label>
<input type="text" placeholder="Name" class="form-control">
</div>
<div class="form-group">
<label for="familyname">Family Name</label>
<input type="text" placeholder="Family Name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<label for="cv">Attach your CV</label>
<input type='file' name='cv' id='cv' class='form-control' ><br>
<input type='button' class='btn btn-info' value='Upload' id='upload'>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" value="Submit">Apply</button>
</div>
</div>
</div>
</div>
</div>
you can use ajax that will help you to perform parallel operation
e.g : inserting to database and sending mail
hope, it works for you
I have a modal (Bootstrap) for creating a new product. When I click the "close" button, which creates a new product, the old data still does not clear from the modal.
My code:
<div class="modal fade" id="product" role="dialog" aria-hidden="true" data-target="#myModal" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create new product</h4>
</div>
<div class="modal-body">
<form role="form" action="{{ route('admin.product.addProduct')}}" method="post" id="frmProduct">
{{ csrf_field() }}
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Product Name</label>
<input type="text" class="form-control" id="" name="product_name">
</div>
<div class="form-group">
<label for="">Product Type</label>
<input type="text" class="form-control" id="" name="product_type_id">
</div>
<div class="form-group">
<label for="">Price</label>
<input type="text" class="form-control" id="" name="price">
</div>
<div class="form-group">
<label for="">Status</label>
<select class="form-control input-sm m-bot15" id="" name="status">
<option value="0">Inactive</option>
<option value="1">Active</option>
</select>
</div>
<div class="form-group">
<label for="img">Image</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Choose <input type="file" id="imgInp">
</span>
</span>
<input type="text" class="form-control" name="product_image" readonly>
</div>
<img id='img-upload' class="image_responsive" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Description</label>
<textarea class="form-control" id="" name="description"></textarea>
</div>
<div class="form-group">
<label for="">Note</label>
<textarea class="form-control" id="" name="addition_information"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Save" class="btn btn-success">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
How can I clear the data when closing the modal?
You can add event listener to your close button by adding an id to your close button for example id=close-btn:
document.getElementById("close-btn").addEventListener("click", function(){
document.getElementById("frmProduct").reset();
});
You can use hidden.bs.modal event:
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
The snippet:
$('#product').on('hidden.bs.modal', function(e) {
$(this).find('form').trigger('reset');
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#product">
Launch modal
</button>
<div class="modal fade" id="product" role="dialog" aria-hidden="true" data-target="#myModal" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create new product</h4>
</div>
<div class="modal-body">
<form role="form" action="{{ route('admin.product.addProduct')}}" method="post" id="frmProduct">
{{ csrf_field() }}
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Product Name</label>
<input type="text" class="form-control" id="" name="product_name">
</div>
<div class="form-group">
<label for="">Product Type</label>
<input type="text" class="form-control" id="" name="product_type_id">
</div>
<div class="form-group">
<label for="">Price</label>
<input type="text" class="form-control" id="" name="price">
</div>
<div class="form-group">
<label for="">Status</label>
<select class="form-control input-sm m-bot15" id="" name="status">
<option value="0">Inactive</option>
<option value="1">Active</option>
</select>
</div>
<div class="form-group">
<label for="img">Image</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Choose <input type="file" id="imgInp">
</span>
</span>
<input type="text" class="form-control" name="product_image" readonly>
</div>
<img id='img-upload' class="image_responsive" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Description</label>
<textarea class="form-control" id="" name="description"></textarea>
</div>
<div class="form-group">
<label for="">Note</label>
<textarea class="form-control" id="" name="addition_information"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Save" class="btn btn-success">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
I'm using an "a" to call a modal:
ausencias.php
echo ' <i class="fa fa-pencil"></i>';
edit.php:
<html>
<?php
If(isset($_GET['aus'])) {
//BASE DE DADOS
include("connection.php");
$aprovar=$_GET['aus'];
$resultado=mysqli_query($db, "SELECT *
FROM contas as a, ausencia as h
WHERE a.id = h.id
AND h.idausensia='$aprovar'");
while($row = mysqli_fetch_array($resultado)){
$noome=$row['nome'];
$pic=$row['pic'];
$datasaida=$row['datasaida'];
$datavolta=$row['datavolta'];
$motivo=$row['tipos'];
$ficheiro=$row['justfile'];
}
?>
<div id="custom-content" class="modal-block modal-block-md">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Visualização de Pedido de Ausência - <?php echo($noome)?> </h2>
</header>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<br>
<center><img class="img-responsive" src="<?php echo($pic) ?>" /></center>
<br>
</div>
<div class="col-md-22">
</div>
</div>
<div class="row">
<div class="col-md-40">
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 control-label" for="inputReadOnly">Nome</label>
<div class="col-md-6">
<input type="text" value="<?php echo($noome) ?>" id="inputReadOnly" class="form-control" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="inputReadOnly">Comprovativo</label>
<div class="col-md-6">
<a class="mb-xs mt-xs mr-xs btn btn-primary" href='download.php?down=<?php echo($ficheiro)?>'><i class="fa fa-cloud"></i> Baixar</a>
</div>
<br><br>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="inputReadOnly">Motivo</label>
<div class="col-md-6">
<input type="text" value="<?php echo($motivo) ?>" id="inputReadOnly" class="form-control" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="inputReadOnly">Inicio Ausência</label>
<div class="col-md-6">
<input type="text" value="<?php echo($datasaida) ?>" id="inputReadOnly" class="form-control" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="inputReadOnly">Fim Ausência</label>
<div class="col-md-6">
<input type="text" value="<?php echo($datavolta) ?>" id="inputReadOnly" class="form-control" readonly="readonly">
</div>
</div>
<br>
<br>
<footer class="panel-footer">
<div class="row">
<div class="col-sm-9 col-sm-offset-3">
<form action="" method="post">
<input type="submit" value="Test" name="confirmar">
<button class="btn btn-default modal-dismiss">Sair</button>
<button name="recusar" type="button" class="mb-xs mt-xs mr-xs btn btn-danger">Recusar</button>
</form>
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
<?php
if(isset($_POST['confirmar'])){
mysqli_query($db, "UPDATE ausencia SET estados='Rascunho' WHERE idausensia='$aprovar'");
mysqli_close($db);
header("Location: ausencias.php");
}
?>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
</div>
</div>
</footer>
</section>
</div>
<?php }?>
<html>
But for some reason, the Isset is not working for the button, but when i remove the If, the SQL statement works. When i click the button it just close the modal and don't trigger what is inside the If.
Can anyone help me?
the if that dont work is that:
if(isset($_POST['confirmar'])){
<!-- 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 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>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
you are adding direct php file in href of anchor it will redirect you on target page use Simply Modal window of Bootstrap.
I want to submit data in database using bootstrap modal popup but when i press submit buttons nothing happens and i think that page which is used to submit a record is also not called. Below is the code of modal popup: i have called addProducts.php page but it is not called on click of a submit buttom please help to solve it. Thanks..
<div class="modal fade" id="myModal">
<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">Add Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/add-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" placeholder="Enter product Name">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<?
require_once('user.inc.php');
$Users = new Users();
$name=$_REQUEST['prodName'];
$price=$_REQUEST['prodPrice'];
$type=$_REQUEST['productType'];
$description=$_REQUEST['productDesc'];
$query="INSERT INTO tbl_product(`product_name`,`product_desc`,`product_price`,`product_type`)
VALUES('".$name."','".$description."','".$price."','".$type."')";
if(!executeQuery($query))
{
echo '<script language="javascript">';
echo 'alert("An error occured. Please try again")';
echo '</script>';
else
{
echo '<script language="javascript">';
echo 'alert("Record Successfully Inserted")';
echo '</script>';
}
?>