Develop Reference

Populate divs with same id with content from textareas of same id that is stored in an array

I have the code below, i want to get the content of the textareas with the same id of each table row and store it in an array. When I get them I want to append each of them in a div with the same id on a different table. I tried but it appends only the first content to all the divs.
For example instead of web updates and ssl certificates on each row of column description it displays web updates on both of them.
<table id="items">
<tr>
<th>Description</th>
<th>Unit Cost</th>
</tr>
<tr class="item-row">
<td class="description">
<textarea id='description'>Monthly web updates</textarea>
</td>
<td>
<textarea id='cost'class="cost">€650.00</textarea>
</td>
</tr>
<tr class="item-row">
<td class="description">
<textarea id='description'> SSL certificates </textarea>
</td>
<td>
<textarea id='cost'class="cost">€75.00</textarea>
</td>
</tr>
</table>
The result should look like the same table but instead of textareas it should have div with <p> </p> inside.

Officially you only can use one unique id for each element with id attribute. That is why you can't select more than one element by id
let single = document.getElementById('id');
let multiple = document.getElementsByTagName('tag');

Dynamic text in input form through JavaScript

I have a html input form which uses a table with 3 columns for proper alignment of HTML controls. The input data is used to generate a MySQL query. In column 1 there is text which helps the user understand what the controls in column 2 mean. In column 2 there are dropdownlists or text input. In column 3 there is the submit button and a help button (not relevant).
<div class="input_frm">
<form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">
<table class="input_tbl">
<tr>
<td class="a">Select province</td>
<td class="b"><select id="selProvincie" name="Alfa" onchange="ProvincieChg()"></select></td>
<td class="c"><input class="button_face" type="submit" value="Submit"></td>
</tr>
<tr>
<td class="a">Select region</td>
<td class="b"><select id="selRegiune" name="Beta" onchange="RegiuneChg()"></select></td>
<td class="c"></td>
</tr>
...
</table>
</form>
</div>
My question is: How can I change the text in column 1 (in lower rows) through JavaScript based on user input (in upper rows) ? Can I reference the cells of the table in the JavaScript DOM ? Or... ?

Here is the solution to my question: span tags and Javascript
You enclose the text in span tags
<td><span class="aa">This text can be changed in Javascript</span></td>
and then you can change it in JavaScript.

unable to hide and show a particular table row with the same id names inside a div using jquery

I am creating a website and there are some pages containing the <div> tags as the wrapper of <table>. A <tr> of each table contains a <form> and another <tr> contains some <a> tags. I am using these anchor tags to make buttons just to add hide and show functionality. Whenever some new data is fetched from database, the set of said html structure is created dynamically. Every <div> contains the same id and every <tr> also containing the <form> assigned the same id. Below is my example htmlfor the better explanation.
HTML
<div class='static_archive'> // First Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
<div class='static_archive'> // Second Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
jQuery
$(document).ready(function(){
$("#form_container").hide();
$("#show_hide_details").click(function(){
$("#form_container").toggle();
});
});
As soon as the page loads, $("#form_container").hide(); hides all the <tr> containing the <form>. By clicking hide/show button with the toggle effect, hides and shows the every content with the same id.
I want to show only one form at a time when a particular button is hide/show button is pressed. How can i control such behavior?
With a new record fetched, a new DIV is created with only one table inside it. And the table contains only one form. The table row containing the form needs to be hide/show.
Here is the jsfiddle with my code structure jsfiddle
Every clicked hide/show should effects the respective form.
I have edited my post. Please have a look now.

You can use $(this) to do the toggle with particular block.
$(this).closest('tr').next("#form_container").toggle();
You should not use same id for multiple elements, assign class and use that
$(this).closest('tr').next(".form_container").toggle();

I think u want this or may this help u.
You can not have same id's for different controls.So u can have id's staring with same string
You can use ^ here:
$(document).ready(function(){
$("[id^='form_container']").hide();
$("#show_hide_details").click(function(){
$(this).parents().next("tr").toggle();
});
});
jsfiddle

I assume you want to show all of them hidden first. Obviously, you have to replace the id's with class.
$(document).ready(function(){
$(".form_container").hide();
$(".show_hide_details").click(function(){
$(this).parents("tr").next().toggle();
});
});

How to hide a file input item in a form?

I'm developing a web page that lets user upload a font file, but the requirement is to display the font name after user selects a file, then he can decide to upload it or not, the font name is a property in the font file, the file name might be "123.ttf", but when you right click on the font file and look into it "Title" preperty, it's called "ACME Explosive Bold", so my Javascript should ideally find the "tilte" property of this font, but after lots of research, I was told JS can't get this property, while on the other hand I've found a piece of Java code that can get it.
So now I'm trying to hide a 2nd form on the page, with an input field whose value will be the user selected file from the first form, when user selected a file but before he clicks the first form's submit button, my JS calls the 2nd form with user selected file, submit it and run a servlet to find it's "Title" and come back and display it on the page, then delete that file on the server, because user has never officially submitted it.
So my question is how to hide this 2nd form with it's own input file field and browse button on the page, I need the form tag so I can simulate a submit. But I don't want users to see it ?
Here is my code so far :
![<div class="body">
<h1>Upload Font</h1> <%-- \[+\] --%>
<s:form namespace="/font" action="add" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tiles:insertAttribute name="form" />
<tr class="prop">
<td valign="top" class="name required">
<label for="description">Font File:</label>
</td>
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname" onchange="fileUpload('/pages/font/getFontTitle.jsp',value,this.files\[0\])"/>
</td>
</tr>
<tr class="prop">
<td>
<span class="button"><s:submit/></span>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
<s:form namespace="/font" action="hiddenForm" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname_1"/>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
</div>]

You can hide the second form using CSS property visibility : hidden.
<s:form namespace="/font" style ='visibility:hidden' action="hiddenForm" method="POST" enctype="multipart/form-data">

Hiding empty inputs by parent row in jquery

I have the following HTML:
<table>
<tr class="row">
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
</tr>
<tr>
...
...
</tr>
</table>
I want to be able to hide the <tr> with the class="row" but only when the input within the <td> with the class="field" is empty when the page loads.
I've tried this, but it doesn't work:
$('td.field:text[value=""]').parents('tr.row').hide();
However, for some reason, this DOES work:
$('td.field).parents('tr.row').hide();
(ie: it hides all of the rows with class="row")
Also, the following DOES work:
$('td.field:text[value=""]').val('test');
(ie: all empty inputs are populated with 'test' on page load)
I'm new to JQuery so I'm suspecting that I may have just misunderstood the way chaining works. can anyone give me any pointers? It semms like the two parts of what I am trying to do are correct when attempted separately, but don't work together as one.

I think it should be in this way:
$('td.field :text[value=""]').parents('tr.row').hide();
The reason: :text (input) is child from td.field. If you put td.field:text it's wrong because they are diferente selectors.

and why dont you go the oposite way - select the INPUT with empty value, and than go to its
parents().parents().hide()
first parents to get TD, the second one to get TR