• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 372
  • Last Modified:

JavaScript/jQuery: Reorder VALUES of input/textarea by value

The problem with this code is that the name attribute of the input tag and textarea tag get moved along with everything else in the paragraph so when I save the results the order does not actually save.  

For example, the first textarea should look like this:
<textarea rows="9" cols="99" name="Text_healthcare_Client_List_xb0">Apple</textarea>

Not this:
<textarea rows="9" cols="99" name="Text_healthcare_Client_List_xb1">Apple</textarea>

How can the order of the values be changed but the name attribute be preserved?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 $('#alpha').click(function() {
     $(".item").each(function() {
         sortDem($(this).prevAll(".item:eq(0)"), $(this))
     })
 });


});

function sortDem(prev, curr) {
    if(prev.length>0) {
        var pVal = $("textarea", prev).val().toLowerCase().trim();
        var cVal = $("textarea", curr).val().toLowerCase().trim();
        if(pVal>cVal) {
            curr.insertBefore(prev);
            sortDem(curr.prevAll(".item:eq(0)"), curr); 
        }
    }
}

</script>
</head>
<body>


<div id="fields">
    <p class="item">
        <a class="itemDown"></a>
        <a class="itemUp first"></a>
        <input autocomplete="off" name="Text_healthcare_Client_List_xa0" value="2400195" type="text"><br />
        <textarea rows="9" cols="99" name="Text_healthcare_Client_List_xb0">Zoo</textarea><hr />
    </p>
    <p class="item">
        <a class="itemRemove"></a>
        <a class="itemDown"></a>
        <a class="itemUp"></a>
        <input autocomplete="off" name="Text_healthcare_Client_List_xa1" value="2402014" type="text"><br />
        <textarea rows="9" cols="99" name="Text_healthcare_Client_List_xb1">Apple</textarea><hr />
    </p>
    <p class="item">
        <a class="itemRemove"></a>
        <a class="itemDown"></a>
        <a class="itemUp"></a>
        <input autocomplete="off" name="Text_healthcare_Client_List_xa2" value="2400173" type="text"><br />
        <textarea rows="9" cols="99" name="Text_healthcare_Client_List_xb2">Peach</textarea><hr />
    </p>
</div>

<input type="button" id="alpha" value="Sort" />

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
test page : http://jsfiddle.net/Kp9FD/2/

$(document).ready(function() {

 $('#alpha').click(function() {
     $(".item").each(function() {
         sortDem($(this))
     })
 });

});

function sortDem(curr) {
    var prev = curr.prevAll(".item:eq(0)");
    if(prev.length>0) {
        var pVal = $("textarea", prev).val();
        var cVal = $("textarea", curr).val();
        if(pVal.toLowerCase().trim()>cVal.toLowerCase().trim()) {
            $("textarea", curr).val( pVal );
            $("textarea", prev).val( cVal );
            sortDem(curr); 
        }
    }
}

Open in new window

0
 
hankknightAuthor Commented:
The problem with that code is that it does not change the input that is associated with it.

In the example, "Zoo" is associated with "2400195" but after you sort it, it incorrectly becomes associated with "2400173"
0
 
hankknightAuthor Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now