Breaking News: Grepper is joining You.com. Read the official announcement!

html dynamically add fields

Sammy Mutoro answered on April 25, 2024 Popularity 1/10 Helpfulness 1/10

answer html dynamically add fields

html dynamically add fields

Comment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Add Fields Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm">
    <div id="inputFields">
      <!-- Initially, no input fields -->
    </div>
    <button type="button" id="addFieldButton">Add Field</button>
    <button type="submit">Submit</button>
  </form>

  <script>
    $(document).ready(function(){
      $("#addFieldButton").click(function(){
        // Create a new input field
        var inputField = $("<input type='text'>");

        // Append the new input field to the container
        $("#inputFields").append(inputField);
      });

      // Optional: If you want to handle form submission
      $("#myForm").submit(function(event){
        event.preventDefault(); // Prevent default form submission

        // Get values from all input fields
        var fieldValues = $("#inputFields input").map(function(){
          return $(this).val();
        }).get();

        // Do something with the values (e.g., submit via AJAX, log to console)
        console.log(fieldValues);
      });
    });
  </script>
</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: add html

Link to this answer
Share Copy Link

Contributed on Apr 25 2024

Sammy Mutoro

0 Answers Avg Quality 2/10

html dynamically add fields

Contents

More Related Answers

html dynamically add fields

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.