I would like to ask for some assistance when it comes to inserting details into mysql database if data are inside a modal. I have been trying to complete this sample project of mine hoping that I can use it as a portfolio in the future. Here's the modal code.
main.php
<div class="modal fade" id="registrationModalold" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<!--<form action="functions/actions.php" method="POST">-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enrollment Details</h4>
</div>
<div class="modal-body">
<form method="post" action="functions/actions.php">
<h4 class="modal-title">Personal Information</h4>
<div class="row">
<div class="col-lg-6 col-xs-6">
<label for="usr">Name:</label>
<select class="form-control" name="courses">
<?php
include 'ini/db.php'; //connect to database
$sql = "SELECT distinct student_name FROM tbl_students";
$res = mysqli_query($conn,$sql);
echo "<option>---SELECT STUDENT---</option>";
while ($row = mysqli_fetch_array($res)){
echo "<option value=Course".$row['student_name'].">" . $row['student_name'] . "</option>";
}
?>
</select>
</div><!-- ./col -->
<div class="col-lg-6 col-xs-6">
<label for="usr">Addres:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
</div>
<div class="row">
<div class="col-lg-3 col-xs-6">
<label for="usr">Contact:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<label for="usr">BirthDate:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<label for="usr">Birth Place:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<label for="usr">Gender:</label>
<select class="form-control">
<option id="male">Male</option>
<option id="female">Female</option>
</select>
</div><!-- ./col -->
</div>
</br></br>
<h4 class="modal-title">Other Information</h4>
<div class="row">
<div class="col-lg-6 col-xs-6">
<label for="usr">Course:</label>
<select class="form-control" name="courses">
<?php
include 'ini/db.php'; //connect to database
$sql = "SELECT crs_id,crs_name FROM tbl_courses";
$res = mysqli_query($conn,$sql);
echo "<option>---SELECT COURSE---</option>";
while ($row = mysqli_fetch_array($res)){
echo "<option value=Course".$row['crs_id'].">" . $row['crs_name'] . "</option>";
}
?>
</select>
</div><!-- ./col -->
<div class="col-lg-6 col-xs-6">
<label for="usr">Major: <font color="red" size="2"><i>optional</i></font></label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
</div>
<div class="row">
<div class="col-lg-3 col-xs-6">
<label for="usr">Mother's Name:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<label for="usr">Mother's Occupation:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<label for="usr">Father's Name:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<label for="usr">Father's Occupation:</label>
<input type="text" class="form-control" id="fullname">
</div><!-- ./col -->
</div>
</div>
<div class="modal-footer">
<button name="btnregister" action="functions/actions.php" type="button" class="btn btn-default">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
As you can see there's a button there a button which points to my actions.php which is inside another folder which is functions folder. But when I click that nothing happens.
Here's the action.php:
if (isset($_POST['btnregisters'])) {
echo "ASASASASASASASASASASAS";
die("asdsadsada");
}
As you can see there's a button there a button which points to my actions.php which is inside another folder which is functions folder. But when I click that nothing happens
<button name="btnregister" action="functions/actions.php" type="button" class="btn btn-default">Save</button>
You said type="button". The entire point of that is to make the button do nothing (so you can bind JavaScript event handlers to it).
Take that out and let it be the default (type="submit") which would submit the form.
Please see that the submit button is set as button type = "button"
<button name="btnregister" action="functions/actions.php" type="button" class="btn btn-default">Save</button>
Change it to:
<button name="btnregister" action="functions/actions.php" type="submit" class="btn btn-default">Save</button>
You have already defined action attribute in form tag. action attributes are not for buttons so do not write it there.
To submit a form you need a submit button so, change type of your save button from "button" to "submit"
it should be like
<button name="btnregister" type="submit" class="btn btn-default">Save</button>
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'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 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++;} }?>
Here is my code,it is working fine on chrome but not on mozila.I tried but i don't understand why is it not working.Thanks in advance for your help.
<div class="page-content">
<div class="page-header">
<h1>Add new report</h1>
</div><!-- /.page-header -->
<?php
if ( isset($msg) && $msg != null ){
if ( isset( $msg_type ) && $msg_type != null ){
$alert_type = 'alert-'.$msg_type;
}else{
$alert_type = 'alert-info';
}
?>
<div class="alert <?php echo $alert_type;?>">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<?php echo $msg;?>
</div>
<?php
}
?>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
<!-- PAGE CONTENT BEGINS -->
<div class="table-responsive">
<form name="prof" action="<?php echo base_url();?>addrep" method="post" class="form-horizontal" role="form" enctype="multipart/form-data">
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-3 control-label">Select network:</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<select name="nid" class="form-control input_sm" id="nid">
<option value="">Select network</option>
<?php foreach( $networks as $network ): ?>
<option value="<?php echo $network->net_id;?>"><?php echo $network->net_name;?></option>
<?php error_log($network->net_id);?>
<?php endforeach; ?>
</select>
<button class="btn btn-primary btn-xs new_bm" data-toggle="modal" data-target=".add_net" id="">Add Network</button>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-3 control-label">Select network element:</label>
<div class="col-xs-5 col-sm-5 col-md-5">
<select name="ne" class="form-control input_sm" id="ne">
<option value="">Select network element</option>
<?php foreach( $ners as $ne ): ?>
<option value="<?php echo $ne->ne_name;?>"><?php echo $ne->ne_name;?></option>
<?php error_log($ne->ne_name);?>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-3 control-label">Select report type:</label>
<div class="col-xs-5 col-sm-5 col-md-5">
<select name="rt" class="form-control input_sm" id="rt">
<option value="">Select report type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-3 control-label">Enter report name:</label>
<div class="col-xs-5 col-md-5 col-sm-5">
<input type="text" name="rep_name" id="rep_name" placeholder="Enter report name" />
</div>
</div>
<div class="col-sm-offset-4 col-md-offset-4 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="submit-buttons" id="submit-buttons" value="add">Add</button>
<button type="submit" class="btn btn-primary" name="submit-buttons" id="submit-buttons" value="cancel">Cancel</button>
</div>
</form>
</div>
<div class="modal fade add_net" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="modalLabel">Add Network</h4>
</div>
<div class="modal-body">
<form role="form" class="form-inline" action="addnet" method="post">
<div class="form-group">
<h4>Network name</h4>
<input type="text" value="" name="net" id="net" class="form-control" placeholder="New name" />
</div>
<div>
<input type="submit" value="Add" class="btn btn-primary btn-xs" />
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</div>
<script>
$( "#ne" ).change(function(){
var options = [];
options.push( '<option value="', '', '">', 'Select report type', '</option>' );
$( "#rt > option" ).remove();
$.ajax({
type : 'POST',
url : 'grtbne',
data: 'ne='+$(this).val(),
dataType: 'json',
success : function(result){
$.each ( result, function (key , value){
options.push( '<option value="', value.report_type, '">', value.report_type, '</option>' );
});
$( "#rt" ).html( options.join( '' ) );
},
});
});
</script>
here,ajax is used for dynamically loading the selected item.
$.each is the problem not working on firefox. Please try to change that to a for loop may be or any other alternative should work.
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>';
}
?>