jquery and modifying two hidden input fields

Question

I have a table where I display some information for a user to "approve" or "deny" certain projects. I created two images: a cross sign for denials, and a check sign for approvals. On each click, I am adding the unique id to its respective hidden form field (rejectedProjs and approvedProjs). In addition, if a user clicked on "deny" then I am displaying a text box so that they can enter a reason. This is what I have so far:

 $("a[name^=reject-]").each(function() {

     var name = $(this).attr('name');    
     var p_project_number = name.split('-')[1]; 
   $("a[name=reject-"+p_project_number+"]").tipbox("Reject pricing for "+p_project_number, 0, "reject-"+p_project_number);
     $(this).click(function() { 
$("textarea[name=rejReason-"+p_project_number+"]").show();   
rP = $("#rejectedProjs").val();
$("#rejectedProjs").val(rP+','+p_project_number);
alert('rejects: '+$("#rejectedProjs").val());
     });   
 });

There are two problems. First, if I click on the deny button twice for the same project, the alert box will display the project number twice. How can I check the $("#rejectedProjs").val() to see if that project number is already there? Second, if say I deny first and then approve, I need to remove that project from $("#rejectedProjs").val(). Not sure how to do this. thanks in advance.

Answer 1

One option is instead of having 1 input that you manipulate, include unique hidden inputs for each of the projects. Then change only that input when the button is pressed. You then have several options: aggregrate them on the client side on submit, aggregrate them automatically on the server side (depends on your server side).

Answer 2

I'd use an array instead of a hidden input. This way you can easily search through the array for already existing values, add new values, and remove values. Then, after the manipulation is complete set the value of a hidden input to the array using array.join()

A very simple example will look something like this:

var accepted = new Array();
var rejected = new  Array();

function process(action, id) {
    if(action == "accept") {
        // look for item in accepted array, add if doesnt exist
        if(findInArray(accepted, id) == -1) {
            accepted.push(id);
        }

        // look for item in rejected array, remove if exists

        var rejectedIdx = findInArray(rejected, id);
        if(rejectedIdx == -1) {
            accepted.splice(rejectedIdx, 1);
        }
    } else {
        // The same, but for rejected ids. Not included for brevity...
    }

    // update hidden inputs
    $("hiddenAccepted").val(accepted.join(","));
    $("hiddenRejected").val(rejectedaccepted.join(","));
}

function findInArray(array, value) {
    for(var i = 0; i < array.length; ++i) {
        if(array[i] == value] return i;
    }
    return -1;
}

and dont forget to actually include the hidden inputs in your page:

<input type="hidden" name="hiddenAccepted" />
<input type="hidden" name="hiddenRejected" />

Answer 3

I would take the following approach to your task:

<div class="project">
    <span>some project elements</span>
    <input name="number" type="hidden" value="1"/>
    <a class="reject">Reject</a>
    <a class="approve">Approve</a>
</div>

<script>
    // Manipulating css classes on reject.
    $(".reject").click(function(){
        $(this).parent().removeClass("approved").addClass("rejected");
    });

    // How to get all rejected numbers?
    var rejected_numbers = $.map($(".project.rejected :hidden"), function(){
        return $(this).val();
    }).join(",");
</script>

Answer 4

Use a class for eg. 'selected' to identify projects that have been approved. Whenever the button is clicked, run a check & then perform action accordingly.