Add a new input code

Hello,

I am trying to create a system where by pressing the + button it will create a new input for that specific field of my form.
This is what i use:

Code:

<div style="width:100px;font-size:14px;text-align:right;display:inline-block;">Σενάριο ::</div>
    <input type="text" id="scripts" name="scripts" placeholder="π.χ. Τάδε, Τάδε" style="width: 120px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" />
    <img id="newInput" alt="Add input" src="http://png-2.findicons.com/files/icons/1007/crystal_like/128/plus.png" style="height:28px;width:28px;" />
<input type="text" id="scripts2" name="scripts" placeholder="π.χ. Τάδε, Τάδε" style="width: 120px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;display:none" /><br /><br />


JS

Code:

<script type="text/javascript">document.getElementById('newInput').onclick = function() {
        document.getElementById('scripts2').style.display = "inline";
        document.getElementById('newInput').style.display = "none";
};</script>

This unfortunately doesn't work.. Can someone please help me?

So basically it'll create multiple fields, like the images on the graphic form I made ? If so, you can use this as a starting point :

Code:

<div id="multi-fields">
  <div class="multifield"><input type="text" /> <a href="#" onclick="cloneField(this); return false;">+</a> <a href="#" onclick="killField(this); return false;" style="display:none;">-</a></div>
</div>

<script type="text/javascript">function cloneField(that) {
  var clone = that.parentNode.cloneNode(true);
 
  clone.getElementsByTagName('A')[1].style.display = '';
  clone.getElementsByTagName('INPUT')[0].value = '';
 
  document.getElementById('multi-fields').appendChild(clone);
};


function killField(that) {
  document.getElementById('multi-fields').removeChild(that.parentNode);
};


function concatValues(sep) {
  var input = document.getElementById('multi-fields').getElementsByTagName('INPUT'),
      i = 0,
      j = input.length,
      val = '';
 
  for (; i < j; i++) {
    val += input[i].value + ( sep ? sep : ' ' );
  }
 
  return val;
};

'par ange tuteur';</script>

It comes with the following functions :

1. cloneField(that);
This function is called when you click the "+" anchor. It simply clones its parent and appends the clone to the field container.

2. killField(that);
This function is called when you click the "-" anchor. Once called it removes the parent from the field container.

3. concatValues(sep);
This function you must call yourself. What it does is loops over all the fields and places the value in each field into a single string and returns it. sep is the separator for each value. If you want to separate each value by a line break you should call the function like this :

Code:

concactValues('\n');

By default, each value is separated by a space.


If any questions let me know.

So if i want to add this feature to 2 inputs or maybe 3 inputs (different ones) in the same page is it possible?

Of course !

All you need to do is change the identifiers in the HTML, but if you're doing it that way you'll need to use this version instead :

Code:

<div id="multi-fields">
  <div class="multifield"><input type="text" /> <a href="#" onclick="cloneField(this); return false;">+</a> <a href="#" onclick="killField(this); return false;" style="display:none;">-</a></div>
</div>
 
<script type="text/javascript">function cloneField(that) {
  var clone = that.parentNode.cloneNode(true);
 
  clone.getElementsByTagName('A')[1].style.display = '';
  clone.getElementsByTagName('INPUT')[0].value = '';
 
  that.parentNode.parentNode.appendChild(clone);
};
 
 
function killField(that) {
  that.parentNode.parentNode.removeChild(that.parentNode);
};
 
 
function concatValues(sep, id) {
  var input = document.getElementById(id).getElementsByTagName('INPUT'),
      i = 0,
      j = input.length,
      val = '';
 
  for (; i < j; i++) {
    val += input[i].value + ( sep ? sep : ' ' );
  }
 
  return val;
};
 
'par ange tuteur';</script>

Just copy / past the HTML in this case ( no need to re-paste the script ) and change the id of the parent each time to something else. Then to get the values of the fields you'll have to use concatValues like this :

Code:

concatValues('\n', 'multi-fields');

The second argument ( 'multi-fields' ) is the id of the container that contains the fields.

@Ange Tuteur so lets say my 3 input ids are "input1" "input2" and "input3"
all i have to do is add this?

Code:

concatValues('\n', 'input1', 'input2', 'input3');

or i must create 3 separated ones?

Since the function only takes two arguments, you must write it like this :

Code:

concatValues('\n', 'input1');
concatValues('\n', 'input2');
concatValues('\n', 'input3');

If they're supposed to go together into one string you can actually concat functions too, IF they return concatable data.

Code:

concatValues('\n', 'input1') + concatValues('\n', 'input2') + concatValues('\n', 'input3');

@Ange Tuteur but we have the function before that so can i add the first one for it? Don't i have to create separated ones? I mean functions?

No, all the functions are designed to work regardless of field id, except for the last one. The last one must take an ID to narrow down the input elements.

Yes this is solved. Sorry for not posting it earlier.