Dynamic text in input form through JavaScript

Question

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... ?

Use any javascript framework like Praveen Suggested. https://jquery.com/ You have to include the javascript in your document and then you can add and id to the element that you want to change and then can access $("#you_id").html("New content") for example. — satchcoder, Mar 15 '16 at 13:55
@Mikey: **1)** You can entirely omit `action=""`, it still will work and validate. **2)** Don't use tables for layouts. **3)** Don't use inline `onchange`, use `object.addEventListener('change', function() { /* */ });`. **4)** To populate, e.g. 3 `` for which each subsequent's ` — Przemek, Mar 15 '16 at 15:47
@All: I already use JSON and jQuery for my listboxes (the lists). They are a common core. But the input texts AFTER the listboxes target different fields in my tables and change controlled by the first listbox, which determines the type of query. The text boxes are used for filtering the query. (As for using tables in html, this can only be considered after a viable, more simple alternative for them has appeared in html 5.) — Mikey, Mar 16 '16 at 05:46

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

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.

edited May 23 '17 at 12:07

Community

1
1

answered Mar 16 '16 at 06:00

Mikey

117
2
12

Dynamic text in input form through JavaScript

1 Answers1