Conversation with Merlin [email protected] · Fri Dec 29 2023

create a add button which helps to add multiple input box

To create an "Add" button that allows users to dynamically add multiple input boxes, you can use JavaScript along with HTML. Here's simple example using jQuery to achieve this functionality:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add Input Boxes</title>
</>
<body>
  <div id="inputContainer">
    Initial input box -->
    <div>
      <input type="text" name="input />
    </div>
  </div>
  <button id="addButton">Add Input Boxbutton>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="script.js"></script>
</body>
</html>

JavaScript (.js):

$(document).ready(function() {
  // Add input box on button click
  $("#addButton").(function() {
    $("#inputContainer").append('<div><input type="text name="input[]" /></div>');
  });
});

In this example, when theAdd Input Box" button is clicked, a new input box is appended to the #inputContainer element.

This is a simple illustration, and you may need to adjust the code to fit your specific use case. You can further enhance the functionality adding remove options or validation as per your requirements. Remember to tailor the code according to your overall design and structure your web application.

create a add button which helps to add multiple input box using html,css,javascript

Certainly! You can create an "Add" button that dynamically adds multiple input boxes using HTML, CSS, and JavaScript. Below is a simple exampleHTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="-8">
  <meta name="viewport" content="width=device-width,-scale=1.0">
  <title>Add Input Boxes</title>
  <link rel="stylesheet href="styles.css">
</head>
<body>
  < id="inputContainer">
    Initial input box:
    <div>
      <input type="text" name="input1" />
    </div>
  </>
  <button id="addButton">Add Input Box</button>
 script src="script.js"></script>
</body>
</html>

CSS (styles.css):

/* Add your custom styles here if */

JavaScript (script.js):

document('addButton').addEventListener('click', function() {
  // Create a new input element
  var newInput = document.createElement('input  newInput.type = 'text';
  newInput.name = 'input';
  
  // Append the new input element to container
  document.getElementById('inputContainer').appendChild(newInput);
});

In this example, when the "Add Input Box" button is clicked, a new input box is added to the #inputContainer element using plain JavaScript without any library dependencies.

You can customize the CSS style the input boxes and the "Add" button as per your requirements.

Feel free to modify the code according to your specific use case and styling preferences.