I'm working on a web application that gives user the chance to input more names as user wishes. the form has a link that has to perform an addition of textboxes on click of that link.
i know there is a way to use jquery to do that but currently don't know why cos i just moved to jquery from angularjs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#field').append('<td>Textbox'+id+'</td>');
$('#more').append('<td><input type="text" id='+id+' name="text'+id+'"></td>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
or try this one
$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#more td').append('<input type="text" id='+id+' name="text'+id+'">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
input{
margin-bottom: 10px;
}
</style>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
First you have to identify better your elements. Let's put an id for table, an id for add more fields link and a class for tr model.
Then we have to copy all html you want to duplicate.
Then append it to table.
Remember that doing this, when you submit, all those duplicate parameters will become an array of values.
Let's refactor some bad code here too.
Since we are duplicating fields we need to remove Id attribute of them all.
I'm moving add link outside the table and removing those blank tds. Also write a good table with thead and tbody.
When we want to add field, we want to remove too. So let's create a link to remove.
function cloneTrModel() {
return $('.model').first().clone();
}
var trModel = cloneTrModel();
function setRemove() {
$(".remove" ).click(function() {
$(this).closest('tr').remove();
});
}
setRemove();
$( "#add" ).click(function() {
$("#contactTable tbody").append(trModel);
trModel = cloneTrModel();
setRemove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<strong style="float: right;">Add More Fields</strong>
<table id="contactTable" width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="model">
<td class="inner"><input type="text" name="name[]"></td>
<td><input type="text" name="address[]"></td>
<td><input type="text" name="age[]"></td>
<td><input type="text" name="phone_number[]"></td>
<td>Remove</td>
</tr>
</tbody>
</table>
</form>
Something like that
$( "#add" ).click(function() {
$( ".inner" ).append( "<input type='text' name='name' id='name'>" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td class="inner"><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
Related
Issue: Word is wrapping when I am typing in the html page. But, after downloading the form as PDF, it is not showing the word as wrapped. Please see the screenshot below:
Before downloading
After downloading
// download contents of the page
document.getElementById("download").addEventListener("click", () => {
const formBox = document.getElementById("formBox");
var opt = {
margin: 0,
filename: "caseFile" + request + ".pdf",
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
};
html2pdf().from(formBox).set(opt).save();
})
<form id="formBox">
<table id="caseInfo">
<tr>
<th colspan="2">Case Info</th>
</tr>
<tr>
<td>Date of Offense</td>
<td>
<input type="date" id="dateOffense">
</td>
</tr>
<tr>
<td>Time of Offense</td>
<td><input type="time" id="timeOffense"></td>
</tr>
<tr>
<td>Location of Offense</td>
<td><input type="text" id="locationOffense"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" id="caseCity"></td>
</tr>
<tr>
<td>Zip</td>
<td><input type="text" id="caseZip"></td>
</tr>
<tr>
<td>Type of Offense</td>
<td><input type="text" id="typeOffense"></td>
</tr>
</table>
<br>
<div class="row">
<table class="column" id="caseAuthorizedBy">
<tr>
<th colspan="2">Case Authorized By</th>
</tr>
<tr>
<td>Consent</td>
<td>
<input type="radio" name="search" id="consent">
</td>
</tr>
<tr>
<td>Search Warrant</td>
<td><input type="radio" name="search" id="searchWarrant"></td>
</tr>
<tr>
<td>Deceased</td>
<td><input type="radio" name="search" id="Deceased"></td>
</tr>
<tr>
<td>Other(Specify)</td>
<td><input type="radio" name="search" id="otherSearch"></td>
</tr>
</table>
<br>
<table class="column" id="custodyInformation">
<tr>
<th colspan="2">Custody Info</th>
</tr>
<tr>
<td>In-Custody</td>
<td> <input type="radio" name="custody" id="inCustody"></td>
</tr>
<tr>
<td>Not In-Custody</td>
<td><input type="radio" name="custody" id="notInCustody"></td>
</tr>
</table>
</div>
<br><br>
<div id="root0"></div>
<!-- <hr> -->
<br><br>
<div id="analysisDiv">
<table id="analysisTable">
<tr>
<th colspan="1">Analysis</th>
</tr>
<tr>
<td><textarea id="analysis" rows="15" cols="20" wrap="hard" name="text" /></textarea>
</td>
</tr>
</table>
</div>
<br>
</form>
<!--PDF download button-->
<div class="downloadButton">
<button class="button-15" id="download">Download PDF</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I need help with this. I have tried many examples I found online. But couldn't find anything helpful. I am new to JavaScript, so I don't know any effective way of doing this. If my javascript is incorrect or not an effective way of doing it feel free to provide new code or way of doing this. I am totally lost. Help would be appreciated. Thanks!
I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.
You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>
I'm trying to catch the data based on the id's after clicking the button (like store them) in order to use it for inserting needed id's afterwards into the DB. The js written is not working as expected, any ideas what is missing? Thank you for the support.
<script>
function goo() {
idprod=$("#idprod").val();
nprod=$("#nprod").val();
lastprod=$("#lastprod").val();
solarprod=$("#solarprod").val();
locprod=$("#locprod").val()
}
</script>
<form name="goo" method="post">
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Lastname</th>
<th>WK_Solar</th>
<th>Location</th>
<th>Save</th>
</tr>
<tr>
<td id="idprod">P1</td>
<td id="nprod">James</td>
<td id="lastprod">Lee</td>
<td id="solarprod">$1555</td>
<td id="locprod">Queens</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
<tr>
<td id="idprod">P2</td>
<td id="nprod">Marc</td>
<td id="lastprod">Hoobs</td>
<td id="solarprod">$955</td>
<td id="locprod">Bronx</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
</table>
</form>
1- You are using val which is the attr Value. you should use html() or text() to get the value.
2- You have two rows, you should browse those two rows and get the data from each row
function goo() {
var firstRow = $(".test tbody tr").last();
idprod=firstRow.find("#idprod").html();
nprod=firstRow.find("#nprod").html();
lastprod=firstRow.find("#lastprod").html();
solarprod=firstRow.find("#solarprod").html();
locprod=firstRow.find("#locprod").html()
console.log(idprod)
}
$(document).ready(function(){
goo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="goo" method="post">
<table border="1" class="test">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Lastname</th>
<th>WK_Solar</th>
<th>Location</th>
<th>Save</th>
</tr>
</thead>
<tr>
<td id="idprod">P1</td>
<td id="nprod">James</td>
<td id="lastprod">Lee</td>
<td id="solarprod">$1555</td>
<td id="locprod">Queens</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
<tr>
<td id="idprod">P2</td>
<td id="nprod">Marc</td>
<td id="lastprod">Hoobs</td>
<td id="solarprod">$955</td>
<td id="locprod">Bronx</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
</table>
</form>
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" /></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" /></td>
</tr>
</table>
</form>
I have this table and now I want to get the value of each of input type. how do I get it.
I've tried:
document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML);
But it did not return anything.
You could use querySelectorAll() like :
document.querySelectorAll('#ResultSheet input');
The loop through the result like the snippet below shown.
Hope this helps.
var inputs = document.querySelectorAll('#ResultSheet input');
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].value);
}
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" value="1"/></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" value="2"/></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" value="3"/></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" value="4"/></td>
</tr>
</table>
</form>
Use <form> property elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
Example: https://jsfiddle.net/8co9v0ye/
I am having a function in Javascript which is updating the textbox in the div to get updated html of div but it gives me blank value instead of updated one, Is anybody having idea why? Initialy the div is blank as below, and then I
<div id="editSeriesData">
<table cellpadding="5" cellspacing="0" width="400px">
<tr>
<td class="tableCell">
<table cellpadding="5" cellspacing="0">
<tr>
<td>Series</td>
<td><input type="text" value="" name="seriesid" id="seriesid" readonly /></td>
</tr>
<tr>
<td>Name</td>
<td width="30%"><input type="text" name="seriesname" id="seriesname" value="" /></td>
</tr>
<tr valign="top">
<td>Description</td>
<td><textarea rows="5" cols="50" name="description" id="description"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="submit" id="submit" value="Submit" onclick="javascript:validateFrm();" class="text ui-widget-content ui-corner-all" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
And my Javascript method is:
function addEditSeries(seriesId){
document.getElementById('seriesid').value=seriesId;
document.getElementById('seriesname').value="dummy";
document.getElementById('description').value="dummy";
setTimeout(function(){
alert($('#editSeriesData').html());
showwindow('','','280','500','Product-Pack Series',true, true,$('#editSeriesData').html());
}, 1000);
}
The alert() shows me whole div but without the updated value which I updated in addEditSeries() method. The value of the input fields remain as default.