I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.
Related
I'm trying to make a bulk action function.
What I want:
- Bulk selection in multiple tables, but one <form>
- At every table one select box to select all items inside that table
Example of my code
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function checkAll(table, bx) {
var checkname = document.table.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
checkname[i].checked = bx.checked;
}
}
</script>
Now I got the php part worked, so when I select multiple select boxes, the $_POST returns my values.
Also the Javascript part worked for me, so select all checkboxes per table.
But Javascript and PHP together won't work for me..
How can I fix this to let the JS and PHP work together?
I've tried multiple scripts but none of them worked for me.
The error I get from JS:
Uncaught TypeError: Cannot read property 'getElementsByName' of undefined
What I try, nothing works..
Try the below code
function checkAll(table, bx) {
var checkname = document.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
console.log(checkname[i]);
console.log(bx);
checkname[i].checked = bx.checked;
}
}
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
'this' the parameter you are passing in checkAll() is passed as a string.
I would like to access the html input tag which is present inside a table inside a form as shown below. I have used the function below to access the element but I'm getting undefined in the output:
function checkForm()
{
var table=document.getElementById('register').getElementsByTagName('myTab');
document.writeln(table);
}
The above function returns undefined. Why, and how can it be fixed to return the input that I need?
<!DOCTYPE HTML>
<HEAD>
<META CHARSET = "utf-8">
<TITLE>Register</TITLE>
<link rel="stylesheet" type="text/css" href="reglog.css">
</HEAD>
<BODY>
<h1 align=center>Register with our portal</h1>
<FORM id="register" onsubmit="return checkForm();" METHOD="POST">
<table name="myTab" border = 0 align=center>
<tr >
<td> Username </td>
<td> </td>
<td><input name="username" class=textbox type = text required></td>
</tr>
<tr >
<td> Password </td>
<td> </td>
<td><input name="passwd" class=textbox type = password required></td>
</tr>
<tr >
<td> Confirm Password </td>
<td> </td>
<td><input name="c_password" class=textbox type = password required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <input class=button type = submit value = Register> </td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
Javascript's getElementsByTagName function works, as it's name says, with html tag names (div, table, form, etc). In your case would be getElementsByTagName('table'). Instead you could use getElementsByName.
To get the table element with attribute myTab from the element with id register, you can chain a querySelectorAll() method to a getElementById() :
table = document.getElementById('register').querySelectorAll('table[name=myTab]')[0];
console.log(table)
<h1 align=center>Register with our portal</h1>
<FORM id="register" onsubmit="return checkForm();" METHOD="POST">
<table name="myTab" border=0 align=center>
<tr>
<td> Username </td>
<td> </td>
<td><input name="username" class=textbox type=t ext required></td>
</tr>
<tr>
<td> Password </td>
<td> </td>
<td><input name="passwd" class=textbox type=p assword required></td>
</tr>
<tr>
<td> Confirm Password </td>
<td> </td>
<td><input name="c_password" class=textbox type=p assword required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <input class=button type=s ubmit value=R egister> </td>
</tr>
</table>
</FORM>
Note that getElementsByTagName() get the elements from their name, not from their name attribute.
There are various ways to access form elements. In your code you can access form elements using
var x = document.getElementById("register").elements;
This will give you all the elements in your form. However if you want to access first element you can use something like below code
document.getElementById("register").elements[0].value // 0 is the index as per all the elements present in your form 'register'
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>
//input field where user submit data into mysql database and immediately it shows in table
<form name="form" action="" method="post">
<input type="text" name="pitanje" class="search-input" placeholder="Pitajte..." />
<input class="search-btn" type="submit" value="Go" />
</form>
<table class='table'>
<tr>
<th>ID</th>
<th>Question</th>
<th>Date</th>
<th>Like</th>
<th>Views</th>
<th>Answer??</th>
</tr>
<tr>
<td>1</td>
<td>Question</td>
<td>Date</td>
<td>Views</td>
<td>Like</td>
<td>
<button>Press</button>
</td>
</td>
</tr>
</table>
Best example of that is http://www.incredibox.com/top-50 try to click on some row and you will see. Every row
ok well this is everything but my problem is very small..
the page is setup, the point system is correct all i need to do is have the inputs show match up to the point system and show the alert associated with it.
the issue is when a user enters commands in the text box's it should alert what there rank is (pro,novice,beginner,noob)
<HTML>
<HEAD>
<script>
function system(){
var point=document.world.system.txt_points.value
var tourn=document.world.system.txt_tourn.value
var level=document.world.system.txt_level.value
var check=document.world.system.txt_check.value
var results=document.world.system.txt_results.value
if ((point>=100000)&&(level>10)&&(tourn>25))
{
results=alert("pro status")
}
if((points>=100000)&&(level>10))
{
alert("Novice")
}
if (point>=100000)
{
alert("beginner")
}
if (points<100000)
{
alert("noob")
}
if (check=true)
{
alert("pro")
}
}
</script>
</HEAD>
<BODY>
<form name="world">
<center>
<table border=3>
</center>
<b>
<th><font size='16'>defined</font></th>
</b>
<th><font size='16'>user input</font></th>
</center>
<tr>
<td>How many points have you earned?</td>
<td>
<input type="textbox" name="txt_points" size='50'id='point'>
</td>
</tr>
<tr>
<td>How many tournaments have you played in?</td>
<td>
<input type="text box" size='50'id='tourn' name='txt_tourn'>
</td>
</tr>
<tr>
<td>highest level</td>
<td>
<input type="text box" size='50'id='level' name ='txt_level'>
</td>
</tr>
<tr>
<td>Have you won atleast 1 tournement</td>
<td
><center>
<input type="checkbox"id='check' name=txt_check>
</center>
</td>
</tr>
<tr>
<td>your world of wizards ranking is </td>
<td><center>
<input type="submit"value ="submit">
<br>
<input type ="text box" name ="txt_results">
</center>
</td>
</tr>
</table>
</center>
</form>
Your HTML is riddled with invalid markup. I've cleaned it up a little bit (it still has issues), and added an onsubmit to the form to call your system function. I modified your system function a bit too. You weren't referring to your variables with the right names all the time. (points instead of point, etc.). Next time, do some typo checking before you post a question or code. Generally one or two typos is accepted as just being overlooked, but yours had a lot. Just a few minutes of looking it over on your part would have gotten you tons closer to begin with.
HTML
<form name="world" method="post" onsubmit="system(); return false;">
<table border=3>
<th><font size='16'>defined</font></th>
<th><font size='16'>user input</font></th>
<tr>
<td>How many points have you earned?</td>
<td>
<input type="text" name="txt_points" size='50' id='point'>
</td>
</tr>
<tr>
<td>How many tournaments have you played in?</td>
<td>
<input type="text" size='50' id='tourn' name='txt_tourn'>
</td>
</tr>
<tr>
<td>highest level</td>
<td>
<input type="text" size='50' id='level' name ='txt_level'>
</td>
</tr>
<tr>
<td>Have you won atleast 1 tournement</td>
<td
>
<input type="checkbox"id='check' name=txt_check>
</td>
</tr>
<tr>
<td>your world of wizards ranking is </td>
<td>
<input type="submit"value ="submit">
<br>
<input type ="text box" name ="txt_results">
</td>
</tr>
</table>
</form>
JAVASCRIPT
function system(){
var point=document.world.txt_points.value;
var tourn=document.world.txt_tourn.value;
var level=document.world.txt_level.value;
var check=document.world.txt_check.value;
var results=document.world.txt_results.value
if ((point>=100000)&&(level>10)&&(tourn>25))
{
alert("pro status")
}
if((point>=100000)&&(level>10))
{
alert("Novice")
}
if (point>=100000)
{
alert("beginner")
}
if (point<100000)
{
alert("noob")
}
if (check==true)
{
alert("pro")
}
}