How to create dynamic forms in javascript-Front-end Q&A-php.cn

How to create dynamic forms in javascript

PHPz

Release： 2023-05-12 16:17:07

Original

1039 people have browsed it

With the continuous development of Internet applications, users have higher and higher requirements for the interactive experience of websites. Dynamic forms are one of the important ways to improve user interaction experience. As an essential skill for front-end development, JavaScript can also achieve dynamic form effects very well. This article will introduce how to use JavaScript to create dynamic forms, from the aspects of dynamic addition, deletion and conditional rendering of form elements.

1. Dynamic addition of form elements

Normally, the forms on the website are completed with HTML code, but the forms created with HTML code are static, and the data entered by the user is also It is static and cannot implement functions such as dynamic addition and dynamic deletion. In JavaScript, form elements can be added dynamically through DOM operations.

The following is a simple example that shows how to dynamically add a text box to a form using JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>动态表单</title>
    <script type="text/javascript">
      function addInput() {
        var form = document.getElementById("myForm");
        var input = document.createElement("input");
        input.type = "text";
        form.appendChild(input);
      }
    </script>
  </head>
  <body>
    <form id="myForm">
      <input type="button" value="添加文本框" onclick="addInput()">
    </form>
  </body>
</html>

Copy after login

In this example, a text box is created through JavaScript and it is added to the form. Users can dynamically add new text boxes by clicking the "Add Text Box" button.

2. Dynamic deletion of form elements

In practical applications, in addition to adding form elements, sometimes it is also necessary to delete form elements. Likewise, form elements can be easily removed through DOM manipulation.

The following is a simple example that shows how to delete a text box in a form using JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>动态表单</title>
    <script type="text/javascript">
      function removeInput() {
        var form = document.getElementById("myForm");
        var inputs = form.getElementsByTagName("input");
        form.removeChild(inputs[inputs.length-1]);
      }
    </script>
  </head>
  <body>
    <form id="myForm">
      <input type="text"><br>
      <input type="text"><br>
      <input type="button" value="删除最后一个文本框" onclick="removeInput()">
    </form>
  </body>
</html>

Copy after login

In this example, get all the text box elements in the form through JavaScript, and then Delete the last text box. Note that when removing form elements, use the removeChild() method.

3. Conditional rendering of form elements

Sometimes it is necessary to dynamically change the display content of the form based on the content input by the user. For example, in the registration form, when the user selects "Enterprise User", enterprise-related form elements need to be displayed; when the user selects "Individual User", personal-related form elements need to be displayed. At this time, you need to use the conditional rendering function of form elements.

The following is a simple example that shows how to use JavaScript to implement conditional rendering of form elements:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>动态表单</title>
    <script type="text/javascript">
      function showFields() {
        var userType = document.getElementById("userType").value;
        var personalFields = document.getElementById("personalFields");
        var companyFields = document.getElementById("companyFields");
        if (userType === "personal") {
          personalFields.style.display = "block";
          companyFields.style.display = "none";
        } else {
          personalFields.style.display = "none";
          companyFields.style.display = "block";
        }
      }
    </script>
  </head>
  <body>
    <form>
      <label>
        用户类型：
        <select id="userType" onchange="showFields()">
          <option value="personal">个人用户</option>
          <option value="company">企业用户</option>
        </select>
      </label>
      <br><br>
      <fieldset id="personalFields">
        <legend>个人用户信息</legend>
        姓名：<input type="text"><br>
        年龄：<input type="text"><br>
      </fieldset>
      <fieldset id="companyFields" style="display: none;">
        <legend>企业用户信息</legend>
        公司名称：<input type="text"><br>
        职位：<input type="text"><br>
      </fieldset>
    </form>
  </body>
</html>

Copy after login

In this example, a form is defined, including a drop-down menu and two Field set. A drop-down menu allows the user to select "Individual User" or "Business User" and the corresponding set of fields is displayed.

In the code, the elements of the drop-down menu and the two field sets are obtained through the getElementById() method, and are stored in the variables userType, respectively. in personalFields and companyFields. In the showFields() function, determine which field set should be displayed based on the value of the drop-down menu. The style.display attribute is used here to control the display or hiding of elements.

Summary

This article introduces how to implement dynamic forms in JavaScript, including dynamic addition, deletion and conditional rendering of form elements. Through DOM operations, these functions can be easily implemented, thereby improving the user's interactive experience. If you want to achieve more complex form interaction effects, you can also consider using jQuery or other front-end frameworks.

The above is the detailed content of How to create dynamic forms in javascript. For more information, please follow other related articles on the PHP Chinese website!