Basically what I have is user list table with 1 side Email and other side actions.
One of the actions is Delete, which is this code:
Button:
<button type="button" class='btn btn-danger btn-xs' data-toggle="modal" data-target="#modal_DELETE" data-whatever="<?php echo $sub["adminEmail"]; ?>"> <span class="fa fa-times"> </span> </button><a> </a>
Modal code:
<div class="modal fade" id="modal_DELETE" tabindex="-1" role="dialog" aria-labelledby="modal_nameDELETE">
<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="modal_nameDELETE">Delete confirmation</h4>
</div>
<form method="post">
<div class="modal-body">
Are you sure you want to remove user:</label>
<input type="text" class="form-control" id="recipient-name" disabled>
<input type="hidden" class="form-control" id="idx" name="email_to_remove">
<br>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary" name="delete">Yes</button>
</div>
</form>
</div>
</div>
</div>
JavaScript:
<script>
$(function(){
$('#modal_DELETE').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-body input').val(recipient);
});
});
</script>
But now I have problem with edit because I want to do some PHP code.
Basically it would say users permission but you could edit it.
Like this:
<?php
$permissions = $conn->prepare("SELECT * FROM sub_permission WHERE id_bota=:id");
$permissions->bindParam(":id",$ID);
$permissions->execute();
$pInfo = $permissions->fetch(PDO::FETCH_ASSOC);
?>
<label><h4>Changing connection info</h4>
<select input style="width:200px; overflow:hide;" type="text" name="config_connectionInfo" class="form-control">
<?php if($pInfo["config_connectionInfo"] == 1){ ?>
<option value="1">Yes</option>
<option value="0">No</option>
<?php }else{ ?>
<option value="0">No</option>
<option value="1">Yes</option>
<?php } ?>
</select>
</label>
I have this in a form but I just dont know how could I pass the email to the MySQL select query. Then in the modal it would display all permissions and if the permission is assigned it would say
Yes
No
or if its not assigned
No
Yes
You have to put an ajax request in your code to interact with php.
$(function(){
$('#modal_DELETE').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-body input').val(recipient);
$.ajax({
url: 'phpScript.php',
method: 'post',
data: {
//Your data
}
}).done(function(response){
//PHP end execution
});
});
});
http://api.jquery.com/jquery.ajax/
Related
My code is getting the data from PHP, then generating modals according to the number of items I have in the db. I have tried several solution of SO, how to get button ids according to the button clicked but don't find any solution.
When I click the any button generated, it sends only the first item of the modal form instead of the item clicked. I think the problem is the buttons not having unique id's. How to ensure that they have unique id's. Below is the code:
<div id="feedback">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#feedback-modal-<?php echo $item['payment_id']; ?>">Add Payment</button>
</div>
<div id="feedback-modal-<?php echo $item['payment_id']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Add Payment</h3>
</div>
<div class="modal-body">
<form class="feedback" name="feedback" method="POST">
<strong>Full Name</strong>
<br>
<input type="text" name="fullName" id="fullName" class="input-xlarge" value="<?php echo $item['full_name'] ?? 'Unknown';?>">
<br><br>
<strong>Subtotal</strong>
<br>
<input type="text" name="subtotal" id="subtotal" class="input-xlarge" value="<?php echo $item['subtotal'] ?? '0';?>">
<br><br>
<strong>Payment Method</strong>
<br>
<select name="paymentMethod" id="paymentMethod">
<option value="Cash1">Cash1</option>
<option value="Cash2">Cash2</option>
<option value="Cash3">Cash3</option>
</select>
<br><br>
<strong>Received by</strong>
<br>
<input type="text" name="receivedBy" id="receivedBy" class="input-xlarge" value="<?php echo $item['received_by'] ?? 'Unknown';?>">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="payment-btn" name="payment-btn">Send</button>
Close
</div>
</div>
</div>
</div>
The problem is that the button for sending the data have the same id, and ajax only accepts one id as shown below:
$(document).ready(function () {
$("button#payment-btn").click(function () {
$.ajax({
type: "POST",
url: "admin-server.php",
// url: "../Database/Payment.php",
data: 'contactFrmSubmit=1&fullName=' + $('#fullName').val() + '&subtotal=' + $('#subtotal').val() + '&paymentMethod=' + $('#paymentMethod').val() + '&receivedBy=' + $('#receivedBy').val(),
success: function (message) {
$("#feedback").html(message)
$("#feedback-modal").modal('hide');
},
error: function () {
alert("Error");
}
});
});
});
How can I have different id's?
My modal window is not getting opened. It seems there is an issue with my php.action action - or within ajax call.
Please can someone have a look?
My javascript - alert shows the record id.
$(document).ready(function(){
// Fetch single data
$(document).on("click","#editId",function(e){
e.preventDefault();
//alert("you click edit button");
var action ='FetchSingle';
var editId = $(this).attr('data-editId');
alert("you click edit button:" + editId);
$('#edit').modal('show'); //This works but not wihtin success:function(data)
$.ajax({
url:"action.php",
method:"POST",
data:{action:action,editId:editId},
dataType:"json",
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(err.Message);
},
success:function(data){
$('#name').val(data.name);
$("#designation").val(data.designation);
$("#sex").val(data.sex);
$('#edit').modal('show');
}
});
});
});});
Here is my action.php
if (isset($_POST['action'])) {
if ($_POST['action'] =='FetchSingle') {
$editId = $_POST['editId'];
$output = '';
$sql = "SELECT * FROM tbl_employee_info WHERE id='".$editId."'";
$data = $DBObj->select($sql);
foreach ($data as $value) {
$output['image'] = $value['image'];
$output['name'] = $value['name'];
$output['designation'] = $value['designation'];
$output['sex'] = $value['sex'];
$output['uploaded_hidden_image'] = '<img width="70px" height="70px" src="upload/'.$value['image'].'">';
}
echo json_encode($output);
} //end of isset post action
} //end of if isset post
my Modal window
<!-- Modal -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Edit Details</h4>
</div>
<div class="modal-body">
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="Designation" class="control-label">Designation</label>
<input type="text" class="form-control" name="designation" id="designation">
</div>
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="sex" class="control-label">Select a sex</label>
<input type="text" class="form-control" name="sex" id="sex">
<select class="select-simple form-control pmd-select2" name="sex" id="sex">
<option></option>
<option value="1">Male</option>
<option value="2">Fmale</option>
<option value="3">Others</option>
</select>
<!-- end of display data here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.Modal -->
Any suggestions or a way to debug the issue would be highly appreciated. The problems seems to be in my action.php script.
$('#form1').on('click',function(e){
e.preventDefault();
$('#emailModal').modal("show"); // open the modal
});
$(document).on('click','#sendEmail',function(){
$('#UpdateEmailModal').modal("show"); // open the modal
}
});
$(document).on('click','#UpdateSendEmail',function(){
$('#form1method').submit();
});
$(document).on('click','#Update_Close',function(){
$('#form2method').submit();
});
$(document).on('click','#Close',function(){
window.location = "<?php echo base_url(); ?>controller/page_method";
});
<!--Form 1-->
<form action="<?php echo base_url(); ?>mycontroller/method1" method="post" id="form1method">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" id="form1">Submit</button>
</form>
<!--Form 2 -->
<form action="<?php echo base_url(); ?>mycontroller/method2" method="post" id="form2method">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" id="form2">Submit</form>
</form>
<!--Modal 1 -->
<!--Email Modal -->
<div id="emailModal" 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">Send Email to User</h4>
</div>
<div class="modal-body">
<label class="col-md-3">To Email</label>
<div class="form-group col-md-9">
<input type="email" class="form-control" name="email_id" id="email_id" placeholder="Email ID">
</div>
<label class="col-md-3">Message</label>
<div class="form-group col-md-9">
<textarea name="message" id="message" class="form-control" placeholder="Message"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block" id="sendEmail"><strong>Update</strong></button>
<button class="btn btn-danger pull-right btn-block" data-dismiss="modal" id="Close"><strong>Close</strong></button>
</div>
</div>
</div>
</div>
<!--Modal 2 -->
<!--Email Status and Update Modal -->
<div id="UpdateEmailModal" 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">Update Form</h4>
</div>
<div class="modal-body">
<p>Click Submit to Update and Send Email (or) Click Cancel to Update</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block" id="UpdateSendEmail"><strong>Submit</strong></button>
<button class="btn btn-danger pull-right btn-block" data-dismiss="modal" id="Update_Close"><strong>cancel</strong></button>
</div>
</div>
</div>
</div>
enter code here
<?php
*//My Controller*
public function method1(){
$result = $this->model->update_model();
if($result == true){
$this->session->set_flashdata("msg","post_page");
redirect("post_page");
}}
public function method2(){
$result = $this->model->update_model2();
if($result == true){
$this->session->set_flashdata("msg","post_page");
redirect("post_page");
}}
*`//My Model`*
public function update_model(){
$data = array(
'name' => $this->input->post("name"),
'email' => $this->input->post("email")
);
$this->db->update('user',$data);
}
public function update_model2(){
$data = array(
'name' => $this->input->post("name"),
'email' => $this->input->post("email"),
'status' => "1"
);
$this->db->update('user',$data);
}
?>
When clicking edit form, edit page will open, in that i have two forms (Form1 and Form2). Only one form should appear in a page. When i click submit of Form1 a Modal1 will open and clicking Update button the Modal2 will open. Based on the two buttons(Submit and Cancel) in Modal2 a response should happen. Like if i click "Submit" method2 in Controller should execute or else if i click method1 should execute. How do do it in Controller?. I don;t know if i doing it correctly. If you guys have any idea to solve this, please help me out.
Thanks in Advance
You can make each of your submit button with a different name. So when you press the submit button, like in the form1, form1submit_btn, the page reload and simply check the post input :
You button
<button type="submit" name="form1submit_btn" class="btn btn-info btn-block" id="sendEmail"><strong>Update</strong></button>
Both of your form action have the same action action="<?base_url("myController/method")?>, and you treat them directly in the controller :
function method(){
//form 1 has been submit
if($this->input->post("form1submit_btn")){
$result = $this->model->update_model();
if($result == true)
$this->session->set_flashdata("msg","post_page");
}
//form 2 has been submit
if($this->input->post("form2submit_btn")){
$result = $this->model->update_model2();
if($result == true)
$this->session->set_flashdata("msg","post_page");
}
redirect("post_page");
}
i'm having this problem with my codes. what im supposed to achieve is to enable a disabled button with a certain condition. my code is working when the condition is invalid, but if its correct it will not work right away. i have to re click it to be enabled. $sentEmailClients (will be a mysql data if i got it working).
Here's my code
<?php
$sentEmailClients = 'test#test.com';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = $_POST["validEmail"];
if ($email === $sentEmailClients) {
echo '
<script>
function enableButton2() {
document.getElementById("addToClient").disabled = false;
}
< /script>
';
} else {
echo 'Please enter a valid email';
}
}
and here's the form BTW i've used Bootstrap for this
<form class="form-horizontal" method='post' data-toggle="validator">
<fieldset>
<div >
<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="myModalLabel">Validate My Email!</h4>
</div>
<div class="modal-body">
<label for="validEmail">Email:</label>
<input type="text" class="form-control input-sm " id="validEmail" name = "validEmail" required>
</div>
<div class="modal-footer">
<button class="btn btn-warning btn-lg " id="submit" type="submit text-center" onclick="enableButton2()" >Validate!</button>
<button class="btn btn-success btn-lg " id="addToClient" type="submit text-center" onclick="addClientInformation();" disabled >Submit Information</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
The function is rendered only when the condition is true, on 1st click you will make its disabled = false and it will get enabled.Instead of triggering the function 'onclick' make it document.ready.
$(document).ready(function(){
$(#id).show()
}
I have this code for show confirm delete message before send form data:
JS:
$('input[name="S1"]').on('click', function (e) {
var $form = $(this).closest('form');
var checked = $("input:checked").length;
var action = $('select[name="todo"]');
if (action.val() === "delete" && checked) {
e.preventDefault();
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
}
});
HTML Code:
<div class="panel-body">
<form method="POST" role="form" action="#">
<div class="row margin-bt-15">
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="todo" class="contentgroup">
<option value="">choose</option>
<option value="delete">delete</option>
<option value="mark">mark</option>
<option value="unmark">unmark</option>
</select>
<input type="hidden" name="csrf_token" value="MTQzNjU3MDc3NjZPNXFKUmZWVlJWcE9ZNnd4VUZFbmRiSzMzSTZwMzRD">
<input type="submit" value="ok" class="btn btn-primary btn-sm" name="S1" />
</div>
</div>
</div>
<input type="checkbox" name="selected[]" class="check" value="4" />
</form>
</div>
<div id="confirm" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<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">delete</h4>
</div>
<div class="modal-body text-center">
<i class="fa fa-exclamation-triangle text-danger fa-lg flashitmap"></i>
<label>message</label>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm" id="delete"><i class="fa fa-trash"></i>delete</button>
<button type="button" data-dismiss="modal" class="btn btn-sm">back</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Now in PHP file i check $_POST using isset like this :
if ($_POST['todo'] && isset($_POST['S1']) && $_SERVER['REQUEST_METHOD'] == 'POST'){
echo 'true';
} else {
echo 'false';
always in result I see: false and my php code not detect isset($_POST['S1']) for my input name. how do can fix this ?
NOTE: when i remove bootstrap delete confirm, my form worked true and detect input name isset($_POST['S1']). I think my problem with bootstrap confirm code.
DEMO: http://jsfiddle.net/530j1hmp/2/
Apart form the things mentionned in the comments, there are several other to consider revision in your code.
$_POST['todo'] can be an empty string if the user has not selected an item, because there is value="". In PHP and other languages an empty string evaluates to false. Do you want it like this ?
if you have data in the $_POST array, then there it's a good bet your $_SERVER['REQUEST_METHOD'] equals 'POST'
To the main point: isset($_POST['S1']) will always be false. The element with name S1 is an input with type submit, and as such, it will be submitted ONLY if it is the submitter, ie only if it has been clicked. But with e.preventDefault(), you prevent that action, and the form is submitted through $form.trigger('submit');.
If you really need it, a solution could be to use a hidden field (type="hidden").
For more about which elements get submitted or not, you have the main rule on w3's site. Two other well known elements aren't submitted : radio button and checkbox if they have checkedness == false.