Basically I've had a headache trying to solve this, I want to create a few controls with JS (using jquery) but I also want to add a remove button for them, my attempt is below:
html:
<div class=col-lg-6>
<h1>Pieces</h1>
<form method=post>
<div id=pieces></div>
<button class='btn btn-success' id=addpiece>Add Piece</button>
<button class='btn btn-primary'>Submit</button>
</form>
</div>
And the JS:
$(document).ready(function(){
var counter = 1;
$("#addpiece").click(function (e) {
$("#pieces").append('<label>Piece ' + counter + ': </label><br>' +
'<p id=added'+counter+'><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' +
'<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' +
counter + '" required>cm x ' +
'<input min=0 step=0.1 style=width:70px; type="number" name="height' +
counter + '" required>cm x ' +
'<input min=0 step=0.1 style=width:70px; type="number" name="length' +
counter + '" required>cm</div></div>' +
'<div class=row><div class=col-lg-2><label>Weight:</label></div>' +
'<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' +
counter + '" required>KG<br>' +
'<input type=hidden name=counter value=' +
counter + '><button class="btn btn-danger" id="remove' + counter + '">X</button>\<script type="text\/javascript"\>' +
'$("#remove' + counter + '").click(function (e) { $( "#added'+counter+'" ).remove(); return false; } \<\/script\>' +
'</div></div></p><br>');
counter++;
return false;
});
});
Check out my fiddle for clearer view:
http://jsfiddle.net/c1Lv7ska/
Since you are dynamically creating the remove button, use event delegation to register the remove handler.
Also it is better if you have a container element which will contain all the elements for a piece, like the one I added(<div class="piece">) to wrap all the elements.
$(document).ready(function () {
var counter = 1;
$("#addpiece").click(function (e) {
$("#pieces").append('<div class="piece"><label>Piece ' + counter + ': </label><br>' + '<p id=added' + counter + '><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="height' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="length' + counter + '" required>cm</div></div>' + '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + counter + '" required>KG<br>' + '<input type=hidden name=counter value=' + counter + '><button type="button" class="btn btn-danger remove" id="remove' + counter + '">X</button>' + '</div></div></p><br></div>');
counter++;
return false;
});
$("#pieces").on('click', '.remove', function(){
$(this).closest('.piece').remove()
})
});
Also read
Event binding on dynamically created elements?
Demo: Fiddle
Related
i have a table with values. some of values ends with specific string so i want to check whether input name attribute contains specific string using if loop.
i have tried using below code but it is not working:
$("#tabTax tbody tr").each(function () {
if (this.name.endswith('taxtype')) {
$(this).replaceWith('<tr id="rowTax' + $(this).find("input[name$='taxtype']").val() + '><td hidden="hidden"></td><td> ' + $(this).find("input[name$='taxtype']").val() + '(' + parseFloat($(this).find("input[name$='Taxperce']").val()) + '%)</td><td><input type="text" name= Bookingtax[' + rowcount + '].TaxAmount disabled="disabled" class="form-control chargesinputfield" value=' + ($(this).find("input[name$='Taxperce']").val() * sum / 100).toFixed(2) + '></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].TaxID id=' + $(this).find("input[name$='TaxID']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='TaxID']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].taxtype id=' + $(this).find("input[name$='taxtype']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='taxtype']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].Taxperce id=' + $(this).find("input[name$='Taxperce']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='Taxperce']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].TaxAmount id=' + $(this).find("input[name$='TaxAmount']").val() + ' type="text" class="form-control" value=' + ($(this).find("input[name$='Taxperce']").val() * sum / 100).toFixed(2) + ' ></input></td></tr>')
rowcount++;
} else {
$("#discountrate").replaceWith('<tr id="discountrate"><td> Discount</td><td hidden="hidden"></td><td><input type="text" name="Discountrate" id="txtDiscountrate" class="form-control chargesinputfield" value="' + $("#txtDiscountrate").val() + '"></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].Taxperce id=' + $(this).find("input[name$='Taxperce']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='Taxperce']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].TaxAmount id=' + $(this).find("input[name$='TaxAmount']").val() + ' type="text" class="form-control" value=' + ($(this).find("input[name$='Taxperce']").val() * sum / 100).toFixed(2) + ' ></input></td></tr>')
}
})
I tried with this if (this.name.endswith('taxtype')), but it is not working.
Please help. Thanks in advance...
Try use $(this).is("[name$=taxtype]")
This will check if the name ends with the string taxtype ( $= means ends with)
Demo
$("#tabTax tr").each(function() {
if ($(this).is("[name$=taxtype]")) {
console.log("name ends with taxtype")
if ($(this).is("[name=taxtype]")) {
console.log("this only match taxtype")
}
} else {
console.log("name does not ends with taxtype")
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabTax">
<tr></tr>
<tr name="taxtype"></tr>
<tr></tr>
<tr name="somethingtaxtype"></tr>
</table>
I used JQuery for dynamic creation of controls. And
I got some error like
JavaScript runtime error: Unable to get property 'html' of undefined
or null reference
Script As Follows:
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Width #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="txtWidth' + counter + '" value="" >'
+ '<label>Height #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="txtHeight' + counter + '" value="" >'
+ '<label>Length #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="txtLength' + counter + '" value="" >'
+ '<label>Weight #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="txtWeight' + counter + '" value="" >'
);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Width #" + i + " : " + $('#txtWidth' + i).val();
msg += "\n Height #" + i + " : " + $('#txtHeight' + i).val();
msg += "\n Length #" + i + " : " + $('#txtLength' + i).val();
msg += "\n Weight #" + i + " : " + $('#txtWeight' + i).val();
}
alert(msg);
});
});
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Width #1 : </label><input type='textbox' id='txtWidth1' >
<label>Height #1 : </label><input type='textbox' id='txtHeight1' >
<label>Length #1 : </label><input type='textbox' id='txtLength1' >
<label>Weight #1 : </label><input type='textbox' id='txtWeight1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
These are the codes.Kindly please help me to solve this.,
remove the line breaks in "newTextBoxDiv.after().html()"
I am using XSL to write this page, and when I hit a checkbox it sends the information to my javascript function. This all works in IE, but Chrome it does not. The problem is, after I hit the checkbox, the field comes back as "undefined" like so
<div id="Part1" value="0-SER-MN">undefined</div>
Where it is initially like
<div id="Part1" value="0-SER-MN">0-SER-MN</div>
My guess would be that the value being returned is "null" but I don't know why? Can anyone help? Thanks.
<td colspan="2">
<div>
<xsl:attribute name="id">Part<xsl:value-of select="position()"/></xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="Part"/></xsl:attribute>
<xsl:if test="ErrorMessage">
<input type="hidden" name="partNumber">
<xsl:attribute name="value"><xsl:value-of select="Part"/></xsl:attribute>
</input>
<input type="hidden" name="TempKey">
<xsl:attribute name="value"><xsl:value-of select="TempKey"/></xsl:attribute>
</input>
</xsl:if>
<xsl:value-of select="./Part"></xsl:value-of>
</div>
</td>
SO here is the javascript that is selected with the checkbox
function turnOnOrder(index, tempKey)
{
document.getElementById('Part' + index).innerHTML = '<input type="hidden" name="partNumber" value="' + document.getElementById('Part' + index).value + '"></input> <input type="hidden" name="TempKey" value="' + tempKey + '"/>' + document.getElementById('Part' + index).value;
document.getElementById('Location' + index).innerHTML = '<input type="hidden" name="location" value="' + document.getElementById('Location' + index).value + '"></input> ' + document.getElementById('Location' + index).value;
document.getElementById('Site' + index).innerHTML = '<input type="hidden" name="siteCode" value="' + document.getElementById('Site' + index).value + '"></input> ' + document.getElementById('Site' + index).value;
document.getElementById('PONumber' + index).innerHTML = '<input type="hidden" name="origPO" value="' + document.getElementById('PONumber' + index).value + '"></input><input size="20" maxlength="20" type="text" name="PONumber" value="' + document.getElementById('PONumber' + index).value + '"></input>';
document.getElementById('Quantity' + index).innerHTML = '<input type="hidden" name="OrderQty" value="' + document.getElementById('Quantity' + index).value + '"></input> ' + document.getElementById('Quantity' + index).value;
if(document.getElementById('viewPrice') == null)
document.getElementById('Price' + index).innerHTML = '<input type="hidden" name="Price" value="' + document.getElementById('Price' + index).value + '"></input> ';
else
document.getElementById('Price' + index).innerHTML = '<input type="hidden" name="Price" value="' + document.getElementById('Price' + index).value + '"></input> ' + document.getElementById('Price' + index).value;
document.getElementById('UserId' + index).innerHTML = '<input type="hidden" name="UserId" value="' + document.getElementById('UserId' + index).value + '"></input> ';
//document.getElementById('InactiveOverride' + index).innerHTML = '<input type="hidden" name="InactiveOverride" value="' + document.getElementById('InactiveOverride' + index).value + '"/>';
//document.getElementById('MpqMoqOverride' + index).innerHTML = '<input type="hidden" name="MpqMoqOverride" value="' + document.getElementById('MpqMoqOverride' + index).value + '"/>';
document.getElementById('Other' + index).innerHTML = '<input type="hidden" name="Supplier" value="' + document.getElementById('Supplier' + index).value + '"></input><input type="hidden" name="ICST" value="' + document.getElementById('ICST' + index).value + '"></input><input type="hidden" name="backflush" value="' + document.getElementById('backflush' + index).value + '"></input><input type="hidden" name="Billing" value="' + document.getElementById('Billing' + index).value + '"></input><input type="hidden" name="InactiveOverride" value="' + document.getElementById('InactiveOverride' + index).value + '"/><input type="hidden" name="MpqMoqOverride" value="' + document.getElementById('MpqMoqOverride' + index).value + '"/>';
}
This seems to be an javascript DOM access issue. And has nothing to do with xslt.
The problem is based on the difference between DOM property and html attributes and the different handling in browsers.
In most cases using the DOM property (dom-elment.attribute-name) should work. Because the browser synchronize html attribute to DOM property. But this does not happen (in Chrome etc.) for customer attribute (e.g your value attribute at div).
Therefore you should use
document.getElementById('Part' + index).getAttribute('value')
in replacement for document.getElementById('Part' + index).value
This should work in all reasonable modern browsers (e.g IE > 6)
I am using jQuery Mobile to display a table.
However when i append a new row using addMore button, the display is off! Why is it so? it is suppose to follow the first row. Ans also, it is displayed in black theme on my browser... but it is suppose to be white as in the fiddle. why?
Here is my fiddle: http://jsfiddle.net/BgxKW/1/
this is the code to add new row
var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
'<td class="small">' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="number_' + currentIndex + '">Response Number</label>' +
'<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
'</div></td><td>' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="label_' + currentIndex + '">Description</label>' +
'<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
'</div></td></tr>';
Also, how can i remove the row?
You want to do $(".config").trigger("create"); at the final to resolve style problem.
Updated fiddle link is
http://jsfiddle.net/BgxKW/7/
$("#addMore").click(function () {
currentIndex = $(".config tr:last td:first").text()
if(currentIndex == ""){currentIndex = 0}
currentIndex = parseInt(currentIndex) + 1
var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
'<td class="small">' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="number_' + currentIndex + '">Response Number</label>' +
'<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
'</div></td><td>' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="label_' + currentIndex + '">Description</label>' +
'<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
'</div></td></tr>';
++currentIndex;
$('#labels .config tr:last').after(addmore);
$(".config").trigger("create");
});
$("#remove").click(function(){
$(".config tr:last").remove();
});
Note: I fixed the style problem and remove function.
I would like to use slideDown() with my appendTo()
here is my present code
$(document).ready(function() {
var scntDiv = $('#add_words');
var wordscount = 1;
$("#add_words").on("keyup","input[type='text']",function(e) {
if($(this).attr("data-isused")!="true"){
$(this).attr("data-isused","true");
wordscount++;
$('<div class="line">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>').appendTo(scntDiv);
// i++
return false;
}
});
});
'
<div id="add_words">
<div class="line">Word 1<input class="input1" type="text" value="1" /></div>
</div>
my question is that Is there any possibility to apply slideDown() with my code ?
Make sure the newly appended element is hidden first:
$(element).hide().appendTo(someOtherElement).slideDown();
If you make the following changes it should work:
$('<div class="line" style="display:none">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>').appendTo(scntDiv).slideDown();
This makes it initially hidden allowing you to slide it down.
I guess you mean that you want to add the HTML to the DOM with appendTo and then use slideDown to show the added content, right?
In that case you need to make sure that the content is hidden when you append it to the DOM:
var html = '<div class="line">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>';
$(html).hide().appendTo(scntDiv).slideDown();
Note Took the liberty to break all your HTML out into a variable for the sake of readability