I have an HTML table append using jQuery as follows which fires on a button click
$("#listadd").click(function() {
if (validateListAdd()) {
var mcode = $("#mcodehidden").val();
if(checkItemDuplicates(mcode)) {
var mname = $("#mnamehidden").val();
var sellprice = $("#sellprice").val();
var cost = $("#cost").val();
var qty = $("#qty").val();
var remark = $("#remark").val();
var subtotal = sellprice * qty;
alert(qty);
$("#productlist tbody").append('<tr class="sumrow"><td><input id="hdqty" type="hidden" name="tblqty[]" value="' + qty + '"><input id="hdsubtotal" type="hidden" name="tblsubtotal[]" value="' + subtotal + '"><input type="hidden" name="tblmcode[]" value="' + mcode + '">' + mcode + '<input type="hidden" name="tblcost[]" value=' + cost + ' ></td><td><input type="hidden" name="tblmname[]" value="' + mname + '">' + mname + '</td><td id="tdprice"><input type="hidden" name="tblsellprice[]" value=' + sellprice + '>' + sellprice + '</td><td id="tdqty">' + qty + '</td><td class="subtotal">' + subtotal + '</td><td><input type="hidden" name="tblremark[]" value=' + remark + '>' + remark + '</td><td><center><button type="button" class="edit" title="Edit this row"></center></td><td><center><button type="button" class="delete" title="Remove this row"></center></td></tr>');
$('[id$=mcode]').val("");
$('[id$=mname]').val("");
$('[id$=sellprice]').val("");
$('[id$=qty]').val("");
$('[id$=mcodehidden]').val("");
$('[id$=mnamehidden]').val("");
calculateTotal();
}else{
alert("Sorry, You have already added this item");
}
} else {
alert("You have entered invalid data, Please check again");
}
});
The problem is the value of the hidden field #hdqty is not getting filled by the var "qty" but which shows up the value correctly in the alert that I have used in here. When I inspected the element(table row) in the browser, it shows the hidden field as
<input id="hdqty" type="hidden" name="tblqty[]" value>
Can anyone point me out the mistake?
You set the value of the #hdqty field in the string you build, however the below line removes the value almost immediately:
$('[id$=qty]').val("");
The selector above matches any element that has an id attribute that ends with qty.
Remove that line, or change the selector to better fit your requirements, and your code will work.
Paste this
$("#productlist tbody").append('<tr class="sumrow"><td><input id="hdqty" type="hidden" name="tblqty[]" value="' + qty + '"/><input id="hdsubtotal" type="hidden" name="tblsubtotal[]" value="' + subtotal + '"/><input type="hidden" name="tblmcode[]" value="' + mcode + '"/>' + mcode + '<input type="hidden" name="tblcost[]" value=' + cost + ' /></td><td><input type="hidden" name="tblmname[]" value="' + mname + '">' + mname + '</td><td id="tdprice"><input type="hidden" name="tblsellprice[]" value=' + sellprice + '>' + sellprice + '</td><td id="tdqty">' + qty + '</td><td class="subtotal">' + subtotal + '</td><td><input type="hidden" name="tblremark[]" value=' + remark + '>' + remark + '</td><td><center><button type="button" class="edit" title="Edit this row"></center></td><td><center><button type="button" class="delete" title="Remove this row"></center></td></tr>');
also paste this line before the above code
$('[id$=qty]').val("");
Related
I want a situation where I can append the indexes of an array as options in a select. The code below fails.
<?php
$str4 = "select * from fee_names where status = '1' ";
$res4 = mysql_query($str4) or die(mysql_error());
while ($r4 = mysql_fetch_assoc($res4)){
$name = $r4['NAME'];
array_push($fee_nameArray,$name);
}
>?
<input type="text" name="fee_name" id="fee_name" value="<?php echo $fee_nameArray; ?>">
$('#addClasses').click(function(){
var arrayNAme = $('#fee_name').val();
//alert(arrayNAme.length); return false;
row++;
$('#count').val(row);
var feeName = "feeName"+row;
var feeCat = "feeCat"+row;
var freq = "freq"+row;
var others = "others"+row;
var mandate = "mandate"+row;
var rowID = "rowID"+row;
$('#table_mile35').prepend('<tr id="' + rowID + '"><td><select class="form-control" id="' + feeName + '" name="' + feeName + '" required><option value="" selected="selected">--Choose Class--</option>'
for (i = 0; i < arrayNAme.length; i++) {
'<option value="' + arrayNAme[i] + '">' + arrayNAme[i] + '</option>'
}
'</select></td><td><input type="text" class="form-control input-sm " name="' + feeCat + '" id="' + feeCat + '" placeholder="school fees related, club related" required></td><td><input type="text" class="form-control input-sm " name="' + freq + '" id="' + freq + '" placeholder="Yearly, Monthly" required></td><td><textarea type="text" class="form-control input-sm" name="' + others + '" id="' + others + '" placeholder="other relevant information" ></textarea></td><td><input type="checkbox" name="' + mandate + '" id="' + mandate + '" value="1"></td></tr>');
});
if arrayNAme is an array, Use like this:
$('#addClasses').click(function(){
var arrayNAme = $('#fee_name').val();
arrayNAme = arrayNAme.split(',');
row++;
$('#count').val(row);
var feeName = "feeName"+row;
var feeCat = "feeCat"+row;
var freq = "freq"+row;
var others = "others"+row;
var mandate = "mandate"+row;
var rowID = "rowID"+row;
var html = '<tr id="' + rowID + '"><td><select class="form-control" id="' + feeName + '" name="' + feeName + '" required><option value="" selected="selected">--Choose Class--</option>';
for (i = 0; i < arrayNAme.length; i++) {
html += '<option value="' + arrayNAme[i] + '">' + arrayNAme[i] + '</option>';
}
html += '</select></td><td><input type="text" class="form-control input-sm " name="' + feeCat + '" id="' + feeCat + '" placeholder="school fees related, club related" required></td><td><input type="text" class="form-control input-sm " name="' + freq + '" id="' + freq + '" placeholder="Yearly, Monthly" required></td><td><textarea type="text" class="form-control input-sm" name="' + others + '" id="' + others + '" placeholder="other relevant information" ></textarea></td><td><input type="checkbox" name="' + mandate + '" id="' + mandate + '" value="1"></td></tr>';
$('#table_mile35').prepend(html);
});
I am supposing value of arrayNAme is comma seperated (for example: Tuition Fee,Book Fee,Registration Fee)
I have the following code that is supposed to shuffle results from my database if a user is in group 3, 4 or 5. The query is outputting the results fine, but when I click the button to shuffle the results, the only results that display then are from group 3. I believe the issue in my JS, but I'm not sure where or why it is only shuffling the group 3 results when my query is selecting all users from group 3,4 and 5 and the output shows that.
Lets say:
Bob is group 3
Joe is group 4.
Bill is group 5
The way my page looks is like this.
Users that need shuffled...
-Bob
-Joe
-Bill
Button - Shuffle
When I click on the Shuffle Button. Only Bob shows up.
What is wrong in my code that would do this?
$query = mysqli_query($con, "SELECT * FROM users WHERE `group` IN (3, 4 ,5)");
echo 'Users to be given draft order: <br>';
$array = array();
while ($row = mysqli_fetch_assoc($query)) {
$array[] = $row;
echo $row['firstname'] . ' ' . $row['lastname'] . '<br>';
}
?>
<form method="POST" name="form">
<input type="submit" value="Create Draft Order" name="shuffle">
</form>
Shuffled results: <br>
<div class="main-bag">
<div class="shuffle_results" id="results"></div>
</div>
<form method="post">
<input type="submit" value="Finalize Draft Order" name="insert">
var displayResults = function(data){
var i = 0;
var lineheight = 24;
var time = 3000;
var interval = setInterval(function(){
if( i <= data.length){
console.log( data[i] );
$('#results').append('<div class="result">' +
//'<div class="shuffle_results">' + data[i].firstname + ' ' + data[i].lastname + '</div>' +
'<div class="shuffle_results">' + data[i].drafted_order + ' '+ data[i].firstname + ' ' + data[i].lastname + '</div>' +
'<input type="hidden" name="count[]" value="' + data[i].drafted_order + '">' +
'<input type="hidden" name="firstname[]" value="' + data[i].firstname + '">' +
'<input type="hidden" name="lastname[]" value="' + data[i].lastname + '">' +
'<input type="hidden" name="id[]" value="' + data[i].id + '">' +
'<input type="hidden" name="username[]" value="' + data[i].username + '">' +
'<input type="hidden" name="email[]" value="' + data[i].email + '">' +
'</div>');
var $this = $('.shuffle_results:last');
$this.show().animate({
'left': 0 + 'px',
'bottom': + '0px'
//$(document).height() - (lineheight * data.length)
}, {
duration: time
});
i++;
} else {
clearInterval(interval);
}
}, 3000);
};
See below code. I am creating 2 text fields at a time. Now how could I type on one text field and make the other twin text field have the same values simultaneously?
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
<script>
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..."/>' + '<br>' + '</div>' + '</div>');
$(OuterWrapper).append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '">' + '</div>');
x++;
return false;
});
});
</script>
I created a fiddle that I think does what you want: http://jsfiddle.net/3h1h5j7y/
Here is the code.
HTML
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
JavaScript
I added a data- attribute to the inputs with the tfCont id so that they can operate in pairs as they are added.
Also, I am using the on() method so that objects can be added dynamically. It is filtering on the fTypex class.
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..." data-tfcount="' + tfCont + '"/>' + '<br>' + '</div>' + '</div>');
$("#OuterWrapper").append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '" data-tfcount="' + tfCont + '">' + '</div>');
x++;
return false;
});
$(document).on("click blur keyup", "input.fTypex", function() {
var tfc = $(this).data("tfcount");
$("#tf_" + tfc).val(this.value);
});
});
I had to change $(OuterWrapper) from your example to $("#OuterWrapper") because there was not a variable.
Try something like this :
use onkeyup to call a function which binds the values
HTML
<body>
<input id='ip1' onkeyup='updateOther(this);' type='text'>
<input id='ip2' type='text'>
<script src="script.js"></script>
</body>
JS:
function updateOther(obj){
$('#ip2').val($(obj).val()) ;
}
http://plnkr.co/edit/dpwav5fGcisZcjBIzYyz?p=preview
I have the following code which adds an element to the DOM:
//if (params[i].UIControlType == "Textbox") {
// $("#parameters").append('<li><label for="' + RemoveIllegalCharacters(params[i].Name) +
// '" class="form-field">' + params[i].Name + unitofmeasure + '</label>' +
// '<input type="text" id="' + RemoveIllegalCharacters(params[i].Name) +
// '" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field parameter" /></li>');
// $("#" + RemoveIllegalCharacters(params[i].Name)).val(params[i].FloatValue);
//}
if (params[i].UIControlType == "Textbox") {
$("#parameters").append('<li><label for="ID_' + params[i].Id) + '" class="form-field">' + params[i].Name + unitofmeasure + '</label>' + '<input type="text" id="ID_' + params[i].Id + '" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field parameter" /></li>';
$("#ID_" + params[i].Id).val(params[i].FloatValue);
}
The first set of code (commented out) works. It appends the element using a value such as "ValveIR" for the id, but the second block of code (not commented out) uses a Guid as the id. Attached to the ID_ (needed to have the id start with a alpha character) will be like this: ID_db72d0ba-aebd-4a98-8a1b-7042936dff49.
Why would this not work? I need the ID and not the name for other code to work.
Any help appreciated.
What is wrong with my code?
var form = $('#actor-form');
form.append('<input name ="actor-id" type="hidden" value="' + datum.id + '">');
form.append('<input name ="actor-email" type="hidden" value="' + datum.email + '">');
})
})( jQuery );
It keeps throwing errors, should it be???
var form = $('#actor-form');
form.append('<input name ="actor-id" type="hidden" value="' + datum.id + '">
<input name ="actor-email" type="hidden" value="' + datum.email + '">');
})
})( jQuery );
I'm not sure. Please help!
If type is hidden then you can't test. i changed type as text to see if it is working or not. has to check your datum object also once for sure.
$(function(){
var form = $('#actor-form');
var datum = {};
datum.id = 1001;
datum.email = "welcome#gmail.com";
form.append('<input name="actor-id" type="text" value="' + datum.id + '">');
form.append('<input name="actor-email" type="text" value="' + datum.email + '">');
});
(function($) {
// here initialize datum variable
var form = $('#actor-form');
form.append('<input name ="actor-id" type="hidden" value="' + datum.id + '">');
form.append('<input name ="actor-email" type="hidden" value="' + datum.email + '">');
})( jQuery );