CODEWITHSUNDEEP
jqueryhtml
AhKing
AhKing

Reputation: 191

How to change appended value based on input id using Jquery

First of all, for good understanding, please go to this fiddle and try out the code i have made.

jsfiddle

Assume i want to create a form and each input should have numbers of boxes of lettter. Also 1 Box == 1 Letter which means i want to seperate the word into letter.

My objective is to create an input like on the fiddle and whatever being write in there will show me the result so that i can take the result and insert to the database but that is different story.

So the question is how i am going to change the value from any of the boxes and the result changed instantly as well.. My current progress is, i still on the process grabbing the id of the box then change the value but it keeps return me letter1.

This is an additional but kinda important as well. how can i take the value of the output? So that i may use the value such as insert to the database or something.

Again, please refer to jsfiddle given.

if this question is a duplicate, please show the link and i hope the problem is pretty similar to mine. [Edited] The reason i am using the box to input something instead of using normal input text is because the form format is like that and i can't change that.

Upvotes: 0

Views: 44

Answers (1)

Nuttertools
Nuttertools

Reputation: 120

Can you try this Jsfidle

Sorry i modify alot of your fiddle

$(document).ready(function (e) 
{
    var tmp = new Array(15);
    var boxCount = 1;
    $('.letter').keyup(function ()
    {
        if ($(this).val() != ''){
            //get only id for use for array index
            var index = $(this).attr('id').replace("letter","");
            //assign string into array
            tmp[index -1] = $(this).val();

            $(this).parent().parent().removeClass("error success");

            // show array by replace ','
            $('#output').html(tmp.toString().replace(/,/g,""));
            $(this).next().focus();  
        }

    });
});

Upvotes: 1

Related Questions