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

Ways to retrieve the neighboring element's value and modify it with the help of JavaScript or jQuery

What is the best way to ensure that a specific number of XHR callbacks have successfully completed before proceeding with further actions?

What are some effective strategies for reducing excessive re-rendering of React components?

The effectiveness of Ajax when working with filenames

Limiting the size of images within a specific section using CSS

Understanding how to decode querystring parameters within a Django view

What steps should I follow to incorporate channel logic into my WebSocket application, including setting up event bindings?

The dimensions of the HTML table do not adjust properly when new items are being appended using JavaScript

Responsive design element order rearrangement

NodeJS Fork - React each instance a new line is detected from the child process

"Learn how to add up elements in an array based on their unique IDs and generate a new array using

How to completely disable a DIV using Javascript/JQuery

Find the name of the region in the user's query

Pass an array using AJAX to my Python function within a Django framework

Implementing a dynamic function with jQuery Tokenize's change event

Unable to execute the new firebase on node server

Various web browsers may exhibit varying behaviors when processing extremely lengthy hyperlinks

retrieving attribute values from JSON objects using JavaScript

Display content exclusively within a modal specifically designed for mobile devices

Organize array by "categories" in Javascript and preserve the original sequence