Guide: Generating a dynamic textbox on click event without needing to reload the page

Question

Guide: Generating a dynamic textbox on click event without needing to reload the page

I need assistance with the following form:-

    <form action="">
    <table border="0">
        <td colspan="2" class="instruction">Please select an 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>

Following the last </table>, I am looking to add a text box that appears dynamically based on the selected radio button. This should happen without refreshing the page.

javascript ajax forms dynamic onclick

Answer 1

Answer №1

Creating an input element using Javascript:

// Dynamically create and customize input 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';

// Insert the created input element before a specified button
var btn = document.getElementsByName('search_submit')[0]; 
btn.parentElement.insertBefore(input, btn);

Using jQuery to achieve the same result:

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

To see this in action, check out the jsfiddle here.

If you're interested in generating only one click on the radios, visit this jsfiddle link.

Answer 2

Creating an input element using Javascript:

// Dynamically create and customize input 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';

// Insert the created input element before a specified button
var btn = document.getElementsByName('search_submit')[0]; 
btn.parentElement.insertBefore(input, btn);

Using jQuery to achieve the same result:

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

To see this in action, check out the jsfiddle here.

If you're interested in generating only one click on the radios, visit this jsfiddle link.

Answer 3

Answer №2

When using vanilla JavaScript, you would need to generate an additional div element following the initial one and then update its innerHTML property with the desired HTML content of the input element.

On the other hand, jQuery provides convenient functions such as .after or .append that perform equivalent actions in a more streamlined manner.

Answer 4

When using vanilla JavaScript, you would need to generate an additional div element following the initial one and then update its innerHTML property with the desired HTML content of the input element.

On the other hand, jQuery provides convenient functions such as .after or .append that perform equivalent actions in a more streamlined manner.

Answer 5

Answer №3

For enhancing your skills, I suggest exploring jQuery (http://jquery.com/). In addition, you may find this article helpful in gaining a better understanding of the issue:

Answer 6

For enhancing your skills, I suggest exploring jQuery (http://jquery.com/). In addition, you may find this article helpful in gaining a better understanding of the issue:

Answer 7

Answer №4

            <html>
            <body>
            <table border=3>
            <tr>
            <td>USERNAME</td>
            <td><input type="radio" name="radGroup" id="rad1" onchange="showElement('1')">
            DEFAULT USERNAME
            <input type="radio" name="radGroup" id="rad1" onchange="showElement('2')">
            NEW UNAME</td></tr>
            <tr><td></td><td>
            <span id="elementNum1" style="display:none;visibility:hidden;">
            <input type="text" id="txt1" value="abc123" /> your default 
            </span>
            <span id="elementNum2" style="display:none;visibility:hidden;">
            <input type="text" id="txt2" value="" />confirm
            </span>
            </td>
            </tr>
            <script type="text/javascript">
            function showElement(iShow) 
            {       
            var oPageInfo;
            var bContinue=true;
            var iCounter=1;
            while (bContinue) 
            {
                try 
                {
                    oPageInfo=document.getElementById('elementNum'+iCounter);
                    oPageInfo.style.display='none';
                    oPageInfo.style.visibility='hidden';
                    iCounter++;
                } 
                catch(oErr) 
                {
                    bContinue=false;
                }
            }
            oPageInfo=document.getElementById('elementNum'+iShow);
            oPageInfo.style.visibility='visible';
            oPageInfo.style.display='inline';
            }
            </script>
            </table>
            </body>
            </html>

Answer 8

            <html>
            <body>
            <table border=3>
            <tr>
            <td>USERNAME</td>
            <td><input type="radio" name="radGroup" id="rad1" onchange="showElement('1')">
            DEFAULT USERNAME
            <input type="radio" name="radGroup" id="rad1" onchange="showElement('2')">
            NEW UNAME</td></tr>
            <tr><td></td><td>
            <span id="elementNum1" style="display:none;visibility:hidden;">
            <input type="text" id="txt1" value="abc123" /> your default 
            </span>
            <span id="elementNum2" style="display:none;visibility:hidden;">
            <input type="text" id="txt2" value="" />confirm
            </span>
            </td>
            </tr>
            <script type="text/javascript">
            function showElement(iShow) 
            {       
            var oPageInfo;
            var bContinue=true;
            var iCounter=1;
            while (bContinue) 
            {
                try 
                {
                    oPageInfo=document.getElementById('elementNum'+iCounter);
                    oPageInfo.style.display='none';
                    oPageInfo.style.visibility='hidden';
                    iCounter++;
                } 
                catch(oErr) 
                {
                    bContinue=false;
                }
            }
            oPageInfo=document.getElementById('elementNum'+iShow);
            oPageInfo.style.visibility='visible';
            oPageInfo.style.display='inline';
            }
            </script>
            </table>
            </body>
            </html>

Guide: Generating a dynamic textbox on click event without needing to reload the page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Allow undici fetch requests to use self-signed certificates

Tips for extracting the formData from an extensive form with a lot of fields

How can I sort by the complete timestamp when using the Antd table for dates?

What might be preventing combineLatest from executing?

Sending images as a base64 string from a Titanium app to a Ruby on Rails web service

Use VB.NET to dynamically update cell content in HTML

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

Unable to minimize or hide the ace editor widget with Cypress

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Spin an object around the global axis using the tween.js library

How to Call a Nested Object in JavaScript Dynamically?

Verify the presence of a cookie before initiating a geo-redirection process

Clear Input Field upon Selection in JQuery Autocomplete

Scatter plot showcasing repeated values along the x-axis

React components are graced with a clear icon that is visible on every element

The information being sent from Angular is not being successfully transmitted to the XAM

Displaying variables in JavaScript HTML

Contrasting bracket notation property access with Pick utility in TypeScript

Why does everything seem to move in sync with the table's scrolling?

The HTML code as content