3
\$\begingroup\$

I have an input with numbers 1, 2, 3, 4 and I want to change the order of this number dynamically according to users input. You can find my code below and also a running example here.

HTML

<input type="text" name="name1" id="1" value="1" class="order">
<input type="text" name="name2" id="2" value="2" class="order">
<input type="text" name="name3" id="3" value="3" class="order">
<input type="text" name="name4" id="4" value="4" class="order">

jQuery

var myArray = new Array();    
        $(".order").each(function() {
            myArray[$(this).attr('id')] = $(this).val();

        });//array to use when id and value are equal

    $('.order').live('change', function(){
            previousVal = $(this).val();
            previousId = $(this).attr('id');
            });//on change get this value as static to use later

    $('input.order').on('blur', function() {
    var idofnewvalue = $(this).attr('id');
    var newvalue = $(this).val();
    $(".order").each(function(){
            if (newvalue == $(this).val()) {
                    if(idofnewvalue != $(this).attr('id')){
                    var duplicate = $(this).val();
                        if(+previousVal > +previousId){
                            var plus = +duplicate - 1;
                            $("#"+duplicate).val(plus);

                        }else if(+previousVal < +previousId){
                            var plus = +duplicate + 1;
                            $("#"+duplicate).val(plus);
                        }else if(+previousVal == +previousId){
                            for ( var key in myArray) {

                                if (myArray.hasOwnProperty(key)) {
                                    $("#"+key).val(key);

                                  }
                                }

                        }

                    }
                    $("#"+duplicate).trigger("blur");//triggers blur event untill done
            }
        });
    });

The above code changes the value of the input according to users input.

For example, if the input is 1 2 3 4 and the user changes 4 to be 2, then the result will be 1 3 4 2. If the user changes 2 to be 4 then the result will be 1 4 2 3.

Please tell me what you think about the above code.

\$\endgroup\$
1
\$\begingroup\$

Still an interesting question,

I am afraid your approach is very convoluted, if I understand you correctly you want to sort the values in the text boxes after blur triggers. In order to accomplish I would

  • Get the input boxes
  • Get the values
  • Sort the values
  • Assign back the values :

Code : http://jsfiddle.net/d9VDM/ :

function compareNumbers(a, b) {
  return a - b;
}

$('input.order').on('blur', function () {

    var inputs = $('input.order'), values = [];

    for( var i = 0 ; i < inputs.length ; i++ ){
      values.push( inputs[i].value );
    }

    values.sort( compareNumbers ); //Default sort is alpanumeric, so 300 < 4

    for( var i = 0 ; i < inputs.length ; i++ ){
      inputs[i].value = values[i];
    }    
});
\$\endgroup\$
  • \$\begingroup\$ I liked what you did with the code. Not exactly what i was trying to achieve but i can try and develop it based on this approach. To your comment "cant understand why you would need this functionality". Imagine a menu of a website that is constructed from the database. e.g. Home, About Us, Contact. Home is at position One, About Us at position 2 and Contact at position 3. So i developed the above code so that i can sort the order of that menu from back end. that is why if i wanted Contact to move from position three to first then Home would go Second and About Us third. \$\endgroup\$ – dixromos98 May 24 '14 at 10:33
1
\$\begingroup\$

Interesting question,

I cant understand why you would need this functionality. It does not seem to sort at all, but in same cases it will remove dupes.

This code is so bad, you should first use the built in tools in JsFiddle and then come back.

Fiddle Screenshot

Click TidyUp first, your JavaScript indenting is all over the place. Then click JsHint, every red dot on the left hand side indicates 1 problem, there are many lines with multiple problems, so you will have to do this exercise multiple times.

\$\endgroup\$
  • \$\begingroup\$ @kojin. Thank you for your comment. i corrected the red dots and added a new link. Yes the method is not actually sorting it does removed duplicates. I was looking for suggestions in order to convert this into sorting \$\endgroup\$ – dixromos98 May 23 '14 at 15:00
  • \$\begingroup\$ So, technically ( I would suggest next time ), your cleaned up code would be a new question. But just for you, I will post a 2nd answer. \$\endgroup\$ – konijn May 23 '14 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.