On entering the customer name in textbox it searches for customer info. I have generated successfully using JQuery by passing the entire table through Json variable, as I dont want any page refresh. Now I want to select the customer id generated from mysql db (php) through radio button, but the radio button event is not working. For testing purpose I have put a static table having the same radio button properties in that particular div(place for dynamic record generation using JQuery) and working fine. Hence I found that the data received through JQuery got some problem. Hope I am clear. Please find a way. Thanks in advance.
below is the code
abc.php
<input type="text" placeholder="full name" id="fullName" name="fullName" class="txt" style="width: 250px" />
<input type="button" id="btSelect" value="Select" class="button-crystal" />
<div id="disp"></div>
script.js
$('#btSelect').click(function () {
var form_data = {
genCustDetails: $('#fullName').val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: "xyz.php",
data: form_data,
dataType: "json",
success: function (response)
{
$('#disp').html(response);
}
});
return false;
});
xyz.php
if (isset($_POST['genCustDetails'])) {
$out="";
$result = mysql_query("select * from dbcustdetails where name like '$_POST[genCustDetails]%'");
while ($row = mysql_fetch_assoc($result)) {
$out.='
<table style="background-color:#eee; margin-bottom:5px;">
<tr>
<th class="td3">Customer ID</th>
<td class="td4">
'.$row["custID"].' <input type="radio" id="cust_ID" name="cust_ID" value="'.$row["custID"].'" />
</td>
</tr>
<tr>
<th class="td3">Name</th>
<td class="td4">'.$row["name"].'</td>
</tr>
<tr>
<th class="td3">Phone No.</th>
<td class="td4">'.$row["phno"].'</td>
</tr>
<tr>
<th class="td3">Email</th>
<td class="td4">'.$row["email"].'</td>
</tr>
<tr>
<td colspan="2" style="padding:0;">
<b>Address</b><br/>'.$row["addr"].'
</td>
</tr>
</table>';
}
echo json_encode($out);
}
Maybe You should'nt bind the event properly for the dynamic elements in the DOM.
Try Like this
$('body').on('change','.radiobuttonClassorID',function(){
//actions
});
that is because your newly generated radio button is not having any event handler assigned to it.
you have to assign an event handler after the ajax call (on ajax success).
something like
$('input[type="radio"]').unbind('click').click(function(){
//Your handler code
})
Related
I noob and get mad when submit php form, convert input value to json, and other php file get it.
html
<form action="submit.php" method="post" name="form1" id="myform">
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
</form>
<script src="script.js"></script>
script.js
$('#myform').submit(function (event) {
name = $('#name').val();
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json'
});
return false
});
php file
header('Content-Type: application/json');
$name_dirty = json_decode($_POST['name']);
echo $name_dirty;
Can someone help me? submit.php got blank, I cant get the value that I submit from html page. Big Thanks
Your Html
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
<script src="script.js"></script>
Your JS
$('#submit').click(function() {
name = $('#name').val()
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
data: data
dataType: 'json'
complete: function (resultData) {
alert('data has been send')
})
})
In your php:
<?php
print_r($_POST['data'])
A few notes. Make sure you check your paths. In my answer i assumed that the problem is in the code and not in wrong paths. Also when you use form tag you can use a submit button like <input type="submit" value="Submit"> to submit your form without using Javascript. It would work in your case but it's just another way to tackle your issue.
In my answer i removed your form tags and triggered the action on button click. There will be no redirect to the page but you can set a redirect inside the js if it is important to you, on success function of the ajax that i added. At the moment i just throw an alert message when it works successfully.
I am making a simple program for editing/updating/inserting in the table which contains table having columns of product names, price and image. The problem that I am facing is file uploading using ajax(how to use form data object sending data to PHP file using ajax). I tried to wrap inside the form but not working (any alternative for this).
dynamic PHP code
<form method="post" id="form'.$value['id'].'">
<tr class="jsgrid-filter-row" id="'.$value['id'].'">
<td class="jsgrid-cell" style="width: 163px"; id="lOcolumn'.$value['id'].'" >'.$value['productname'].'</td>
<td class="jsgrid-cell" style="width: 100px"; id="accolumn'.$value['id'].'" >'.$value['price'].'</td>
<td class="jsgrid-cell" style="width: 100px"; id="cocolumn'.$value['id'].'" >'.$array[$value['productcategory']-1].'</td>
<td class="jsgrid-cell jsgrid-align-center" id="imagecolumn'.$value['id'].'" style="width: 100px;""><a target="_blank" href="./user/'.$value['imagelink'].'" id="image'.$value['id'].'">image '.$value['id'].'</td>
<td class="jsgrid-cell jsgrid-control-field jsgrid-align-center" style="width: 50px;" id="inputedit'.$value['id'].'"><input class="jsgrid-button jsgrid-edit-button editButtonClass" id="editButtonn'.$value['id'].'" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button deleteButtonClass" type="button" title="Delete" id="deleteButton'.$value['id'].'"></td>
</tr>
</form>
$("form").submit(function(evt){
evt.preventDefault();
var formData = new FormData($(this));
$.ajax({
url: 'fileUploadUrl',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});
Please try above code. use jquery for file upload.
Use js/jquery to fetch the relevant values and submit them by ajax. you cannot use form tag between table tags. see below example,
$('.btn_save').click(function(){
let id = $(this).attr('data-id'); //this is the id of row
let name = $(this).parent().parent().find('.name').val(); //this is the name of relavent row
let price = $(this).parent().parent().find('.price').val(); //this is the price of relavent row
//do your ajax here
alert(id);
alert(name);
alert(price);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" width="100%">
<tr>
<td><input class="name" type="text"></td>
<td><input class="price" type="text"></td>
<td>
<button data-id="1" class="btn_save">Save</button>
</td>
</tr>
<tr>
<td><input class="name" type="text"></td>
<td><input class="price" type="text"></td>
<td>
<button data-id="2" class="btn_save">Save</button>
</td>
</tr>
</table>
I have a table with a checkbox at the top to select all, and individual checkboxes on each row for the user to select. Currently the PHP works so that after each row has been selected and the delete(submit) button is pressed, it updates the DB accordingly. How ever the user can only see that this row has been deleted once they refresh the page. I would like to use some jQuery to hide whatever table row the user has selected, after they hit the submit button.
I've tried using variations of
$('#delete_message').closest('tr').hide();
But I can't seem to get that to work properly. The HTML is straight forward
<form name="bulk_action_form" action="' . $_SERVER['REQUEST_URI'] . '" method="post" onSubmit="return delete_confirm();"/>
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-1"><input type="checkbox" name="select_all" id="select_all" value=""></th>
<th class="col-md-3">From</th>
<th class="col-md-4">Subject</th>
<th class="col-md-4">Date</th>
</tr>
</thead>
<tbody class="checkbox-group" data-toggle="toggle-checkbox">
<tr>
<td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
<td>Person 1</td>
<td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 1</a></td>
<td>2015-11-09 15:34:25</td>
</tr>
<tr>
<td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
<td>Person 2</td>
<td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 2</a></td>
<td>2015-11-09 15:34:25</td>
</tr>
<tr>
<td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
<td>Person 3</td>
<td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 3</a></td>
<td>2015-11-09 15:34:25</td>
</tr>
</tbody>
</table>
<input type="submit" class="btn btn-danger" name="bulk_delete_submit" id="delete_message" value="Delete">
</form>
How can I make sure that it hides whatever table row is selected, and if all are selected how can I hide all of them.
You help is greatly appreciated!
Thanks
Edit: The PHP I am using to update the DB after the form submit
include_once('dbConfig.php');
if(isset($_POST['bulk_delete_submit'])){
$idArr = $_POST['checked_id'];
foreach($idArr as $id){
mysqli_query($conn,"UPDATE message SET publish='n' WHERE id=".$id);
}
}
I hope I understand correctly.
So you want to hide rows which are checked, on button click?
Here's how you can do it JSFiddle:
//this is how you can select all rows
$('#select_all').on('click', function(){
if(this.checked == true)
{
$('.table tbody .checkbox').each(function(){
this.checked = true;
});
}
else{
$('.table tbody .checkbox').each(function(){
this.checked = false;
});
}
});
$('#delete_message').on('click', function(){
$('.table tbody').find('input:checkbox:checked').closest('tr').hide();
})
But if you want these rows to be hidden after refresh, you should create IDs for rows, then handle them in your PHP code. So, when you reload page, you would get those values, and hide rows with those IDs (or whatever you use).
Assuming you have a form then prevent then default and submit after.
$('#delete_message').click(function(e)
e.preventDefault();
$('.checkbox:checked').closest('tr').hide();
$(this).closest('form').submit();
});
If your using Ajax however put this in your success function.
Your jQuery needs to find all the checked inputs inside the .checkbox-group and then find the closest tr to hide it. Like here:
$("#delete_message").click(function(){
$(".checkbox-group input:checked").closest("tr").hide();
});
For your select all/deselect all, you need to again look in the .checkbox-group and find all the checkbox controls and update them with the checked value of the #select_all checkbox.
$("#select_all").click(function(){
$(".checkbox-group input:checkbox").prop("checked", this.checked);
});
To submit your form via ajax without refreshing the page (and having the rows pop back) you need to apply an id to your form of bulk_action_form and then utilize the following jQuery:
$("#bulk_action_form").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(response) {
// Consider doing something here (like a saved message).
console.log(response);
}
});
});
Working jsfiddle here: http://jsfiddle.net/9qmxfc0n/4/
If you still receive the rows coming back then you have an issue with your PHP script.
I'm trying to send simple form data from my index page to a PHP function, checklogin.php. What I'm finding is that no data, serialized or even direct input, is getting through to the PHP function. I know for a fact that the jQuery function is getting called, and I also know that the PHP file is called because I've put various post functions in.
When I submit data directly from the form using action="checklogin.php" the $_POST data is correctly received and I can process it. However when using jQuery to intercept the form submit, no data is received.
One thing to note is that the actual login form HTML is inserted from another page, to allow me to work on multiple pages instead of one big index file.
Form - login.php
<form id="loginform" name="loginform" method="post">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login</strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="username" type="text" id="username"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="password" type="text" id="password"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
Submit event hook - Index.php
$( document ).ready(function() {
$.post("login.php", function(data) { // retrieve login form from other page.
$("#page5").html(data);
$('#loginform').submit(function () {
event.preventDefault();
var formData = $(this).serialize();
console.log("Form Data: " + formData); // this is not blank
$.post("checklogin.php", formData, function(data) {
// post-login actions
})
});
});
})
});
checklogin.php (temporary until is problem resolved)
<?php
print_r($_POST);
?>
As I said, even direct input such as "username=test$password=blah" instead of 'formData' results in an empty $_POST array. I've also tried using the ajax equivalent post call with no luck.
JavaScript Console Output
// console.log line above $.post
Form Data: username=test&password=blah
// Result from PHP print_r
Array
(
)
Use .on()
As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.
$(document).on('submit','#loginform',function () { //code here }
or better use
$('#page5').on('submit','#loginform',function () { //code here }
Syntax
$( elements ).on( events, selector, data, handler );
I'm increasing my system by entering the functionality of loading a page inside a div dynamically, in the other words, the central area of the page is updated. For this I am using the JQuery. But even I having a problem which is the following, when submitting the same FORM one has to load the next page via JQuery-Ajax to send the post to use the data on this second page.
The funny thing is that I'm not getting the pick. Submit() the FORM always and only in one case. I will post the HTML below the two situations:
In the html code below warning test that I created within the form.submit () is being displayed.
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/fwsibe/index.php/acesso/listarSistemasValidar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Dados</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SIBE:* </b>
</td>
<td>
<select name="slSibe">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
</form>
In the second code warning. Submit () is not displayed, or is not recognized submission form:
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Filtrar por:</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SubTipo Produto:* </b>
</td>
<td>
<select name="slSubTipo">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
<div>
<a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a>
</div>
<br>
<table id="tabelainfo">
<tbody>
<tr id="corpotabela">
<td align="center">Não existem Motivos de Ajuste cadastrados para esta pesquisa.</td>
</tr>
</tbody>
</table>
</form>
Below the JQuery script that is already properly initialized in the HEAD of the page, in addition, already tested for other enventos as $ (this). Click and everything is ok.
$(document).ready(function() {
$("#form").submit(function() {
alert("SUBMIT FORM");
// alert($(this));
// console.log($(this));
// $.post($(this).attr("action"), $(this).serialize(), function(data) {
// $("#divCentral").html(data);
// });
// return false;
});
});
Could you help me find the bug that causes. Submit () is not recognized by JQuery?
Edited:
I already discovered the source of the problem. Looks like that when the component is drawn for a page loaded by jquery-ajax, the event .submit() doesn't works, but when the page is loaded for default away, the event works.
The problem is that the is loaded by Ajax, and the JQuery function don't recognize it. I'am creating the function for load the central page of the template by a ajax request to a file. I have two functions, the first just for test, and the second I'am creating for works with the $_POST. The JQuery function for now is well:
function carregaUrl(url) {
//alert("carregaUrl=" + url);
$("#divCentral").load(url);
console.log($('form').attr('name'));
}
function carregaUrl2(url) {
var data = $("form").serialize();
$.ajax({
type: "POST",
url: url,
data: data
}).done(function(data) {
$("#divCentral").html(data);
});
}
What is happening here, is that the handler fires, starts the alert, and then form submit occurs, effectively reloading your page.
You need your event handler to return false if you want to prevent this submit and stay on your current page, or add an alert to the page you're going with this submit.
If you want to stay on your current page, try this:
jQuery(function($){
function formSubmit(form) {
$.post(form.attr('action'), form.serialize(), function(data){
$("#some-outer-container-with-form").html(data);
});
$("#form").submit(function(){ return formSubmit(form) }); //we need to rebind
return false;
}
$("#form").submit(function(){ return formSubmit( $(this) ) });
});