CODEWITHSUNDEEP
javascriptjquery
melvnberd
melvnberd

Reputation: 3163

Assign Value on a specific hidden field javascript/jquery

Good Day!

How do I put value on my hidden field in the row using JavaScript or jQuery?

Heres my js:

function removeRow(){

 $('input#deleteId').val("yes");
 $(this).closest('tr').hide();
 return false;

 };

but the code above changes all hidden fields with the class of deleteId on my table, my problem is how can I change the hidden field value of the specific row where I clicked the remove button? My table structure is like this:

<table>
<tr>
   <td>itemName</td>
   <td>itemPrice<input type="hidden" id="deleteId" /><td>
   <td><a href="#">remove</a></td>
<tr>
</table>

and by the wat its an external js file.

Thank you very much for your time!

Upvotes: 0

Views: 1050

Answers (2)

Brian Ogden
Brian Ogden

Reputation: 19212

You could use id="deletedId" in your input. But an id should be unique for the page, so it's probably more appropriate to use a class "identifier" in your case.

JsFiddle: http://jsfiddle.net/B9De7/

$(function(){
    $('a').on('click', function(){
        removeRow(this);
    });
});

function removeRow(anchorElementClicked){
     var row = $(anchorElementClicked).closest('tr');
     row.find('input.hidden-deleted-id').val("yes");
     row.hide();
     //no need to return false or stop eventPropagation
}

<table>
    <tr>
       <td>itemName</td>
       <td>itemPrice<input type="hidden" class="hidden-deleted-id" /><td>
       <td><a href="#">remove</a></td>
    <tr>
</table>

Upvotes: 4

Alberto
Alberto

Reputation: 672

Your code is not doing what you want because it's incorrect, try this:

<table>
<tr>
   <td>itemName</td>
   <td>itemPrice<td>
   <td><a class='removeRow' id='element-id'>remove</a></td>
<tr>
</table>

$(".removeRow").click(function(e) {
    $.post( "page.php", { id: $(this).attr("id") })
    // if you want the answer from the php page, ex to tell user if the remotion succeeded or not
    .done(function( data ) {
        $(this).parent().parent().hide();
        // for example, "data" could be yes/not
        alert( "Removed: "+data );
    });
    e.preventDefault();
});

// PHP PAGE
<?php
//DB Connection stuff
$_POST['id'] is what you get, then you have to 
echo "yes/not" depending on the esit of the query.
that echo is sent back to ajax request.

It should *hide the that contains the element user clicked. e.preventDefault() in necessary to not to make page reload.

EDIT: Now it should set you input tag value to "yes" and hide th row. Why don't use ajax to query the db the same moment the user click on "remove"? If you want I could write you the code.

Upvotes: 1

Related Questions