I have gone through this before, but I don't know what I am doing wrong. I also take a look the documentation plus the existing question on Stack Overflow but I could not find any answer. This drives me crazy. I know I missed something but I could not trace it. This is what I have in index.php
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/file.js"></script>
<?php
echo '<table border="1" width="50%">';
foreach($datas as $data){
echo '<form method="post" action="" class="vForm">';
echo '<tr><td><input type="text" name="qty" value="1" size="3" /></td></tr>';
echo '<tr><td><input type="submit" name="add" value="add" class="button" /></td></tr>';
echo '</form>';
}
echo '</table>';
So in my file.js
$(function() {
var CA = (function() {
function add(form) {
console.log('Form: ' + form.find('[name="qty"]').val() );
return false;
}
$('.vForm').submit(function(e) {
add($(this));
e.preventDefault();
});
}());
});
For some reason I could not able to get the "qty" value in the text field in file.js. The code below also failed. I just got "undefined" in the console log.
console.log('Form: ' + form.find('input[name="qty"]').val() );
Any help is greatly appreciated. Thank you.
Well, after reading the comments section, and after the actual code is provided.. I believe the reason is quite simple:
The form element is not a valid child of the table element. Your code basically, renders the following.
<table>
<form method="post" action="" class="vForm">
<tr>
<td><input type="text" name="qty" value="1" size="3" /></td>
</tr>
<tr>
<td><input type="submit" name="add" value="add" class="button" /></td>
</tr>
</form>
</table>
As stated in the W3C Specification, the only valid children of the table element are 'caption', 'col' or 'colgroup', 'thead', 'tfoot', or 'tbody'.
I don't know how jQuery's .find() method specifically works, when it gets to how jQuery is programmed, but fixing this invalid html results in your desired effect:
<form method="post" action="" class="vForm">
<table>
<tr>
<td><input type="text" name="qty" value="1" size="3" /></td>
</tr>
<tr>
<td><input type="submit" name="add" value="add" class="button" /></td>
</tr>
</table>
</form>
Demo, illustrating the above(check your console).
MY dear friend it is working fine.
<?php
$datas=array("Volvo","BMW","Toyota");
foreach($datas as $data){
echo '<form method="post" action="" class="vForm">';
echo '<input type="text" name="qty" value="'.$data.'" size="3" />';
echo '<input type="submit" name="add" value="add" class="button" />';
echo '</form>';
}
?>
Please check the screen shot and in input area i took the $data's value.
Related
I have one form which has master detail data. i have created one table for details and creating rows on button click using JavaScript, but as soon as i am clicking add row button it is adding row and immediately my page gets reloaded so the added row disappears. i have another buttons to perform other PHP tasks so i can not remove form tag. please help me to get this done.
following is the HTML and JavaScript code.
<div class="row pt-3">
<div class="table-responsive">
<table id="vattable" class="table table-sm table-striped">
<thead class="thead-light">
<tr>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDID"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDSCATEGORY"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDRATE"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDAUTOFLAG"); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="text-control input-sm" readonly name="vsdid[]" id="vsdid" value=1 style="text-align:right" maxlength="13" /></td>
<td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory1" style="text-align:right" maxlength="13" /></td>
<td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate1" style="text-align:right" maxlength="13" /></td>
<td><input type="text" name="vsdautoflag[]" id="vsdautoflag1" style="text-align:right" maxlength="13" autofocus /></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
var count=1;
$(document).on('click','#addrow', function(){
//alert('a');
count=count+1;
$('#vsdid').val(count);
//alert(count);
var html_code='';
html_code +='<tr id="row_id_'+count+'">';
html_code += '<td><input type="text" class="text-control input-sm" name="vsdid[]" id="vsdid'+count+'" style="text-align:right"/></td>';
html_code +='<td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory'+count+'" /></td>';
html_code +='<td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate'+count+'" style="text-align:right" maxlength="13" /></td>';
html_code +='<td><input type="text" name="vsdautoflag[]" id="vsdautoflag'+count+'" style="text-align:right" /></td>';
html_code +='<td><button type="submit" name="removerow" id="removerow" class="btn btn-danger fa fa-minus"></button></td></tr>';
$('#vattable').append(html_code);
//alert(html_code);
});
});
</script>
It's possible that your #addrow button is the submit button and the form is being submitted. Add a return false just after //alert(html_code)
You haven't added a button to add the rows, so you're likely observing a side effect.
If I understand correctly, you want to have a button that on click will execute the function you've created. Therefore, you can add a button with id addrow below the table div like this:
<button id="addrow">
Add Row
</button>
And then you can attach your function via jQuery as you've started (I have slightly amended your script) - see JsFiddle - https://jsfiddle.net/9Ljc237k/9/
in your add row button click you should return false at the end,
or set type attribute of your button tag to button instead of submit
also is better to append row to tbody tag not table
If you have the problem only with reload you should put event.preventDefault()
$(document).on('click','#addrow', function(event){
event.preventDefault();
//alert('a');
count=count+1;
$('#vsdid').val(count);
//alert(count);
var html_code='';
html_code +='<tr id="row_id_'+count+'">';
html_code += '<td><input type="text" class="text-control input-sm" name="vsdid[]" id="vsdid'+count+'" style="text-align:right"/></td>';
html_code +='<td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory'+count+'" /></td>';
html_code +='<td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate'+count+'" style="text-align:right" maxlength="13" /></td>';
html_code +='<td><input type="text" name="vsdautoflag[]" id="vsdautoflag'+count+'" style="text-align:right" /></td>';
html_code +='<td><button type="submit" name="removerow" id="removerow" class="btn btn-danger fa fa-minus"></button></td></tr>';
$('#vattable').append(html_code);
//alert(html_code);
});
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 dynamic table. I am trying to get a value of a hidden field which is order_id, but I am getting only the first id. If I click on the 3rd or 4th etc button I still get the order_id of the first td. Below is my code :
<tr>
<td>id</td>
</tr>
<tr>
<td>
<input type="hidden" id="hid" value="<?php echo $id; ?>">
<input type="button" id="sends" value="Send" onclick="sendemails();">
</td>
</tr>
<script>
function sendemails(){
var sends = $('#sends').val();
var hid = $('#hid').val();
alert(hid);
}
</script>
You can use another solution
<tr>
<td>id</td>
</tr>
<tr>
<td>
<input type="hidden" id="hid" value="<?php echo $id; ?>">
<input type="button" id="sends" value="Send" onclick="sendemails(<?php echo $id; ?>);">
</td>
</tr>
<script>
function sendemails(hid){
alert(hid);
}
</script>
And note that attribute "id" had to be UNIQUE.
The issue is because you are presumably repeating that row in the table, which will result in the id of both the button and input being repeated throughout the page, which is invalid. You need to use classes, attach your events in JS and then traverse the DOM to find the related hidden input. Try this:
<tr>
<td>id</td>
</tr>
<tr>
<td>
<input type="hidden" class="hid" value="<?php echo $id; ?>" />
<input type="button" class="sends" value="Send" />
</td>
</tr>
$(function() {
$(document).on('click', '.sends', function() {
var sends = $(this).val();
var hid = $(this).prev().val();
alert(hid);
});
});
Note that I used a delegated event handler as you stated the table is dynamically generated.
Try add "this" in onclick event like this: onclick="sendemails(this);" and get this on your function.
Try:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>id</td>
</tr>
<tr>
<td>
<input type="hidden" id="hid" value="hid">
<input type="button" id="sends" value="Send" onclick="sendemails(this);">
</td>
</tr>
</table>
<script>
function sendemails(btn){
var sends = btn.value;
var hid = $("#" + btn.id).closest("td").find("#hid").val()
alert(hid)
}
</script>
HTML code :
<td><input type="text" name="flat[]" class="" value="<?php echo $row_pdetails["flat"]; ?>" /></td>
<td><input type="text" name="new_price[]" class="" value="<?php echo $row_pdetails["price"]; ?>" /></td>
<td><input type="text" name="org_price[]" class="" value="<?php echo $row_pdetails["org_price"]; ?>" readonly/></td>
<td><input type="submit" name="save" value="save"/></td>
PHP code :
<?php
if(isset($_POST["save"]))
{
for($i=0;$i<count($_POST["org_price"]); $i++)
{
$org_price=$_POST["org_price"][$i];
$new_price=$_POST["new_price"][$i];
mysql_query("update tb_party_rate_entry set price='$new_price' where (party_id='$p_id' && org_price='$org_price')");
}
}
Here in this code I'm fetching the value of new_price[] and org_price[] from the database using a while loop, and for updating these values in the database I've used a for loop as in my PHP code.
Now what I want is that whenever I enter any value in flat[] textbox, that same value should simultaneously be entered in new_price[] textbox using keypress event. When I enter value in 1st row's flat price it should be entered in first row's new_price[], when I enter value in 2nd row's flat price it should be entered in second row's new_price[], and in keypress event.
Please help.
You should use onchange event on flat[] and set the value of new_price[] consequently.
Something like
$('input[name="flat[]"]').on('keyup',function(e) {
$( this ).siblings('input[name="new_price[]"]:first').val ( $(this).val() );
});
Note:
I used siblings because i assume you will have different rows with the same input name, in this way you only update the right element
Test Here: http://jsfiddle.net/qsDn5/3/
Html
<div>
<tr>
<td>flat1:<input type="text" name="flat[]" class="flat" value=""/></td>
<td>price1:<input type="text" name="new_price[]" class="new_price" value=""/></td>
<td><input type="text" name="org_price[]" class="" value=""</td>
</tr>
</div>
<div>
<tr>
<td>flat2:<input type="text" name="flat[]" class="flat" value=""/></td>
<td>price2:<input type="text" name="new_price[]" class="new_price" value=""/></td>
<td><input type="text" name="org_price[]" class="" value=""</td>
</tr>
</div>
<p><input type="submit" name="save" value="save"/></p>
Jquery
$(document).ready(function(){
$('.flat').on('keyup',function(e) {
$( this ).siblings(".new_price").eq(0).val ( $(this).val() );
});
});
FIDDLE (see demo)
Try this:
note that i add rel attribute in html and created unique id for textbox.means every textbox have a unique id.
<?php
$i = "1";
while(//$row=...){
?>
<td><input type="text" name="flat[]" id="flat<?php echo $i;?>" rel="<?php echo $i;?>" class="flat" value="<?php echo $row_pdetails["flat"]; ?>" /></td>
<td><input type="text" name="new_price[]" id="newprice<?php echo $i;?>" rel="<?php echo $i;?>" class="new_price" value="<?php echo $row_pdetails["price"]; ?>" /></td>
<td><input type="text" name="org_price[]" id="orgprice<?php echo $i;?>" rel="<?php echo $i;?>" class="org_price" value="<?php echo $row_pdetails["org_price"]; ?>" readonly/></td>
<?php $i++;} ?>
<td><input type="submit" name="save" value="save"/></td>
JQuery:
when user try to enter some thing in flat textbox, we get it's rel and it's value.using the rel's value we found related newprice textbox.
$(document).on('keyup','.flat',function(){
var rel = $(this).attr('rel');
var flatvalue = $(this).val();
$("#newprice"+rel).val(flatvalue);
});
so far I got this, the changing of text will appear on input text. I want just put it as span/label.
<script>
function pros(frm){
//For each checkbox see if it has been checked, record the value.
for (i = 0; i < frm.box.length; i++)
if (frm.box[i].checked){
frm.text[i].value = 'Checked';
} else {
frm.text[i].value = 'Unchecked';
}
}
</script>
and the HTML is
<form method="post" action="field/check.php" name="field">
<table class='zb'>
<tr><td><b>Reading</b></td><td><input type='checkbox' id='box' name='Reading' value='Reading' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>
<tr><td><b>Grammar</b></td>
<td><input type='checkbox' id='box' name='Grammar' value='Grammar' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>
<tr><td><b>Writing</b></td>
<td><input type='checkbox' id='box' name='Writing' value='Writing' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>
<tr><td><b>Speaking</b></td>
<td><input type='checkbox' id='box' name='Speaking' value='Speaking' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>
</table><br/>
<div align="center">
<input type="submit" name="Submit" value="Submit" class="cssbutton"/>
<input name="reset" type="reset" value="Reset" class="cssbutton"/>
</form>
so, how the JS to put the result on span/label (if checked or unchecked)?
then I will put span/label somewhere after tag form closed.