jQuery add form input to hidden field input value in correct format

Question

I have a question very similar to this but I can't seem to get it to work.

I have a input like this:

<input id="authorities" name="authorities" type="text">

And a hidden input like this:

<input id="team_authority_emails" name="team[authority_emails]" type="hidden" value="{asvxcvxcvva@gmail.com,test@test.com.au}">

jQuery:

$('#authorities').bind("keyup", function() {
  var val = $(this).val();
  $('#team_authority_emails').val(val); 
});

What I'm trying to achieve is passing the input value from authorities to team_authority_emails in the correct format while retaining the present values. E.g. If I added a new email tesdadf@adfs.com the value in my hidden field would become value="{asvxcvxcvva@gmail.com,test@test.com.au,tesdadf@adfs.com}".

you want to keep all the values you entered in the hidden input? — Mert Metin, May 27 '15 at 02:32
FYI `.on()` is preferred to `.bind()`. And you need to look into concatenation with `+`. — j08691, May 27 '15 at 02:38
@MertMetin yes I would like to keep al the values already present and add the new one. — Thomas Taylor, May 27 '15 at 02:42
Thanks @j08691 I've changed to `.on` I'm unsure of how to concatenate while maintaining the values already present. — Thomas Taylor, May 27 '15 at 02:43

score 0 · Answer 1 · answered May 27 '15 at 02:50

Here's my solution:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

$('#authorities').on("keyup", function() {
  delay(function(){
      var arr = [];
      var email = $('#authorities').val();
      arr.push(email);
      $('#team_authority_emails').val(arr);
      console.log(arr);
      $('#authorities').val('');
  }, 1000 );
});

I also added delay for the keyup.

score 0 · Answer 2 · answered May 27 '15 at 02:50

One way is as follows:

$('#authorities').bind("keyup", function(e) {
    var value = $(this).val();
    if(e.which == 13 && value != ''){ //And other validations you may want
        var value = $(this).val();
        $('#team_authority_emails').val(function(i,val) {
            return val + (val ? ', ' : '') + value;
        });
        $(this).val('');
        return false;
    }
});

EXPLANATION: Wait until the user press enter key, then add the value to the hidden input and reset the input.

FIDDLE: https://jsfiddle.net/lmgonzalves/9h5rwgp3/3/

score 0 · Answer 3 · edited May 23 '17 at 12:14

You can use many ways, i just learn this, you can further modify to suit your needs

String.prototype.replaceAt=function(index,string,separator)
{console.log(index,separator,string);
 return this.substr(0, index) + separator + string + "}" +     this.substr(index+string.length);
}

$("#enter").click(function() {
  var inputA = $("#authorities").val();
  var inputB = $("#team_authority_emails").val();
  console.log(inputB.replaceAt((inputB.length-1),inputA, ","));
  $("#team_authority_emails").val(inputB.replaceAt((inputB.length-1),inputA, "," ));
});

Please take a look at this jsfiddle, see the log for the result. E.g you input test@gmail.com the result will be {asvxcvxcvva@gmail.com,test@test.com.au,test}

score 0 · Accepted Answer · answered May 27 '15 at 02:56

You need an event triggering the action to add the typed email into the hidden field. I'll be using a button here.

On click, if the email is valid, I grab the text on authorities and replace the value of the hidden field with the present values plus the new one.

function isEmail(posibleEmail) {
  //check if email is valid here somehow
  return true;
}

$('#addEmail').on('click', function() {

  var typedEmail = $('#authorities').val();

  if (isEmail(typedEmail)) {

    var presentEmails = $('#team_authority_emails').val().slice(0, -1);

    $('#team_authority_emails').val(presentEmails + ',' + typedEmail + '}');

    $('#out').html($('#team_authority_emails').val()); //just so you can see the result
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="authorities" name="authorities" type="text">

<button id="addEmail">Add e-mail</button>

<input id="team_authority_emails" name="team[authority_emails]" type="hidden" value="{asvxcvxcvva@gmail.com,test@test.com.au}">

<!-- a div so you can see the result -->
<div id="out"></div>

Thank you, this answer makes the most sense to me and you reminded me to validate emails as well! — Thomas Taylor, May 27 '15 at 04:06

jQuery add form input to hidden field input value in correct format

4 Answers4