Develop Reference

javascript get/store data from 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>

Insert more fields onclick using jquery

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>

append parent names and ids of textboxes to newly generated ones

I'm able to generate more textboxes for user to input variables on click of a link. what i've noticed is when the new row of textboxes are generated, it generates with name text and id as id. But i want it to have the same names of the original or parent textboxes.
<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td>
</tr>
<tr id="more_vechicle">
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF"><div align="center">
<input type="submit" name="button" id="button" value="Save & Continue" />
</div></td>
</tr>
</table>
JS
$(document).ready(function()
{
$('.add_more').click(function(){
var id=$(':text').length;
$('#more_vechicle td').append('<input class="register-input" type="text" id='+id+' name="text'+id+'">');
});
});

Use a .each() loop to loop over the TDs. Then you can get the first input that's in each TD, clone it, and give it a new ID.
$('.add_more').click(function() {
$('#more_vechicle td').each(function() {
var these_inputs = $(this).find(".register-input");
var id = these_inputs.length;
var new_input = these_inputs.first().clone(true).val('');
new_input.attr('id', function(i, old_id) {
return old_id + id;
});
$(this).append(new_input);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td>
</tr>
<tr id="more_vechicle">
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF"><div align="center">
<input type="submit" name="button" id="button" value="Save & Continue" />
</div></td>
</tr>
</table>

The solution you're looking for is jquery's clone() function (http://api.jquery.com/clone/). Just clone #more_vehicle and insert it before the continue button.
$('.add_more').click(function() {
$('#more_vechicle').clone()
.attr('id', null) /* removing id attribute for the cloned
* tr so there is only one elemnt with that id
*/
.insertBefore('#append_anchor');
Be aware that the default behavior of clone() is to not copy event handler from the parent element.
I'd also suggest to make sure every car gets it's own tr. See the following fiddle:
https://jsfiddle.net/jcvnos9w/

Javascript - Read textbox length

I am trying to read the length of a textbox from my register form. I have tried using document.getElementById() and textbox.value.length. Is there something very simple I'm am missing. I alert the result to the screen to show the textbox length. Thanks in advance.
Here is my last attempt:
function Register(){
Alert(RegisterForm.txt_Password.value.length);
}
TextBox structure:
<form id="RegisterForm" name="RegisterForm" method="POST" action="RegisterInsert.php" onsubmit="return Register(RegisterForm)">
<table border="0" align="center" width="100%">
<tr>
<td width="15%">Email Address:</td>
<td width="85%"><input type="text" name="txt_Email" id="txt_Email"/> </td>
</tr>
<tr>
<td width="15%">Username:</td>
<td width="85%"><input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<span class="check" ></span></td>
</tr>
<tr>
<td width="15%">Password:</td>
<td width="85%"><input type="password" name="txt_Password" id="txt_Password" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btn_Register" id="btn_Register" value="Register"></td>
</tr>
<tr>
</table>
<p> </p>
</form>
I use the submit button to call the Register function.

You need to get a reference to the element first:
function Register() {
var RegisterForm = document.getElementById('RegisterForm');
alert(RegisterForm.elements['txt_Password'].value.length);
}

check out this code:
var textBox = document.getElementById("myTextBox");
var textLength = textBox.value.length;

alert(document.getElementById('txt_Password').value.length);

click the content slide up and slide down the following content?

<table>
<tr class="clicke">
<td colspan="2">
<img src="images/title_.gif" vspace="0" hspace="0" width="690" height="65"
border="0" alt="" />
</td>
</tr>
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td>
<input type="text" name="realname" />
</td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td>
<input type="text" name="Birth Date" />
</td>
</tr>
<tr class="clicke">
<td colspan="2">
<img src="images/informati.gif" vspace="0" hspace="0" width="690" height="65"
border="0" alt="" />
</td>
</tr>
<tr class="tbl_odd">
<td>Present Address</td>
<td>
<input type="text" name="Present Address" style="width:250px;" />
</td>
</tr>
<tr class="tbl_even">
<td class="required">City</td>
<td>
<input type="text" name="City" value="credit-application.php" />
</td>
</tr>
</table>
when click the clicke class tr, the following tr will hide with slow up untill the next clicke tr. when click again, the following tr content will show with slow down.
my code:
$(document).ready(function(){
$(".clicke").click(function(){
$("tr").slideToggle("slow");
}
);
});
but all the tr are effect, which are not i want, how to determine the related tr content. thank you
i am sorry maybe i didn't say the question clear.
eg:
<tr class="clicke">
</tr>
click the tr. those tr will be show/hide
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td>
<input type="text" name="realname" />
</td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td>
<input type="text" name="Birth Date" />
</td>
</tr>

EDIT: I see you've updated your question to make your intent clearer. I think the best way to achieve what you want is to group the form fields in one element, and toggle that element.
I think this is preferable to animating multiple table rows simultaneously, since I assume your goal is to animate all the associated fields at once, in a single animation.
Here's how you might do that:
<h2 class="clicke">CLICK ME #1</h2>
<table>
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td><input type="text" name="realname" /></td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td><input type="text" name="Birth Date" /></td>
</tr>
</table>
<h2 class="clicke">CLICK ME #2</h2>
<table>
<tr class="tbl_odd">
<td>Present Address</td>
<td><input type="text" name="Present Address" /></td>
</tr>
<tr class="tbl_even">
<td class="required">City</td>
<td><input type="text" name="City" /></td>
</tr>
</table>​​​
jQuery:
$(document).ready(function(){
$('.clicke').next('table').hide();
$('.clicke').click(function(){
$(this).next('table').slideToggle('slow');
});
});​
Here is a demo: http://jsfiddle.net/ZvFQm/1/

I'm not secure to have correctly understend, but this could be a solution:
$(".clicke").toggle(
function(){
$(this).parent().find("tr").eq(1).hide();
},function(){
$(this).parent().find("tr").eq(1).show();
} );
See HERE to see the result

Please try editing the table format like in demo
Demo here
All it does is find next .slide table and perform slideToggle
$(".clicke").click(function(){
$(this).next('tr').find('.slide').slideToggle("slow");
});

Try This, It will work.
$(document).ready(function(){
$(".clicke").click(function(){
$(this).nextAll("tr:eq(0), tr:eq(1)").slideToggle("slow");
});
});