Develop Reference

Submit form does not work once table is transposed

I need to transpose/rotate a table, in order to view it better, however as soon as I transpose the table the submit button will now work any more
I have a table setup as follows
<table id="tableID" width="200" border="1">
<tbody>
<tr>
<td>Date</td>
<td>Boxed;</td>
<td>Location</td>
<td>Quantity</td>
<td>Change;</td>
</tr>
<?php do { ?>
<tr><form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="form1" id="form1">
<td><?php echo $row_get['Date']; ?></td>
<td><?php echo $row_get['Boxed']; ?></td>
<td><input name="Location" type="text" id="Location" value="<?php echo $row_get['Location']; ?>" size="7" /></td>
<td><input name="Quantity" type="text" id="Quantity" value="<?php echo $row_get['Quantity']; ?>" size="7" /></td>
<td><input name="Update" type="submit" value="submit" id="Update" />
<input name="id" type="hidden" id="id" value="<?php echo $row_get['id']; ?>" />
</p>
<input type="hidden" name="MM_update" value="form1" />
</form></td>
</tr> <?php } while ($row_get ->fetch()); ?>
</tbody>
</table>
in the transpose table script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("#tableID").each(function() {
var $this = $(this);
var newTransposedRow = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newTransposedRow[i] === undefined) { newTransposedRow[i] = $("<tr></tr>"); }
newTransposedRow[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newTransposedRow, function(){
$this.append(this);
});
});
});
</script>
Update DB:
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form1")) {
$updateSQL = "UPDATE Stock SET Location=?, Quantity=? WHERE id=?";
$Result1= $conn->prepare($updateSQL) or die(errorInfo());
$done = $Result1->execute([$_POST['Location'], $_POST['Quantity'], $_POST['Trade_price'], $_POST['id']]);
if ($done){
header('Location: mypage.php
exit();
}
}
This all works fine until I use/insert the transposition script any idea what is stopping the update?
Any help welcome

Clear data form submit button php

I have a form and I want, when I click on submit button, that all data input will clear. My script below is not working:
<!-- language: lang-js -->
jQuery(document).ready(function($) {
$('.product_submit button').on('click', function(event) {
event.preventDefault();
$('span.loadding').html('<i class="fa fa-spin fa-refresh" aria-hidden="true"></i>');
var data_form = $("#form-product").serialize();
$.ajax({
type: 'post',
url: location,
data: data_form,
success: function(resulf) {
var errors = $(resulf).find('#alert_order').html();
var html = $(resulf).find('#add-to-order-success').html();
if (html) {
$('#add-to-order-success').html(html);
$(".myform")[0].reset();
}
if (errors) {
$('#add-to-order-success').html(errors);
}
$('span.loadding').html('<i class="fa fa-check" aria-hidden="true"></i>');
}
})
})
});
<!-- language: lang-html -->
<div class="form-add-cart">
<form method="post" action="" id="form-product" name="myform">
<table>
<tbody>
<tr>
<td width="40%">
<?php _e('Họ và tên:','wow'); ?>
</td>
<td width="60%"><input type="text" name="name_order" value="<?php echo $current_user->display_name; ?>" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" required></td>
</tr>
<tr>
<td width="40%">
<?php _e('Điện thoại:','wow'); ?>
</td>
<td width="60%"><input type="text" name="phone_order" value="" class="wpcf7-form-control wpcf7-text" aria-invalid="false" required></td>
</tr>
<tr>
<td width="40%">
<?php _e('Sản phẩm :','wow'); ?>
</td>
<td width="60%"><input type="text" name="product_order" value="<?php the_title(); ?>" class="wpcf7-form-control wpcf7-text" aria-invalid="false" required></td>
</tr>
</tbody>
</table>
<div class="product_submit">
<button type="submit" class="wpcf7-form-control wpcf7-submit">
<?php _e('Gửi','wow'); ?> <span class="loadding"></span>
</button>
</div>
<input type="hidden" name="id_product" value="<?php echo $post->ID; ?>">
<input type="hidden" name="add_product_to_order" value="<?php echo $post->ID; ?>">
</form>
</div>

Hi I think the problem is that you didn't include class="myform" in your form.
As you can see, you are applying to the reset() class myform.
$(".myform")[0].reset();
You can alternatively set an id to it like id="myidform"
and then use it in you jquery
$("#myidform")[0].reset();

unable to submit form data using ajax?

i am very new to php and have no idea of javascript, have done all js work using tutorials.Also tried to use existing solutions from stackoverflow, but no success !
What i am trying to do is trying to update database values using 'submit' button on the basis of values called from 'select option'.
Problem is that no data is getting updated in DB after i click on submit button (on viewtest.php), I have also tried to add the 'update.php' to form action.
Here's the screenshot of viewtest.php
here's my code:
viewtest.php
<form method="POST" action="">
<table border="1px"><tr> <td>
<select required name="tstname" id="test" onChange="fetch_ques()">
<option> Select Test Name</option>
<?php
$res=mysqli_query($connection,"select * from test_detail");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["test_name"]; ?>">
<?php echo
$row["test_name"]; echo' - - ['. $row['test_category'].']'; ?> </option>
<?php
}
?>
</select>
</div>
<td>
<div id="qnos"><select></select></div></td></tr>
<tr><td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"> </td></tr>
</form>
</table>
<div id="ques"></div>
<script type="text/javascript">
function fetch_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","getq.php?
tstnm="+document.getElementById("test").value,false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML=xmlhttp.responseText; // div id
}
function display_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","displayq.php?
qnos="+document.getElementById("quesdd").value,false);
xmlhttp.send(null);
document.getElementById("ques").innerHTML=xmlhttp.responseText;
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#vform").submit(); (function()
// document.getElementById("vform").submit();(function()
{
location.href='update.php?
qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$
("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
});
});
</script>
<?php
if(isset($_GET['st']) && $_GET['st'] !== "")
{
echo"updated";
}
else echo "Error: ".mysqli_errno();
?>
displayq.php //Used to fetch data in select menu
<?php
include '../connect.php';
$quesno=$_GET["qnos"];
if($quesno!="")
{
$qry=mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
echo "<table name='ques'>";
while($ftc=mysqli_fetch_array($qry))
{
?>
<form method="POST" action="">
<table name="ques">
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
</table>
</form>
<?php
}
echo "</table>";
}
?>
</tr> </td>
</table>
</form>
update.php //Used to update question by getting values from 'viewtest.php'
<?php
include '../connect.php';
$qn=$_GET['qno'];
$qname=$GET['qn'];
$a1=$GET['c1'];
$a2=$GET['c2'];
$a3=$GET['c3'];
$a4=$GET['c4'];
$acr=$GET['cr'];
$update=mysqli_query($connection,"update quesadd SET ques='$qname',
c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn' ");
if($update==true)
{
header('location:viewtest.php?st=true');
}
?>

I can see multiple problems, don't know if all the problems will go away but it will help.
$("#vform").submit(); (function()
The line above says if a <form> with the id="vform" has been submitted, execute this function. Your form does not have an id so it will never trigger. One other problem is that the function is not part of the trigger. It should be something like
$("#vform").submit(function()
The complete code could look like:
<script type="text/javascript">
$(document).ready(function(){
$("#vform").submit(function(e){
e.preventDefault();
location.href='update.php?qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
return false;
});
});
</script>

Use AJAX to submit your form and refresh/redirect the page with javascript.
viewtest.php
<?php
include '../connect.php';
?>
<form method="POST" action="">
<table border="1px">
<tr>
<td>
<select required name="tstname" onchange="display_ques()" id="test">
<option> Select Test Name</option>
<?php
$res = mysqli_query($connection, "select * from test_detail");
while ($row = mysqli_fetch_array($res)) {
?>
<option value="<?php echo $row["test_id"]; ?>">
<?php echo
$row["test_name"];
echo ' - - [' . $row['test_category'] . ']'; ?> </option>
<?php
}
?>
</select>
</td>
<td>
<div id="qnos">
<select>
<!-- put code here for showing question id/number -->
</select></div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"></td>
</tr>
</table>
</form>
<div id="ques"></div>
<h1 id="status"></h1>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function display_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ques").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "displayq.php?qnos=" + document.getElementById("test").value, true);
xmlhttp.send(null);
}
function fetch_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "getq.php?tstnm = " + document.getElementById("test").value, false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML = xmlhttp.responseText; // div id
}
$(document).ready(function () {
$('#vform').on('click', function (e) {
e.preventDefault();
var data = $('form#update').serialize();
$.post('update.php', data, function (response) {
// response is the data returned from php echo json_encode(['results' => true/false]), from update.php
var res = JSON.parse(response);
if (res.results == true) {
$('#status').html('Data was updated');
} else {
$('#status').html('Error occured while trying to update data.');
console.log(response);
}
});
});
});
</script>
I have given your form and id to be able to serialize it using jQuery and I have also added a hidden input to hold the id of the current question.
displayq.php
<?php
include '../connect.php';
$quesno = $_GET["qnos"];
if($quesno != "") : ?>
<form id="update" method="POST" action=""> <!-- added an id to the form -->
<table name="ques">
<?php
$qry = mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
while($ftc = mysqli_fetch_array($qry)) : ?>
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<!-- added this hidden input to hold the question number -->
<input type="text" id="quesno" name="quesno" value="<?php echo $ftc["quesid"];?>" hidden>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
<?php endwhile; ?>
</table>
</form>
<?php endif; ?>
Then in your update.php you can access the values using $_POST
<?php
include '../connect.php';
$qn = trim($_POST['quesno']);
$qname = trim($_POST['ques']);
$a1 = trim($_POST['a1']);
$a2 = trim($_POST['a2']);
$a3 = trim($_POST['a3']);
$a4 = trim($_POST['a4']);
$acr = trim($_POST['correct']);
$sql = "update quesadd SET ques='$qname', c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn'";
if (mysqli_query($connection, $sql)) {
// returning data to jQuery, as response
// jQuery will parse this as json {results: true}
echo json_encode(['results' => true]);
} else {
// returning data to jQuery, as response
// jQuery will parse this as json {results: false}
echo json_encode(['results' => false]);
}

jQuery function run just in first row

I already fetched all values from database into table
foreach ( $result as $print ) {
?>
<form method="post">
<tr>
<td>Edit</td>
</tr>
<tr>
<div class="edit-box1">
<input id="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
}
And this is the jQuery code:
jQuery(document).ready(
function() {
jQuery("#edit-btn").click(function() {
jQuery("#idd").prop("readonly", false);
});
});
The problem is that I got 20 rows and my edit button just run on my first row.
How can I make my jQuery run on all rows ?

This will be your HTML
$cnt=0;
foreach ( $result as $print ) {
?>
<form method="post">
<tr>
<td><a href="#" class="edit-button" id='<?php echo $cnt;?>'>Edit</a></td>
</tr>
<tr>
<div class="edit-box1">
<input id="idd<?php echo $cnt;?>" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
<?php $cnt++; ?>
</div>
</tr>
</form>
}
This will be your jquery code
<script>
jQuery(document).ready(
function() {
jQuery(".edit-button").click(function() {
jQuery("#idd"+$(this).attr("id")).prop("readonly", false);
});
});
</script>
Hope this will work surely.

Id cannot be used more than once, use class instead, try this code:
<?php foreach($result as $print): ?>
<form method="post" class="form">
<tr>
<td>Edit</td>
</tr>
<tr>
<div class="edit-box1">
<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
<?php endforeach; ?>
<script>
jQuery(document).on('click','.edit-btn',function(){
jQuery(this).closest('.form').find('.idd').prop('readonly',false);
});
</script>

1 ) all id convert class
2) Use method removeAttr("readonly")
<tr>
<td>Edit</td>
</tr>
<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
And you can use $(".idd").removeAttr("readonly")
$(document).ready(function(){
$(".edit-btn").click(function(){
$(".idd").removeAttr("readonly");
$(".idd:first").focus();
})
})
Example :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<tr>
<td>Edit</td>
</tr>
<input type="text" class="idd" readonly>
<input type="text" class="idd" readonly>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".edit-btn").click(function(){
$(".idd").removeAttr("readonly");
$(".idd:first").focus();
})
})
</script>
</body>
</html>

Jquery value keeps updating to the latest clicked

I have a table that reveals a subtable. Within that subtable, it will calculate the amount of users via ajax and jquery. However, when i click to expand another subtable, the values update to the one just clicked instead of retaining their values. How do i solve this? The classes are totalagents and totalusers. Each subtable is supposed to have their own count.
Jquery
$('.expandlink_admin').on('click', function() {
var $row = $(this).closest('tr');
var curr_row = $row.data('id');
var company = $(this).closest('td').data('company');
var privilege = $(this).closest('td').data('privilege');
$.ajax({
url: '/manager/administrator/users/count_agents_users',
type: 'POST',
dataType: 'json',
data: {
id: curr_row,
company: company,
privilege: privilege
},
cache: false,
success: function(result) {
$(".subtable").each(function() { //loop through each row
if ($("[type='hidden']", this).val() == curr_row) {
$(this).show();
$row.find('.expandlink_admin').hide();
$row.find('.shrinklink_admin').show();
$('.totalagents').html(result.agents);
$('.totalusers').html(result.users);
}
});
}
});
});
HTML
<tbody>
<?php $offset = $this->uri->segment(5,0)+1; ?>
<?php foreach($user as $row): ?>
<tr data-id="<?php echo $row->id; ?>">
<td>
<?php echo $offset++; ?>
</td>
<td>
<?php echo $row->company; ?>
</td>
<td data-company="<?php echo $row->company; ?>" data-privilege="<?php echo $row->privilege; ?>">
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="button" class="expandlink_admin" value="+" />
</td>
<td>
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="button" class="shrinklink_admin" value="-" />
</td>
<td>
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="hidden" name="company" value="<?php echo $row->id; ?>" />
<input type="hidden" name="set" value="edit" />
<input type="button" class="editlink_company" value="Edit" />
</td>
<td>
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="hidden" name="company" value="<?php echo $row->id; ?>" />
<input type="hidden" name="set" value="delete" />
<input type="button" class="deletelink" value="Delete" />
</td>
</tr>
<tr class="subtable">
<td colspan="9">
<input type="hidden" value="<?php echo $row->id; ?>" />
<table class="table">
<tr>
<td>Total Agents : </td>
<td class="totalagents"></td>
<td>Address : </td>
<td>
<?php echo $row->address; ?>
</td>
</tr>
<tr>
<td>Total Users : </td>
<td class="totalusers"></td>
<td>Date Added : </td>
<td>
<?php echo $row->date_added; ?>
</td>
</tr>
</table>
</td>
</tr>
<?php endforeach; ?>
</tbody>
Expected result
Row 1
<br/>Total Agents : 4
<br/>Total Users : 2
<br/>Row 2
<br/>Total Agents : 2
<br/>Total Users : 12
<br/>
Actual result
Row 1
<br/>Total Agents : 4
<br/>Total Users : 2
<br/>Row 2
<br/>Total Agents : 4
<br/>Total Users : 2

The solution in case anyone was wondering
$(".subtable").each(function() { //loop through each row
if($("[type='hidden']", this).val() == curr_row) {
//$(this) means subtable
$(this).show();
$row.find('.expandlink_admin').hide();
$row.find('.shrinklink_admin').show();
$(this).find('.totalagents').html(result.agents);
$(this).find('.totalusers').html(result.users);
}
});