HTML Submit table dependent upon checkbox - javascript

I have a table that is paginated that will allow end users to modify inline in the table itself.
I am using a submit button that redirects and saves the input with SSJS.
My table could potentially have 5k+ records and the table will be paginated.
I would like to only update records that have a checkbox that is checked.
I am using this link to test
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
with this code:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<table>
<tr>
<td>
Check for save
</td>
<td>
First name
</td>
<td>
Last Name
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="horns" name="feature" value="horns" />
</td>
<td>
<input type="text" name="firstname" value="Mic1key">
</td>
<td>
<input type="text" name="lastname" value="Mouse">
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="horns" name="feature" value="horns" />
</td>
<td>
<input type="text" name="firstname" value="Mic1key">
</td>
<td>
<input type="text" name="lastname" value="Mouse">
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
so this works because in the SSJS we can check which ones have a value of checked but I have a fear of performance issues once 5k+ records are within the table.
Is there anyway to just submit just the records where the checkbox is checked? or is there any ulterior logic?

If you are only wanting the form to submit when the checkbox is checked, you can add an event listener for the 'submit' event and prevent default if the checkbox is unchecked like so:
let submitButton = document.getElementById('mySubmitBtn');
let checkbox = document.getElementById('myCheckbox');
submitButton.addEventListener('submit', function(e){
if(!checkbox.checked){
e.preventDefault();
}
});
This way the form will only submit if the checkbox is checked.
This question looks like it was addressed here Submit only non empty inputs

Related

How would you access a specific cell of a dynamically generated table?

Say I have a table that is generated dynamically:
{% for r in result %}
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" id="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" id="editBtn" value="Edit"/>
</form>
</td>
<td id="itemID">{{r.itemID}}</td>
<td> {{r.title}}</td>
</tr>
{% endfor %}
Now I want to access the itemID of the row where the respective form submit button was pressed. I know the way I have it set up, every single row will have a column with an id "itemID", I just want to know if it's possible to easily reference the rows even if they don't have unique ID's.
Your event handler receives an Event object, which has two properties:
target, which is the element that clicked
currentTarget, which is the element you hooked the event on (which may be an ancestor of target)
I'd probably use event delegation here, hooking click on the table or tbody, so currentTarget would be the table not not particularly helpful, but target will be the button. From the button you can find the row (tr), and then within the row you can find the td for the item.
I'd get rid of all of those ids, though, since ids are required to be unique on the page. Use class names instead. So:
document.getElementById("id-for-the-table").addEventListener("click", function(event) {
const item = event.target.closest("tr").querySelector(".itemID");
// ...use `item` here... For instance, `item.textContent` will be the item ID
});
Live Example:
document.getElementById("the-table").addEventListener("click", function(event) {
const item = event.target.closest("tr").querySelector(".itemID");
// ...use `item` here... For instance, `item.textContent` will be the item ID
console.log("Item ID: " + item.textContent);
});
// Just for the example, I prevent forms being submitted
document.getElementById("the-table").addEventListener("submit", function(event) {
event.preventDefault();
});
<table id="the-table">
<tbody>
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" class="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" class="editBtn" value="Edit"/>
</form>
</td>
<td class="itemID">1</td>
<td> Title 1</td>
</tr>
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" class="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" class="editBtn" value="Edit"/>
</form>
</td>
<td class="itemID">2</td>
<td> Title 2</td>
</tr>
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" class="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" class="editBtn" value="Edit"/>
</form>
</td>
<td class="itemID">3</td>
<td> Title 3</td>
</tr>
</tbody>
</table>
Note that that uses the new(ish) closest method on Element. If you need to support obsolete browsers like IE, you can polyfill it.
Also note that I've used ES2015+ (const), but if (again) you need to support obsolete browsers, you can use var there instead.

how to make a field requried when the checkbox is checked

hello i am new to jsp and javascript, and i would like to a make a field required when the checkbox is checked,
<tr>
<th class="clsTableHeaderLeft">InterCompany</th>
<td class="clsDisplayText">
<% if (!tHideField.equals("")){
out.println(tRecord.get(idxInterComFlag).toString());
}
%>
<input type="checkbox" class="clsInputText" <%=tHideField%> name="txtInterComFlag" onchange="chgStatus(txtStatus);" size="25" maxlength="20"
<%=tRecord.get(idxInterComFlag).toString().equals("Y")?" checked":""%>
/>
</td>
</tr>
<tr>
<th class="clsTableHeaderLeft">Entity Code</th>
<td class="clsDisplayText">
<% if (!tHideField.equals("")){
out.println(tRecord.get(idxInterComCode).toString());
}
%>
<input type="text" class="clsInputText" <%=tHideField%> name="txtInterComCode" size="25" maxlength="20" />
</td>
</tr>
also the checkbox value is 'on' when checked , how can I make it to Y or N? thank you!
I had a same requirement, so i Choose to follow this flow:
Create an onclick function at check box
Get element ID of the html input element that needs to be changed
create new html input element as required and replace it using Java script.
Here is my sample Code:
function fxctco() {
var newHTML="<input type='number' name='fctc' required/>";
document.getElementById("ctc").innerHTML = newHTML;
}
<table><tr><TD ><input type="radio" name="fx"value="YES" onClick="fxctco()"> Yes
<input type="radio" name="fx"value="NO" checked> No</TD></tr>
<tr><TD id="ctc"> <INPUT TYPE="number" NAME="fctc" /></TD></tr>
<tr>
<TD align="center"><INPUT TYPE="submit" class="button" VALUE="submit"></TD>
</tr> </table>

Codeigniter: Table List using javascript and php

table list
My mind is is boggling for this logic.When I click the ADD SECTION button, a modal opens asking for input values. What I want is that, all the values from that modal will be listed on the TABLE below the ADD Section. Each row to have different names for post method. Can please anyone help me? Thanks
If I understood correctly, you want to create multiple rows and then submit them as a form. Use jQuery to append table rows and to create cells containing input fields. You can set those input field names as an array <input type="text" name="section[]" value="somevaluefrommodal">
Basic html layount should look something like this:
$(document).ready(function(){
// click handler
$("#add-row").on("click", function() {
$("table").append('<tr><td><input type="text" name="section[]" value="Section2"/></td><td><input type="text" name="test[]" value="Test2"/></td></tr>');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-row">Add Row</button>
<form>
<table style="width:100%">
<tr>
<th>Section</th>
<th>Test</th>
</tr>
<tr>
<td><input type="text" name="section[]" value="Section1"/></td>
<td><input type="text" name="test[]" value="Test1"/></td>
</tr>
<tr>
<td><input type="text" name="section[]" value="Section2"/></td>
<td><input type="text" name="test[]" value="Test2"/></td>
</tr>
</table>
<input type="submit" />
</form>

Javascript UK Sort code validation with three input field

I have one payment page where I have three field called sort code each field can have 2 two digit I want to write java script code to validate this field and as user type 2 digit in first field its should jump to next field. how to validate static sort code.
$('.input').on('keyup', function(e) {
if ($(this).length == 2) {
$('.next-input').focus();
}
}
You'll have to create a collection of your inputs, and proceed to the next item in the collection after the second letter is typed.
var $inputs = $('.input-class');
$inputs.on('keyup', function() {
if ($(this).val().length == 2) {
$inputs.eq($inputs.index(this) + 1).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<table>
<tr>
<td>
<input type="text" class="input-class input-1">
</td>
<td>
<input type="text" class="input-class input-2">
</td>
<td>
<input type="text" class="input-class input-3">
</td>
<td>
<input type="text" class="input-class input-4">
</td>
<td>
<input type="text" class="input-class input-5">
</td>
</tr>
</table>
</form>
If you'd like a more fine tuned solution, you can add as a data-attribute the selector of the next input
var $inputs = $('.input-class');
$inputs.on('keyup', function() {
if ($(this).val().length == 2) {
$($(this).data('next')).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<table>
<tr>
<td>
<input type="text" class="input-class input-1" data-next=".input-3">
</td>
<td>
<input type="text" class="input-class input-2" data-next=".input-4">
</td>
<td>
<input type="text" class="input-class input-3" data-next=".input-5">
</td>
<td>
<input type="text" class="input-class input-4" data-next=".input-1">
</td>
<td>
<input type="text" class="input-class input-5" data-next=".input-2">
</td>
</tr>
</table>
</form>
This is just the "go to next" code, no validation is performed.

How to check which checkboxes are checked or unchecked in django template?

I'm doing a small project in Django by using Python.
In that, I am dynamically populating a table with data of pending tasks. Each row of the table contains a checkbox field. According to the priority level, number of rows can be less or more.
I Have to stop postback operation on submit button click event if none of the checkboxes are selected.
How do you identify the checkbox name or ID in JavaScript as they are generated dynamically?
html
<form method="post" class="myform" action=".">
<table>
<tbody>
<tr>
<th><label for="checkbox1">Checkbox 1</label></th>
<td><input type="checkbox" id="checkbox1" name="checkbox1" /></td>
</tr>
<tr>
<th><label for="checkbox2">Checkbox 2</label></th>
<td><input type="checkbox" id="checkbox2" name="checkbox2" /></td>
</tr>
<tr>
<th><label for="checkbox3">Checkbox 3</label></th>
<td><input type="checkbox" id="checkbox3" name="checkbox3" /></td>
</tr>
</tbody>
</table>
<input type="submit" class="myform-submit" />
</form>
javascript (assuming jquery)
$(document).ready(function(){
$(".myform-submit").bind("click", function(e) {
e.preventDefault();
var $form = $(this).closest(".myform");
if ($("input:checkbox:checked").length) {
alert("submitting");
$form.submit();
}
});
});
jsfiddle
http://jsfiddle.net/c4urself/xWbEk/

Categories