Non-standard form with dependent radio buttons

Question

There is a form inside the table:

Begin End List Done 0 1900 1900 ... Yes 0 2015 2015 ... Yes 0 2016 2016 ... Yes

Where - 0 - radio button;

Begin - text field

End - text field

List - dropdown list

Done - checkbox

Is it possible to organize such a form, so that when sending, only the data of the line where radio is selected was sent.

Here is an example code, but do not scold too much.

 <form action="" method="get"> <table cellspacing="0" width="640px"> <tr class="t-head"> <td width="5%">&nbsp;</td> <td width="25%">Begin</td> <td width="25%">End</td> <td width="30%">List</td> <td>Done</td> </tr> <tr> <td> <input checked name="id" type="radio" value="1" /> </td> <td> <input name="beg" size="4" value="1900"> </td> <td> <input name="end" size="4" value="1900"> </td> <td> <select size="1" name="list"> <option selected value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> <td> <input name="otm" type="checkbox" value="1" /><b>Yes</b> </td> </tr> <tr> <td> <input name="id" type="radio" value="2" /> </td> <td> <input name="beg" size="4" value="2015"> </td> <td> <input name="end" size="4" value="2015"> </td> <td> <select size="1" name="list"> <option value="1">1</option> <option selected value="2">2</option> <option value="3">3</option> </select> </td> <td> <input checked name="otm" type="checkbox" value="1" /><b>Yes</b> </td> </tr> <tr> <td> <input name="id" type="radio" value="3" /> </td> <td> <input name="beg" size="4" value="2016"> </td> <td> <input name="end" size="4" value="2016"> </td> <td> <select size="1" name="list"> <option value="1">1</option> <option selected value="2">2</option> <option value="3">3</option> </select> </td> <td> <input name="otm" type="checkbox" value="1" /><b>Yes</b> </td> </tr> </table> <button type="submit">OK</button> </form>

People have any ideas, or such forms are not possible to implement

Answer 1 · 2016-11-15T10:00:55

 var obj = {}; function radioCheked() { var radios = document.getElementsByName("id"); var val; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { var row = radios[i].parentElement.parentElement.querySelectorAll('input'); var select = radios[i].parentElement.parentElement.querySelector(".list"); var indexSelect = select.selectedIndex; obj.Begin = row[1].value; obj.End = row[2].value; obj.List = select.options[indexSelect].text; obj.Done = row[3].checked; } } console.log(obj) }

 <form action="" method="get"> <table cellspacing="0" width="640px"> <tr class="t-head"> <td width="5%">&nbsp;</td> <td width="25%">Begin</td> <td width="25%">End</td> <td width="30%">List</td> <td>Done</td> </tr> <tr class='row'> <td> <input checked name="id" type="radio" value="1" /> </td> <td> <input name="beg" size="4" value="1900"> </td> <td> <input name="end" size="4" value="1900"> </td> <td> <select class='list' size="1" name="list"> <option selected value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> <td> <input name="otm" type="checkbox" value="1" /><b>Yes</b> </td> </tr> <tr class='row'> <td> <input name="id" type="radio" value="2" /> </td> <td> <input name="beg" size="4" value="2015"> </td> <td> <input name="end" size="4" value="2015"> </td> <td> <select class='list' size="1" name="list"> <option value="1">1</option> <option selected value="2">2</option> <option value="3">3</option> </select> </td> <td> <input checked name="otm" type="checkbox" value="1" /><b>Yes</b> </td> </tr> <tr class='row'> <td> <input name="id" type="radio" value="3" /> </td> <td> <input name="beg" size="4" value="2016"> </td> <td> <input name="end" size="4" value="2016"> </td> <td> <select class='list' size="1" name="list"> <option value="1">1</option> <option selected value="2">2</option> <option value="3">3</option> </select> </td> <td> <input name="otm" type="checkbox" value="1" /><b>Yes</b> </td> </tr> </table> <button type="submit" onclick="radioCheked();">OK</button> </form>

if I write for example test.php in action, then it will send this data to the server, or sending it to the server will be implemented differently

Abmin abmin 1.262 2 eleven 34 · Answer 2 · 2016-11-15T09:51:17

Everything's possible. Before submitting the form, you just need to make a check where the radio button is, and then send data only on that line. Assign an identifier to each radio button, and use javascript to check the form before sending it.

But could you write a sample code, I myself do not know well JS

Non-standard form with dependent radio buttons

2 answers 2

More articles: