CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John
John

Reputation: 147

Dynamically generated input box resize and refresh position and size

I have a form, inside that form is a button and an input field, I would like it that when someone clicks on the button "ADD MORE FIELDS" that there will be a new dynamically generated input box. I tried using posted code in jsfiddle and this works but i need to get like in this picture:

enter image description here

So i need to get the input fields positioned like in this picture: - if one box is added in row then it gets width: 200px; - if two boxes are added in a row, the boxes get a width of: 100px - if you look at the picture on the right; I need it to be possible to remove a box by clicking it, then when a box is removed. I'd like all the boxes to be aligned again into the same position (here box 3 is removed, 4 takes it's place, 6 becomes smaller and 5 moves to the left.).

I tried using the code below on jsfiddle but i think i need some css and jquery:

$(document).ready(function() {
  var max_fields      = 10; //maximum input boxes allowed
  var wrapper         = $(".input_fields_wrap"); //Fields wrapper
  var add_button      = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
  });

  $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
  })
});

~Thanks

Upvotes: 1

Views: 902

Answers (1)

Roylyan Nikita
Roylyan Nikita

Reputation: 83

TL;DR: https://jsfiddle.net/6b24z4j7/4/

So basicly you needed to apply some nth-child css logic to maintain view order of inputs. I made little changes to jQuery, but it still maintain your logic. In fiddle example I made placeholder attribute to showcase how things work (you can remove it later).

CSS:

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.form{
  width: 400px;
  max-width: 90%;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 15px;
}
.form__actions{
  text-align: center;
}
.form__button{
  display: table;
  margin: 0 auto 15px;
  padding: 6px;
  color: #fff;
  background: #3498db;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  -webkit-appereance: none;
  -moz-appereance: none;
  -ms-appereance: none;
  appereance: none;  
}
.form__row{
  margin: 0 -10px;
}
.form__row:before, .form__row:after{
  content: '';
  display: table;
  clear: both;
}
.form__field{
  float: left;
  padding: 0 10px;
  margin: 0 0 25px;
  position: relative;
}
.form__field:nth-child(2n-1){
  width: 50%;
}
.form__field:nth-child(2n){
  width: 50%;
}
.form__field:nth-child(3n){
  width: 100%;
}
.form__field:hover .form__removeField{
  opacity: 1;
}
.form__removeField{
  position: absolute;
  top: -10px;
  right: 20px;
  width: 20px;
  height: 20px;
  opacity: 0;
  background: #e74c3c;
  color: #fff;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  border-radius: 50%;
  cursor: pointer;

  -webkit-transition(all .4s ease);
  -moz-transition(all .4s ease);
  -ms-transition(all .4s ease);
  transition(all .4s ease);
}
.form__input{
  display: block;
  width: 100%;
  background: #fff;
  padding: 0 10px;
  line-height: 32px; 
  border: 1px solid #888;
  border-radius: 5px;
  -webkit-appereance: none;
  -moz-appereance: none;
  -ms-appereance: none;
  appereance: none;
}

JS (jQuery):

$(document).ready(function() {
  var max_fields      = 10; //maximum input boxes allowed
  var wrapper         = $(".input_fields_wrap"); //Fields wrapper
  var add_button      = $(".add_field_button"); //Add button ID
    var count           = $(".input_fields_wrap").find('.form__field').length; //or write a static number if you know how many fields you will have

  $(add_button).click(function(e){ //on add input button click

    e.preventDefault(); 
    if(count < max_fields){ //max input box allowed
      count++; //text box increment
      $(wrapper).append('<div type="text" class="form__field"><input type="text" class="form__input" placeholder="'+count+'"><div class="form__removeField remove_field">x</div></div>'); //add input box
    }
  });

  $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    count--;
  })
});

HTML:

<form class="form">
  <div class="form__actions">
    <button class="form__button add_field_button">Add input</button>
  </div>
  <div class="form__row input_fields_wrap">
    <div type="text" class="form__field">
      <input type="text" class="form__input">
      <div class="form__removeField remove_field">x</div>
    </div>
    <div type="text" class="form__field">
      <input type="text" class="form__input">
      <div class="form__removeField remove_field">x</div>
    </div>
    <div type="text" class="form__field">
      <input type="text" class="form__input">
      <div class="form__removeField remove_field">x</div>
    </div>   
  </div>
</form>

Hopefilly, I understood the logic behind your input creation/removal.

Upvotes: 2

Related Questions