Question

I have this form:-

    <form action="">
    <table border="0">
        <td colspan="2" class="instruction">Select your desired option to search.</td>
    </table>
      <table>
        <tr>
          <td><label>
            <input onClick="generatenew();" type="radio" name="search_option" value="code" id="search_option_0">
            Customer Code</label></td>
          <td><label>
            <input type="radio" name="search_option" value="company" id="search_option_1">
            Customer Company</label></td>
          <td><label>
            <input type="radio" name="search_option" value="name" id="search_option_2">
            Customer Name</label></td>
          <td><label>
            <input type="radio" name="search_option" value="email" id="search_option_3">
            Customer Email</label></td>
        </tr>
      </table>
      <input class="Button" name="search_submit" type="submit" value="Search">
    </form>

Now after the last </table> i want to create a textbox on selection of anyone of the option button. Means, dynamically without page load.

Answer 1

Javascript alone:

// Create the element
var input = document.createElement("input");
input.type = 'text';
input.name = 'inputName';
input.value = 'some value';
input.size = 10;
input.maxLength = 10;
input.className = 'someClass';

// append the element
var btn = document.getElementsByName('search_submit')[0]; // get the button to insert the element before it;
btn.parentElement.insertBefore(input, btn);

Same process with jQuery:

$('input[name="search_submit"]').before('<input type="text" name="inputName" size="10" maxlength="10" class="someClass" />');

jsfiddle here

Here is the jsfiddle for the click on the radios, with a check to generate only once.