IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month

Who is online?
In total there are 10 users online :: 0 Registered, 0 Hidden and 10 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Add a new input code

View previous topic View next topic Go down

avatar
Luffy

Gender : Male
Age : 24
Posts : 291
Points : 1967
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile https://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Wed 20 Jul 2016, 09:05

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?

--------

avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4734
Points : 9906
Reputation : 2368
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 20 Jul 2016, 10:21

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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Luffy

Gender : Male
Age : 24
Posts : 291
Points : 1967
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile https://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Wed 20 Jul 2016, 15:29

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

--------

avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4734
Points : 9906
Reputation : 2368
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 20 Jul 2016, 15:42

Of course ! Smile

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
Tips and TricksContact Me

avatar
Luffy

Gender : Male
Age : 24
Posts : 291
Points : 1967
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile https://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Wed 20 Jul 2016, 16:40

@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?

--------

avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4734
Points : 9906
Reputation : 2368
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 20 Jul 2016, 16:43

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. Razz
Code:
concatValues('\n', 'input1') + concatValues('\n', 'input2') + concatValues('\n', 'input3');

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Luffy

Gender : Male
Age : 24
Posts : 291
Points : 1967
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile https://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Wed 20 Jul 2016, 16:44

@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?

--------

avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4734
Points : 9906
Reputation : 2368
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 20 Jul 2016, 17:34

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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Guest
Guest

PostGuest on Tue 23 Aug 2016, 18:03

*** This topic will be closed soon if we don't get any feedback. @Luffy Is this solved / still needed? ***
avatar
Luffy

Gender : Male
Age : 24
Posts : 291
Points : 1967
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile https://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Tue 23 Aug 2016, 18:20

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

--------

avatar
Guest
Guest

PostGuest on Tue 23 Aug 2016, 18:21

*** Topic solved, locked and archived ***
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum