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>
Related
How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});
Now, when the 1st row value change, the 2nd and 3rd row change accordingly.
The problem is this's hard code, i don't know the no of rows as it's generated from the database.Any idea?Many thanks
$("#A1").keyup(function() {
$("#B1").val($("#A1").val());
});
$("#A1").keyup(function() {
$("#C1").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
you can just select all inputs and update values for all.
$("#A1").keyup(function() {
$("input").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
Also if you want to select a few you can select multiple ids separated by commas. like this:
$("#A1").keyup(function() {
$("#B1, #C1").val($("#A1").val());
});
Different from other answers given here, changing all input elements is too risky in my opinion. What I would suggest id adding a class to all input fields you wish to change, and changing your function to a JQuery selector according to this class (In the example below, the class I added is called changable).
$("#A1").keyup(function() {
$(".changable").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" class="changable" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" class="changable" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" class="changable" value=""></td>
</tr>
You can assign the value to all the inputs in your HTML, like this:
$("#A1").keyup(function() {
$("input").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
I am learning php and want to set the display text for a button that I have. I know that you can use javascript to change the button text,but that (at least from what I have seen) works for .onclick I want the button text to be changed when the page loads. By default the button text on my page when it loads displays Submit Query when my page loads I want the text to read Button on Page
Is there a way using php to 1) set the button text and 2) have it span 2 rows in the table?
This is the code I am working with:
<html>
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td rowspan="2"><input type="submit" name="btn123" text="Button On Page"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
You should use value instead of text for your submit button
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btn123" value="<?php echo 'Button On Page'; ?>" style="width:100%"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
If you always know what you want your button to say, you don't need php or javascript. You can just use the html "value" attribute. You are incorrectly using a attribute labled "text", you should use "value". Update your code to the following.
Change your button html from:
<input type="submit" name="btn123" text="Button On Page">
To:
<input type="submit" name="btn123" value="Button On Page">
Edit:
In order to have your button go full width. You should use "colspan" instead of "rowspan". Your td is in a row, and needs to span columns.
Change this code from:
<td rowspan="2"><input type="submit" name="btn123" value="Button On Page"></td>
to (note that I added an id of "button" to your button):
<td rowspan="2"><input type="submit" id="button" name="btn123" value="Button On Page"></td>
Then add a little css:
#button{
width: 100%;
}
Here is a fiddle with a working example:
https://jsfiddle.net/joeydehnert/m1ttcr86/
I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>
You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>
I have text boxes in HTML like:
<table id="tbl">
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
</table>
Now I want to fill the TextBoxes in first row with some value on onchange event of another textbox.
How should I do it?
The following answer by Rahul Fills all the textboxes with the same value but I want to only first 2 tds of first tr of given table with different values.
Please Help.
It would be better to use a js library like jQuery. In jQuery you can do like this.
$(function(){
$("yourtextboxselector").change(function(){
$("#tbl1 tr:first input:text").each ( function(){
$(this).val('new value');
});
});
});
<table id="tbl1">
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
</table>