CODEWITHSUNDEEP
javascript
buckdanny
buckdanny

Reputation: 357

Combine Strings coming from different inputs

I have some inputs with data-attributes

<form>
    <input style="width: 300px" data-schrift="SchriftEins" name="input1" id="input1" /></br></br>
    <input style="width: 300px" data-schrift="SchriftEins"  name="input2" id="input2" /></br></br>
    <input style="width: 300px" data-schrift="SchriftZwei"  name="input3" id="input3" /></br></br>

</form>

and i need to combine the values of the inputs with the same data-attributes

i create an array inputs that should store the results at the end like this: 

[SchriftEins: "from first input & from second input", SchriftZwei: "from third input "]

At the moment I have something like this:

var inputs = new Array();

$("form").on("keydown",function(e){
    $("form :input").each(function(){
        var schrift = $(this).data("schrift");
        var value = $(this).val();
        inputs[schrift] = value;     
    });
    console.log(inputs);
});

this code will overwrite the value how can i fix this?

thanks alot!

Upvotes: 1

Views: 50

Answers (3)

ak_
ak_

Reputation: 2815

Like others have mentioned, you'll probably want to use an object instead of an array. You'll also want to use keyup, and make sure you aren't appending new data to old data. Something like this should work:

JavaScript

var inputs = {};
//this should use keyup instead of key down
$("form").on("keyup",function(e){
        //inputs needs to be reset, otherwise the next keyup will continue to append the values to old data
        inputs = {};
    $("input").each(function(i){
        var schrift = $(this).data("schrift");
        var value = $(this).val();
        //if the property has already been set, append the next matching schrift, otherwise just set the property to the schrift
        inputs[schrift] = inputs[schrift] == null ? value : inputs[schrift] + ' ' + value;
    });
    console.log(inputs);
});

Some notes:

  1. Changed the array to an object, as others have also mentioned.
  2. Changed keydown to keyup, because on keydown the character entered will not yet be available, so the inputs variable will always be one character behind what the user has entered
  3. Reset the inputs object each time the user enters information. This prevents the loop from appending new data to the existing old data.
  4. Added the ternary operation to append the value to an existing property, if one exists.

You can see it working here: https://jsfiddle.net/axp1nxom/2/

Hope that helps!

Upvotes: 2

Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1670

You are overwriting what the value is. What you are wanting it sounds like is a dictionary type of object. Try the following if you want an array:

var inputs = new Array();

$("form").on("keydown",function(e){
    $("form :input").each(function(){
        var schrift = $(this).data("schrift");
        var value = $(this).val();
        inputs.push(value);     
    });
    console.log(inputs);
});

Or if you want a dictionary with named keys and values:

var obj = {
key1: value1,
key2: value2
};

$("form").on("keydown",function(e){
    $("form :input").each(function(){
        var schrift = $(this).data("schrift");
        var value = $(this).val();
        obj[schrift] = value;        
    });
    console.log(inputs);
});

Then use it like the following:

 var myValue = obj[schrift];

Hopefully this helps in what you were needing.

Upvotes: 0

Jo&#227;o Paulo Tannus
Jo&#227;o Paulo Tannus

Reputation: 1

I think you wanted to use an object not an array there.

Try defining the variable input like this:

var inputs = {};

And you will see a result like you wanted. More on objects: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object

If you really want an array will will have to use .push to add. You can see more about arrays here https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array

Edit: Also I see that 2 inputs have the same data-schrift value "SchriftEins". This will overwrite one over the other.

Upvotes: 0

Related Questions