How can I set the value of a hidden input field using Jquery?

Question

I am attempting to set the value of a hidden input field to the same as the value of a clicked link.

This is what I have attempted which doesnt work:

$(document).ready(function(){
$(".delete_link").click(function(){
        var deleteID = $(this).attr("data-value"); 
        $("#delete_value").attr("value") = deleteID;
    });
});

The variable deleteID is correctly set.

and the form for reference:

<form name="delete_form" action="delete_post.php" method="POST">
    <p>Please confirm you want to delete this post.</p>
    <input type="submit" id="delete_submit" name="delete_submit" value="confirm" />
    <input type="hidden" id="delete_value" value="" />
</form>

Use jQuery's `data API` for retrieving `data-*` attributes, don't use `attr('data-*')` — Madbreaks, Apr 26 '13 at 16:24
Careful with the submit action. Even if the click trigger is raised, the form will be submitted and there are no warranty that your hidden field will have the value set up. You should handle the submit event of the form and not the delete click. — gustavodidomenico, Apr 26 '13 at 16:30

score 3 · Accepted Answer · edited Apr 26 '13 at 16:34

3

use the val method

$("#delete_value").val(deleteID);

also for data attributes you might want to use the data method

$(this).data('value');

links:

edited Apr 26 '13 at 16:34

Andrew Lewis

5,176
1
26
31

answered Apr 26 '13 at 16:24

house9

20,359
8
55
61

You've overridden the 2nd edit's correction of the syntax error. Somehow I couldn't correct it myself. – Terry Young Apr 26 '13 at 16:28
looks like somebody else fixed it – house9 Apr 26 '13 at 17:21

score 1 · Answer 2 · answered Apr 26 '13 at 16:24

1

For all form elements you need to use .val():

$("#delete_value").val(deleteID);

answered Apr 26 '13 at 16:24

VisioN

143,310
32
282
281

score 0 · Answer 3 · answered Apr 26 '13 at 16:36

A complete example you (http://jsfiddle.net/79HEY/):

HTML

<form id="deleteform" action="delete_post.php" method="POST">
    <p>Please confirm you want to delete this post.</p>
    <input type="submit" data-id="100" id="delete_submit" name="delete_submit" value="confirm" />
    <input type="hidden" id="delete_value" value="" />
</form>

JavaScript

$(document).ready(function(){
    $("#deleteform").submit(function(){
        var deleteID = $("#delete_submit").data("id");
        $("#delete_value").val(deleteID);
        return true;
    });
});

How can I set the value of a hidden input field using Jquery?

3 Answers3

Linked