Skip to main content

Archive

Show more

Adding Input Dynamically To Form | HTML, CSS And jQuery

by Rustcode
Adding-Input-Dynamically-Into-Form

Adding Input Dynamically To Form Using html, css and Jquery

"Adding dynamically input into form" is a very useful elements for those websites which have dynamic form. This kind of behavior of form looks very attractive and creative. This animation may be created using javascript but in this article, we are using simple jQuery.

Let's take a brief idea about it that How this animation works, so you simply see a file uploading button with one "Add More Input" button. When you click on the "Add More Input" button new input files will be created dynamically with the delete button as you can see in the image. You can create a number of elements dynamically but we are using only eight inputs.

We have already created a lot of animation using javascript and css, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Adding Input Dynamically To Form</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Adding Input Dynamically To Form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="content-input-container">
        <div class="file-input" >
          <input type="file" name="image[]">
          <label for="file">Select file</label>
        </div>
      </div>
      <div class="add-btn-container">
        <button class="btn add-btn">Add Input +</button>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="script.js"></script>
    </div>
  </body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
* {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0px;
  margin: 0px;
}

.container {
  margin: auto;
  width: 450px;
  max-width: 96%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #CAE5FF;
  border-radius: 6px;
  padding: 30px;
}

.add-btn-container {
  padding: 5px 0px;
  width: 100%;
}

.content-input-container {
  width: 100%;
}

.btn {
  margin: 4px 0px;
  cursor: pointer;
  display: inline-block;
  color: white;
}

.add-btn {
  background-color: #685044;
  border: none;
  padding: 10px 28px;
  font-size: 16px;
  text-align: center;
}

.delete-btn {
  background: #FF6542;
  border: none;
  color: white;
  font-size: 14px;
  height: 38px;
  width: 100px;
}

input[type="file"],
input[type="file"]::-webkit-file-upload-button {
  opacity: 0;
  position: absolute;
  box-shadow: none;
  width: 120px;
  height: 45px;
  background: red;
  cursor: pointer;
}

.file-input {
  margin: 10px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.file-input label {
  display: block;
  width: 100px;
  padding: 10px;
  background: #6F8AB7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}



04. JQUERY

$(document).ready(function () {

  var limit = 8;
  var count = 1;
  $(".add-btn").click(function (e) {

    var inputContainer = $(".content-input-container");

    e.preventDefault();
    if (count < limit) {
      count++;
      $(inputContainer).append('<div class="file-input"><input type="file" name="image[]"/><label for="file">Select file</label><button class="btn delete-btn">Delete</button></div>');
    } else {
      alert('You have reached the maximum limit. Now you will not be able to add more input.')
    }
  });

  $(".content-input-container").on("click", ".delete-btn", function (e) {
    e.preventDefault();
    $(this).parent('div').remove();
    count--;
  })
});


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download from here and change this according to your need.





Comments

Post a Comment