JQuery Getting Value of Input Box in On Click Event

Question

There's a lot of other threads on this topic but none of them solve my issue. I'm trying to get the value from a input field which I just inserted. I insert my input box using this line of javascript:

processName.innerHTML = '<input type="text" id="ProcessNameChange" value="' + oldName + '" >';`

Then I try to access it using:

var newName = $(this).closest("#ProcessNameChange").val();

Both of these are wrapped in an event, a button click event. Below is the entire function if you'd like all of it. Also, if you have a better way of coding anything I wrote, feel free to share it.

$('.Edit').click(function () {
            if ($(this).attr("id") != "submitUpdate") {
                $(this).attr("id", "submitUpdate");
                $(this).text("Submit");
                var closestTR = $(this).closest("tr");
                var processName = closestTR.children()[2];
                var processDescription = closestTR.children()[3];
                var processID = closestTR.children()[4];
                var oldName = processName.innerHTML;
                var oldDesc = processDescription.innerHTML;
                processName.innerHTML = '<input type="text" id="ProcessNameChange" value="' + oldName + '" >';
                processDescription.innerHTML = '<input type="text" id="ProcessDescChange" value="' + oldDesc + '" > ';
                submitButtonClick();
            } else {
                var newName = $(this).closest("#ProcessNameChange").val(); 
                var newDesc = $(this).closest("#ProcessDescChange").val();
                var processID = $(this).closest("tr").children()[4];

            }

--> Related to Comments: The HTML for the input box always stays as shown below: It's all made via a repeater than modified with javascript.

<tr>
<td class="grid-main-detail"></td>
    <td>
        <input id="ProcessNameChange" type="text" value="PNameOld">
    </td>
    <td>
        <input id="ProcessDescChange" type="text" value="PDescOld">
    </td>
    <td>
    <td>3547556300824952452</td>
    <td>Me </td>
    <td>7/19/2013 2:32:48 PM</td>   
</tr>

Thanks!

Unless your .edit class is inside of your input which is not based on your js, closest is not gonna work. api.jquery.com/closest — Huangism
– Huangism, Commented Jul 25, 2013 at 19:19
@Huangism, the HTML never changes in the input box. Once I insert it, it is always <input id="ProcessNameChange" type="text" value="ValueOfOldName"> - even after I change it. — gbam
– gbam, Commented Jul 25, 2013 at 19:21

Huangism · Accepted Answer · 2013-07-25 19:37:05Z

2

You are using the closest selector incorrectly

see this fiddle

http://jsfiddle.net/Td6Wx/3/

<div class="test"></div>
<a href="#" class="test2">asdasdas</a>

closest() (http://api.jquery.com/closest) travels up through its ANCESTORS, in your case .Edit is not a child of the input so of course it will not work. If you post your html structure we can probably provide a correct solution

edited Jul 25, 2013 at 19:37

answered Jul 25, 2013 at 19:26

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

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

2 Comments

gbam Over a year ago

Thanks! Also, this is relating to Blurfus's answer below. If I add a 2nd instance of ProcessNameChange, it can't have the same ID so will javascript remain it or is it possible to insert it incorrect?

Huangism Over a year ago

I use a class instead if you have more than 1, I don't see where .Edit is in your html, can you clarify please?

blurfus · Accepted Answer · 2013-07-25 19:41:31Z

1

One question: why are you accessing the value of the input like

var newName = $(this).closest("#ProcessNameChange").val();

instead of:

var newName = $("#ProcessNameChange").val();

?

Since the item is unique (by virtue of its id attribute), I do not see a need to use .closest() to get to it (and its value).

Do you really need to select the input field in such a way?

answered Jul 25, 2013 at 19:41

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

1 Comment

gbam Over a year ago

Since I add the value via javascript I was afraid the value may not be unique. Is that true?

roland · Accepted Answer · 2013-07-25 19:40:45Z

0

I would recommend to get rid of innerHTML to stay focused on jQuery methods such as .append() and $() to create elements. Besides I suppose you are looking for td tr's children.

var oldName = processName.text();
var oldDesc = processDescription.text();
processName.append($('<input type="text" id="ProcessNameChange" value="' + oldName + '" >'));
processDescription.append($('<input type="text" id="ProcessDescChange" value="' + oldDesc + '" > '));

Hope this helps,

R.

answered Jul 25, 2013 at 19:40

roland

7,7956 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

JQuery Getting Value of Input Box in On Click Event

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related