Codeigniter: Table List using javascript and php - javascript

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>

Related

HTML Submit table dependent upon checkbox

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

Enable / Disable many radioButtons having different ids

What I have built so far is that I have a form with a few radioButtons and a password field.
Now, I want to activate the password field as soon as the corresponding radioButton is clicked.
That would work so far, if id for all password fields would not be the same.
This is my code so far:
<form action="#" th:action="#{/passwordaenderung}" th:object="${UserCreationDto}" method="post" onsubmit="return checkPassword()">
<fieldset>
<table>
<thead>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" id="raidoButtonCheck" onclick="document.getElementById('pwd').removeAttribute('disabled')" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" id="pwd" disabled/></td>
</tr>
</tbody>
</table>
<input type="submit" id="submitButton" th:value="Speichern">
</fieldset>
</form>
So, does it look like in my browser:
And so does the interpreted / compiled code look like:
I hope someone can tell me please how do I get a different id for all password fields so that the correct one will be enabled via the
document.getElementById('pwd').removeAttribute('disabled')
You can dynamically set the ids of each input using th:id. You can use the iterator index so that it can be unique. The following code should work.
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'document.getElementById('''+ itemStat.index +''').removeAttribute(''disabled'')'}" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>
If you want to disable all other inputs, when you click on one of them, then I would recommend adding a class to all inputs and changing your on click for function.
JS
<script>
function inputClick(id) {
var passwordFields = document.getElementsByClassName("passwordField");
for(i = 0; i < passwordFields.length; i++) {
passwordFields[i].disabled = true;
}
document.getElementById(id).removeAttribute('disabled');
}
</script>
HTML
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'inputClick('''+ itemStat.index +''')'}" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input class="passwordField" type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>
The js can be added somewhere in the head or body or in a external js file.

Changing Text in Javascript From HTML Input Field

So I am setting up Jeopardy game.
For the grid I am using HTML Tables. The first row has generic text right now ("Category 1 Name" for example).
Above the first row there will be another table with an HTML input box where the user can change the category name into whatever they want.
My problem is, I thought I would use document.getElementById("").innerHTML etc. to do this but that does not work.
How do I make it so that a user can input text into the form field and that entry changes the text in the table cell (td)?
This is what I have right now for the input field:
<table id="table1">
<tr>
<td>
<form>
<input type="text" placeholder="Category 1 Name">
<button>Submit</button>
</form>
</td>
</tr>
</table>
This is what I have for the box that I want to change the text:
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>
Thank you.
Would this solution be OK for you?:
function setCat1Name() {
document.getElementsByClassName("cat1")[0].textContent = document.getElementById("myInput").value
}
<table id="table1">
<tr>
<td>
<form>
<input id="myInput" type="text" placeholder="Category 1 Name">
<button onclick="setCat1Name()">Submit</button>
</form>
</td>
</table>
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>

how to do dynamic divs - expand collapse loop

I need a function that allows my client to add more divs on the form or not, clicking on a button (+) for example, like a loop
this loop should repet divs and the button to add more divs, like bellow on the pic
does anybody has an ideia of how to do it?
is expand collapse the best way of doing it?
Thank you very much!
I am not certain what is your desire so I post both options:
If you want to expand hidden existing fields and asuming you can use JQUery:
<table>
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
<tr class="hiddenarea" style="display: none;">
<th>Field3 (Hidden)</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$(".hiddenarea").toggle();
});
</script>
///////////////////////////////////
The second solution to add a new line to the table is:
<table id="mytable">
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
});
</script>

How to automagically check radio button on select of dropdown?

I've seen a few answers for this already, but none that I have been able to make work. I have the following form:
<form method="post" action="submit.php">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><strong>With selected</strong><br /> </td>
</tr><tr>
<td colspan="2"><input type="radio" name="select_action" value="delete" id="delete"/><label for="delete"> delete</label></td>
</tr>
<tr>
<td><input type="radio" name="select_action" value="assign_to_room" id="assign_to_room"/> assign to room:</td>
<td><label for="assign_to_room">
<select name="assign_to_room"></select></label></td>
</tr>
<tr>
<td><input type="radio" name="select_action" value="assign_to_board" id="assign_to_board"/> assign to board:</td>
<td><label for="assign_to_room">
<select name="assign_to_board"></select></label></td>
</tr>
<tr><td colspan="2"><br /><input type="submit" value="submit"/></td></tr>
</table>
</form>
In Chrome when I select the dropdown, it automatically selects the corresponding radio button, but in IE it does not. How do I achieve this with cross-browser support? I don't mind using JS if I have to.
Try using an on change event to get a radio button by id then change it's value to selected. Just an idea.

Categories