JSFiddle - React, Tailwind, and code Playground

by JAAulde

HTML

<form id="table_form" method="POST" action="/">
    <input class="input_text" name="qty[]" type="text" id="qty_field1" size="6" value="1" />
    <input class="input_text" name="qty[]" type="text" id="qty_field2" size="6" value="2" />
    <input class="input_text" name="qty[]" type="text" id="qty_field3" size="6" value="3" />
    <input class="input_text" name="qty[]" type="text" id="qty_field4" size="6" value="4" />
    <input class="input_text" name="qty[]" type="text" id="qty_field5" size="6" value="5" />
    <input class="input_text" name="qty[]" type="text" id="qty_field6" size="6" value="6" />
    <input class="input_text" name="qty[]" type="text" id="qty_field7" size="6" value="7" />
    <input class="input_text" name="qty[]" type="text" id="qty_field8" size="6" value="8" />
    <input class="input_text" name="qty[]" type="text" id="qty_field9" size="6" value="9" />
    <input class="input_text" name="qty[]" type="text" id="qty_field10" size="6" value="10" />
    <input class="input_text" name="qty[]" type="text" id="qty_field11" size="6" value="11" />
    <input class="input_text" name="qty[]" type="text" id="qty_field12" size="6" value="12" />
    <input class="input_text" name="qty[]" type="text" id="qty_field13" size="6" value="13" />
    <input class="input_text" name="qty[]" type="text" id="qty_field14" size="6" value="14" />
    <input class="input_text" name="qty[]" type="text" id="qty_field15" size="6" value="15" />
    <input class="input_text" name="qty[]" type="text" id="qty_field16" size="6" value="16" />
    <input class="input_text" name="qty[]" type="text" id="qty_field17" size="6" value="17" />
    <input class="input_text" name="qty[]" type="text" id="qty_field18" size="6" value="18" />
    <input class="input_text" name="qty[]" type="text" id="qty_field19" size="6" value="19" />
    <input class="input_text" name="qty[]" type="text" id="qty_field20" size="6" value="20" />
    <input class="input_text" name="qty[]" type="text"...

JavaScript

var param_string,
    table_form,
    param_name,
    encoded_param_name,
    all_inputs,
    index,
    input_count,
    current_input;

param_string = '';
table_form = document.getElementById( 'table_form' );
if( table_form )
{
    param_name = 'qty[]';
    encoded_param_name = encodeURIComponent( param_name );

    all_inputs = table_form.getElementsByTagName( 'input' );
    input_count = all_inputs.length;
    for( index = 0; index < input_count; index++ )
    {
        current_input = all_inputs[index];
        if( current_input.getAttribute( 'name' ) === param_name )
        {
            param_string += (
                encoded_param_name +
                '=' +
                encodeURIComponent( current_input.getAttribute( 'value' ) )
            );
        }
    }
}

/* debug code */
p = document.createElement( 'p' );
p.appendChild( document.createTextNode( param_string ) );
document.body.appendChild( p );
/* ^^ debug code */