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();
Related
HTML/PHP:
<?php foreach($lines as $line): ?>
<form method="GET" action="nextpage">
<?php
global $unitPRICE;
$unitPRICE=(float) $line[1];
global $quantity;
$quantity=(float) $line[2];
?>
<tr>
<td> <div name="NomP"> <?php echo "<p>".$line[0]."</p>"; ?> </div>
<input class="btn" name="delbtn" type="button" onclick="deleteproduct(this.form)" value="Delete">
</td>
<td>
<div id="fixedP">
<input type="text" name="FIXEDP" value="<?php echo $unitPRICE; ?>" readonly>
</div>
</td>
<td> <input type="number" id="quantity" class="qty" oninput="modPrice(this.form)" value="<?php echo $quantity;?>" ></td>
<td >
<div>
<input id="price"type="text" name="price" value="<?php echo $unitPRICE*$quantity; ?>" readonly>
</div>
</td>
</tr>
</form>
<?php endforeach; ?>
Javascript:
function deleteproduct(frm){
var deletebtn= frm.elements['delbtn'];
console.log(typeof deletebtn);
}
The Error:
Uncaught ReferenceError: deleteproduct is not defined
at HTMLInputElement.onclick (cart.php:55)
Also, the main goal of this function is to print the text the div with the id "Nomp".
I want to create a function that can automatically save data when the data is completed input. but still not successful. I hope someone can help me solve this problem.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
var vall = $('#dofg_itemcode')
vall.keyup(function(){
$.post("save-mobile.php?dofgid=<?php echo $dofgid; ?>", {vall : vall.val()}, function(data)) {
$(".result").html(data);
}
}
}
</script>
<form id="form1" name="form1">
<table width="99%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="60%"><span class="style2"><font size="5">QR CODE :</font><br />
<input name="dofg_itemcode" type="text" id="dofg_itemcode" style="width:75%; font-size:30px;" maxlength="15" required="true" tabindex="0"/>
</span></td>
</tr>
<tr>
<td colspan="2" align="left"><input id="deviceid" name="deviceid" type="hidden" value="<?php echo $user;?>" />
<input id="compid" name="compid" type="hidden" value="<?php echo $compid;?>" />
<input id="tokenid" name="tokenid" type="hidden" value="<?php echo $tokenid;?>" />
<input name="alert" type="hidden" id="alert" value="<?php echo $tokenid;?>"/>
<div id="inlineKeypad"></div>
</td>
</tr>
</table>
$(document).ready(function() {
$('#dofg_itemcode').keyup(function(){
$.post("save-mobile.php?dofgid=<?php echo $dofgid; ?>", {
vall : $(this).val();
}, function(data) {
$(".result").html(data);
});
});
});
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]);
}
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>
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);
}
});