I am using CodeIgniter. I have a view button on the view page. If someone clicks on it then a custom popup will open and It will ask for feedback and approve. Also, I set input type hidden in this popup. After filling the form user will click on submit button.
But I am not getting the value in the controller but I am getting the hidden input value.
View
<?php echo form_open('Employee_control/admin_action_leave','id="admin_action_leave"'); ?>
View
<div class="view_popup_profile" id="popup-2" style="display: none;">
<div class="opacity"></div>
<div class="profile_content">
<div class="profile_header clearfix">
<div class="profile_header_right">
<input type="hidden" name="roster_id_send" id="roster_id_send" value="2">
<select name="admin_approved_status" id="admin_approved_status">
<option value="" disabled selected>Status</option>
<option value="1">Approved</option>
<option value="0">Pending</option>
<option value="-1">Reject</option>
</select>
<?php echo form_error('admin_approved_status'); ?>
</div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-6 text_area_box">
<div class="admin_feedback">
<h3>Feedback</h3>
<textarea class="form_control" name="admin_feedback" id="admin_feedback"></textarea>
<?php echo form_error('admin_feedback'); ?>
<button type="submit" class="btn">Submit</button>
</div>
</div>
</div>
</div>
<div class="profile_footer">
Close
</div>
</div>
</div>
<?php echo form_close(); ?>
Controller
public function admin_feedback_leave(){
echo $admin_approved_status=$this->input->post('admin_approved_status');
echo $admin_feedback=$this->input->post('admin_feedback');
echo $roster_id_send=$this->input->post('roster_id_send');
}
I tried using ajax instated of form
Same issue I am getting. It's display only hiddle value
$("#admin_action_leave").validate({
// Specify the validation rules
rules: {
admin_approved_status:{
required:true
},
admin_feedback:{
required:true,
minlength:15,
maxlength:250
}
},
submitHandler: function(form) {
//form.submit();
//var a= document.getElementById("admin_approved_status").value;
//alert(a);
var admin_approved_status = $('#admin_approved_status').val();
var admin_feedback = $('#admin_feedback').val();
var roster_id_send = $('#roster_id_send').val();
// alert(admin_feedback);
//alert(roster_id_send);
//alert(admin_approved_status);
$.ajax({
url: baseUrl + "/Employee_control/admin_feedback_leave",
method: "POST",
data: {
admin_approved_status: admin_approved_status,
admin_feedback:admin_feedback,
roster_id_send:roster_id_send
},
success: function(data)
{
alert(data);
}
}); //AJAX
}
});
After implementing the code. I am just sharing the small part of the code.
My issue is I am not able to send the data to the controller. I tried two-way one using ajax and second using form submit. I am sharing the form submit code.
When I am adding the below code then it's not sending the data to the controller. If I remove the if and foreach condition then I am getting the output.
<?php $n=1; if(isset($admin_data_leave)){foreach ($admin_data_leave as $row) {?>
<!--some html code here-->
<?php $n++;}}else{echo "No data found";}?>
Whole code
<?php echo form_open('Employee_control/admin_feedback_leave', 'id="admin_action_leave"'); ?>
<table cellspacing="0" class="applied_leave_list_table">
<tbody>
<?php
$n = 1;
if (isset($admin_data_leave)) {
foreach ($admin_data_leave as $row) {
?>
<tr>
<td><?php echo $n; ?></td>
<td> View </td>
</tr>
<div class="view_popup_profile" id="popup-<?= $row->roster_id; ?>" style="display: none;">
<div class="profile_content">
<div class="profile_header_right">
<input type="hidden" name="roster_id_send" id="roster_id_send" value="<?php echo $row->roster_id; ?>">
</div>
</div>
<h3>Admin Feedback</h3>
<textarea class="form_control" name="admin_feedback" id="admin_feedback"></textarea>
<?php echo form_error('admin_feedback'); ?>
<button type="submit" class="btn">Submit</button>
</div>
<?php
$n++;
}
} else {
echo "No data found";
}
?>
</tbody>
</table>
<?php echo form_close(); ?>
Jquery validation
$('#admin_action_leave').each( function(){
var form = $(this);
form.validate({
rules: {
admin_approved_status:{
required:true
},
admin_feedback:{
required:true,
minlength:15,
maxlength:250
}
}
});
});
When I am adding the below code then it's not sending the data to the
controller. If I remove the if and foreach condition then I am getting
the output.
...which means, the content of the variable $admin_data_leave is not fulfilling the condition, ie. Either it is not set(not defined) or its not a traversible object or its empty.
Try putting the following code before the condition and look at the output...
echo "<pre>";
var_dump($_POST);
echo "</pre>";
die();
Related
json data
Here see my result
I am creating an admin panel dashboard in PHP, I want to display dynamic data in my dashboard and data must be display based on dropdown list, I got data in ajax success but how to that data display in html
<div class="col-lg-3">
<form method="POST" class="appointment-form" id="appointment-form" enctype="multipart/form-data">
<select onchange='fetch_val(this.value)' name="meeting" id="meeting">
<option>--Select Meeting--</option>
<?php
$sql="SELECT * FROM meeting";
$res=$conn->query($sql);
while ($re=$res->fetch_object())
{
?>
<option value="<?php echo $re->meeting_no; ?>"><?php echo $re->meeting_no; ?></option>
<?php
}
?>
</select>
</form>
<div class="bage">
<h6 class="name">Register User</h6>
<div class="d-flex align-items-center justify-content-around">
<p class="m-0 name-valu">HERE I WANT TO DISPLAY THAT DATA</p>
</div>
</div>
</div>
HERE MY SCRIPT:
<script type="text/javascript">
function fetch_val(val){
$.ajax({
url:"load.php",
type:"POST",
data:{"meeting":val},
dataType:"JSON",
success:function(data){
$('#reference_given').val((data[0].reference_given));
$('#reference_taken').val((data[0].reference_taken));
}
});
}
</script>
use ajax response to display it using $.each() and pass a div with id or class. in success function use this
$.each(data, function(i, item) {
$text+= '<div>'+ data[i].reference_given +'</div><br>';
});
if(text != ""){
$("#display").append(text);
}
Hope this help
I am trying to build a system where the product-container will display a form or a button depending on if the product is currently in the cart or not. I have an Ajax post system that seems to work fine, but I shall include that too. I have a front Controller which sends the Cart Content and the Products.
The problem is that when I refresh the page my form is supposed to replace the buy button for the given product, but it does not work. Only the Ajax post to Cart system works.
My view (which includes some of the javascript/php):
<?php $countP = 0; ?>
#foreach($products as $product)
<input type="hidden" id="product_id<?php echo $countP; ?>" value="
{{$product->id}}">
<div class="item main-product-container">
<a href="#"<i class="fa fa-exclamation" aria-hidden="true"></i>
</a>
<div class="product-img text-center">
<img src="{{url('img', $product->image)}}">
</div>
<p class="price text-center">{{$product->price}},- kr</p>
<div class="product-title">{{$product->name}}</div>
<script>
<?php foreach($cartContents as $cartContent) { ?>
if(<?php echo $cartContent->id ?> = {{$product->id}})
{
$('.cartBtn{{$product->id}}').hide();
$('.productForm{{$product->id}}').show();
} else {
$('.cartBtn<?php echo $product->id;?>').show();
$('.productForm<?php echo $product->id;?>').hide();
}
<?php } ?>
</script>
<form class="productForm{{$product->id}} productForm"
id="productForm<?php echo $countP;?>">
<input class="qty-input" name="qty" id="qty" type="integer"
value="1">
<input type="hidden" id="id" name="id" value="{{$product->id}}">
<input type="submit" id="ajaxSubmit{{$product->id}}"
class="cart-button" value="Legg til">
</form>
<button class="btn btn-default add-to-cart cartBtn<?php echo
$product->id;?>" id="cartBtn<?php echo $countP;?>">Kjøp</button>
</div>
<?php $countP++?>
#endforeach
</div>
My Ajax:
<script>
$(document).ready(function() {
$('.productForm').hide();
<?php $maxP = count($products);
for($i=0;$i<$maxP; $i++){
?>
$('#cartBtn<?php echo $i;?>').click(function() {
var product_id<?php echo $i;?> = $('#product_id<?php echo $i;?
>').val();
$.ajax({
type: 'get',
url: '<?php echo url('/cart/post');?>/'+ product_id<?php echo $i;?>,
error: function(data) {
var errors = data.responseJSON;
console.log(errors);
},
success:function() {
$('#cartBtn<?php echo $i;?>').hide();
$('#productForm<?php echo $i;?>').show();
},
});
});
<?php } ?>
});
I have this script that allows me to send data to the database without reloading the page. The form data is sent to file process.php.
At the end of the process, inside the div box of the form is printed a notice that everything went ok
<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit', '.formValidation', function(){
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'submit.php',
data : data,
success : function(data){
$(".formValidation").fadeOut(500).hide(function(){
$(".result").fadeIn(500).show(function(){
$(".result").html(data);
});
});
}
});
return false;
});
});
</script>
Page success.php:
foreach( $_POST as $key => $value ) {
$sql = "INSERT INTO tbl_".$key."(nome_".$key.") VALUES ('$value')";
$result = dbQuery($sql);
}
print "ok";
And the div box for the notice <div class="result"></div>
The problem: I have many div box with a form and when I print the notice of success, it happen into all the <div>, because the call notification is always .result
success: function(data){
$(".formValidation").fadeOut(500).hide(function(){
$(".result").fadeIn(500).show(function(){
$(".result").html(data);
});
});
}
What I want: Print the success notice in its own div depending on the form that I sent.
Thanks
EDIT: The html interested
<form id="myform2" class="formValidation" name="myform2" action="" method="post"></form> <!-- this is the form for the <div> in html5 -->
<div class="widget-body">
<div class="widget-main">
<div>
<label for="form-field-select-1">Comune</label>
<select name="comune" class="form-control" id="form-field-select-1" form="myform2">
<option value="">Seleziona...</option>
<?php
$comune = "SELECT * FROM tbl_comune ORDER BY nome_comune ASC";
$result_comune = dbQuery($comune);
if (dbNumRows($result_comune) > 0) {
while($row_comune = dbFetchAssoc($result_comune)) {
extract($row_comune);
?>
<option value="<?php echo $id_comune; ?>"><?php echo $nome_comune; ?></option>
<?php
}
} else {
?>
<option value="">Non ci sono dati</option>
<?php
}
?>
</select>
</div>
<hr>
<div class="widget-body">
<div class="widget-main">
<div>
<input type="text" name="comune" id="comune" value="" placeholder="Aggiungi Comune" form="myform2">
<input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform2">
<div class="result"></div>
</div>
</div>
</div>
</div>
</div>
If the form is in a div and the result is next to the form, you can do sibling:
$form.next(".result").html(data);
or elsewhere in the same parent:
$form.parent().find(".result").html(data);
or in your case
$form.find(".result").html(data);
Like this - note I have removed all the unnecessary hiding.
$(function() {
$(document).on('submit', '.formValidation', function(e) {
e.preventDefault();
var data = $(this).serialize();
$form = $(this); // save a pointer to THIS form
$result = $form.find(".result");
$.ajax({
type: 'POST',
url: 'submit.php',
data: data,
success: function(data) {
$result.html(data);
$form.fadeOut(500, function() {
$result.fadeIn(500)
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myform2" class="formValidation" name="myform2" action="" method="post"></form>
<!-- this is the form for the <div> in html5 -->
<div class="widget-body">
<div class="widget-main">
<div>
<label for="form-field-select-1">Comune</label>
<select name="comune" class="form-control" id="form-field-select-1" form="myform2">
<option value="">Seleziona...</option>
</select>
</div>
<hr>
<div class="widget-body">
<div class="widget-main">
<div>
<input type="text" name="comune" id="comune" value="" placeholder="Aggiungi Comune" form="myform2">
<input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform2">
<div class="result"></div>
</div>
</div>
</div>
</div>
</div>
I have a form that includes a dropdown box. This dropdown's options are filled dynamically, using PHP, from my database. When my form is submitted, the row containing the ticketId selected in the dropdown is removed from the database. What I would like is for, after the AJAX call is successful, have this list repopulate without the row that was just removed.
my form:
<form name="transferTicketForm" id="transferTicketForm">
<div class='form-group'>
<label for="ticket_number">Choose ticket:</label>
<select name="ticket_number" id="ticket_number" class="form-control">
<?php foreach ($assigned_tickets as $ticket): ?>
<option value="<?php echo($ticket->ticketId); ?>"><?php echo ($ticket->ticketId . " - " . $ticket->headline); ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="assignTo">Transfer to:</label>
<select name="assignTo" id="assignedTo" class="form-control">
<?php foreach($employees as $employee): ?>
<option value='<?php echo($employee->userId); ?>'><?php echo ($employee->firstName . " " . $employee->lastName);?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="transferComment">Comment:</label>
<textarea name="transferComment" id="transferComment" class="form-control"></textarea>
</div>
<div class="text-center">
<input class="btn btn-primary" type="button" id="doTransferTicketButton" value="Transfer Ticket">
</div>
</form>
my Ajax call:
$('#doTransferTicketButton').click(function(){
$.ajax({
type:'POST',
url:'<?php echo site_url();?>ticket_system/transfer_and_comment_ticket',
data:{
'assigned': $('#assignedTo').val(),
'comment': $('#transferComment').val(),
'ticketId': $('#ticket_number').val()
},
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#assigned').empty();
$('#transferTicketOptions').slideToggle();
}
});
});
Things I have tried:
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#ticket_number').empty();
$('#transferTicketOptions').slideToggle();
}
and
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#ticket_number')[0].reset();
$('#transferTicketOptions').slideToggle();
}
Neither of which work for what I'm trying to do.
Any help would be greatly appreciated. Thank you!
First make your AJAX-file echo the ticket ID when removed. This ID will be passed to the success function. And on successs run:
success: function(data){
$("#ticket_number option[value=data]").remove();
}
The code is not testet, but i think it would work.
I have the following code with a form inside a list that should submit the element through Ajax. The values in the form is repeated through a do ... while loop, so that the list become a dynamically list, like in this picture:
But when I click a button, the only element that is sent through the Ajax code is the value of the last button, even though I click on Oranges for example.
The code is as follow:
<script>
function submitForm() {
$.ajax({type:'POST', url: 'jQuery-ajax-demo.php', data:$('#MyJobsForm').serialize(), success: function(response) {
$('#myJobs_Right').find('.form_result').html(response);
}});
return false;
}
</script>
</head>
<body>
<ul id="btn_MyJobs" data-role="listview" data-inset="true">
<li id="MyJobs_List" class="push">
<form id="MyJobsForm" onsubmit="return submitForm();">
<?php do { ?>
<input type="hidden" name="name" value="<?php echo $row_Recordset1['cargo']; ?>">
<input type="submit" name="submit" value="<?php echo $row_Recordset1['cargo']; ?>">
<br/>
<br/>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</form>
</li>
</ul>
<div id="myJobs_Right">
<div class="form_result"> </div>
</div>
</body>
The jQuery-ajax-demo.php page looks like this:
<?php
if(isset($_POST['name'])) {
$name = $_POST['name'];
?>
Your Name Is: <?php echo $name; ?><br />
<?php
die();
}
?>
If you have to do it this way, then you might try creating a new form for each button:
<?php do { ?>
<form onsubmit="return submitForm(this);"> <!--Note I added "this" -->
<input type="hidden" name="name" value="<?php echo $row_Recordset1['cargo']; ?>">
<input type="submit" name="submit" value="<?php echo $row_Recordset1['cargo']; ?>">
<br/>
<br/>
</form>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
Then the only value that will get posted will be the hidden value that is in the form whose button you clicked. I updated the onsubmit call above to include this in the call. So you can do the below in your function:
function submitForm(form) {
var $form = $(form);
$.ajax({
type:'POST',
url: 'jQuery-ajax-demo.php',
data:$form.serialize(),
success: function(response) {
$('#myJobs_Right').find('.form_result').html(response);
}
});
return false;
}