Assign Value on a specific hidden field javascript/jquery

Question

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!

Brian Ogden · Accepted Answer · 2013-12-08 02:46:59Z

4

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>

edited Dec 8, 2013 at 2:46

answered Dec 8, 2013 at 0:58

Brian Ogden

19.3k11 gold badges107 silver badges186 bronze badges

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

3 Comments

melvnberd Over a year ago

Finally it worked! Thank you very much @Brian Ogden! I already tried using find earlier but i dont know, i cant get it working xD! but with your code it finally worked! Have a good Day!

Brian Ogden Over a year ago

That is because "this" in your removeRow function in your code wasn't what you thought it was. "this" was the javascript window object in your code. That is why I pass "this" to removeRow. jQuery was nice enough to set "this" to element that was clicked, in this case an <a> but this will be changed by the time removeRow is called, that is why I pass "this" to removeRow so you have the <a> that was clicked. Using the argument passed into removeRow, closet and find will work within removeRow as expected. I updated my answer and renamed the parameter from "td" to "anchorElementClicked".

melvnberd Over a year ago

oh! now i see whats causing the error! honestly I didnt know about that! I learned something new today! thanks to you! ill update my code with what youve provided now!

Alberto · Accepted Answer · 2013-12-08 01:27:01Z

1

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.

edited Dec 8, 2013 at 1:27

answered Dec 8, 2013 at 1:04

Alberto

67214 silver badges26 bronze badges

6 Comments

melvnberd Over a year ago

thank you for your comment @alberto zannatta! But i was trying to hide the row so that i can pass the hidden field's value on a post with the value of "yes" that then i can delete the row on the database :)

melvnberd Over a year ago

I think I could settle for non-ajax for now, I think its more appropriate not to use AJAX so that i can give time for the user to finalize what his doing before he can update the form. But Im not that sure yet! anyways Thank you very much for the TIME and willingness to help. Have a good day!

Alberto Over a year ago

I suggest you to use ajax, maybe you can ask the user to confirm his action every time he tries to remove a row with confirm ( w3schools.com/jsref/met_win_confirm.asp )

melvnberd Over a year ago

yeah im also considering that option! I will also ask for the opinion of the user if its more convenient for him! actually im doing a purchase order with this code (just to let you know) ;)

Alberto Over a year ago

Don't know how your page is structured, but if you have a list of products and you want the user to leave on the page only what he wants to buy, you can consider maybe to set every row, for example, in black and white and only when user select a product, the background of that row becomes green... So, then, with $(".toBuy").each(function() you can easily select all the selected products and proceed with the order...

|

Collectives™ on Stack Overflow

Assign Value on a specific hidden field javascript/jquery

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related