Sort text fields based on position javascript

Question

I have 6 text fields in vertical alignment in a form with values corresponding to it's position. Each text field has a fruit name associated to it which aren't editable (the editable text fields are like serial numbers, if you may)
See JSFIDDLE URL

1 Apple
2 Banana
3 Cranberry
4 Date
5 Elderberry
6 Fennel

respectively. The user can edit and change (only the number, the fruit names are not editable) their values between 1 to 6 (I have a separate javascript function that won't let the user to input anything other than positive integers and not above the maximum count). I want to write a javascript/jquery function that will sort the numbers by following methodology:

Suppose the user changes value 3 to 5, it means the textbox with value 3 is moved to 5th position. This means the values 4 and 5 are pushed up to values 3 and 4 respectively (like a pop and insert in a random access array). So now the new values will be

1 Apple
2 Banana
5 Cranberry    <-- user edited this from 3 to 5
3 Date         <-- Javascript changed this
4 Elderberry   <-- Javascript changed this 
6 Fennel

Notice that the value 3 is in the 4th position and the value 4 is in the 5th position and the values 1,2 and 6 remain unaffected.

Now once again if the value 4 (now corresponding to Elderberry) is changed to 1, we apply the same logic and the output after javascript sorting will look like this

2 Apple
3 Banana
5 Cranberry
4 Date
1 Elderberry   <-- user changed value from 4 to 1
6 Fennel

Now when the user saves and reloads the page, the items and their corresponding index gets written into the database and now will look like this,

1 Elderberry
2 Apple
3 Banana
4 Date
5 Cranberry
6 Fennel

Thanks in advance. Any suggestion or help of any kind is appreciated!

Code that I tried:

function sort(oldnumber, newnumber) {
    var widget = $('#id'+oldnumber);  //assuming the text boxes are id1, id2, ... 
    if(oldnumber < newnumber) {
        for(var i = oldnumber+1; i <= newnumber; i++) {
            $('#id'+i).val(i-1);
        }
    }
    else {
        for(var i = oldnumber-1; i >= newnumber; i++) {
            $('#id'+i).val(i+1);
        }
    }
}

I did not get the logic.. in the first example, the places of the items did not change, but in the second example it changed, their order is different. Can you provide several examples more ? — renakre
– renakre, Commented Apr 14, 2015 at 22:26
The places of the items get saved based on their current index. In the first example the places didn't switch because the page wasn't saved but just the value of the serial number was sorted. — crazyim5
– crazyim5, Commented Apr 14, 2015 at 22:29

sudee · Accepted Answer · 2015-04-15 00:47:35Z

1

With the insertBefore method you can easily reorder the rows. Reindexing is simply done after the insertion. Here is a simple demonstration: http://jsfiddle.net/cgb2qLj2/

$('.row .num').on('change', function (evt) {
    var num = $(this).val();
    $(this).parent().insertBefore($('.row:nth-child('+num+')'));
    $('.row .num').each(function (i, input) {
        $(input).val(i + 1);
    });
});

EDIT: Without changing the order of the rows, it's a bit more complicated with some extra conditions, but it gets the job done. Note that we also have to save the previous value for the correct behaviour.

Updated fiddle: http://jsfiddle.net/cgb2qLj2/3/

Updated code:

var val = $(input).val();
if (input != self) {
    if (val > old && val <= num) {
        $(input).val(+val - 1);
    } else if (val < old && val >= num) {
        $(input).val(+val + 1);
    }
}

edited Apr 15, 2015 at 0:47

answered Apr 14, 2015 at 22:51

sudee

7839 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

crazyim5 Over a year ago

Worked like a charm. But I don't want the text to be sorted. It's an old page and my product manager wants to keep it un-editable for now! :D

sudee Over a year ago

So you only want to change the numbers?

crazyim5 Over a year ago

Another reason I don't want it to be flipping Ajax style is because there are many other fields associated with the serial number. I just gave fruit name as an example.

crazyim5 Over a year ago

Yes just flip the numbers keeping everything else the same aka just change the input text box value.

crazyim5 Over a year ago

Worked as I just wanted. Perfect solution! Thanks a ton!

Anoop · Accepted Answer · 2015-04-14 21:55:50Z

0

I have created a jsfiddle

Changing position of row based on input.

HTML

<div> <input >1 Elderberry</div>
<div> <input >2 Apple</div>
<div> <input >3 Banana</div>
<div> <input >4 Date</div>
<div> <input >5 Cranberry</div>
<div> <input >6 Fennel</div>

JS

$("input").blur(function(){
    var parent =    $(this).parent();
    if(this.value == parent.siblings().length+1) {
            $(parent.siblings()[this.value-2]).after(parent);
        return;
    }
    $(parent.siblings()[this.value-1]).before(parent);
});

answered Apr 14, 2015 at 21:55

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

1 Comment

crazyim5 Over a year ago

Thanks for the answer. That's not what I meant. The numbers are editable. Please see my jsfiddle url in the question.

Collectives™ on Stack Overflow

Sort text fields based on position javascript

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related