CODEWITHSUNDEEP
javascriptjqueryhtml
TheLettuceMaster
TheLettuceMaster

Reputation: 15744

Getting Undefined when trying to get Value from Input box built thru jQuery

HTML:

<input value='Rename' type='button'  onclick='RenameGlobalPhase({$row['id']});'
<span id='renameGlobalPhase{$row['id']}'>" . $row['phase'] . "</span>

Here is my JS code:

function RenameGlobalPhase(id)// {{{
{
    var phase = $('#renameGlobalPhase' + id).html();
    $('#renameGlobalPhase' + id).replaceWith("<input id='#renameGlobalPhase" + id + "' type='text' onblur='SaveNewPhaseName(" + id + ");' value='" + phase + "' />");
    $('#renameGlobalPhase' + id).focus();
} // }}}

function SaveNewPhaseName(id)// {{{
{
    var newPhase = $('#renameGlobalPhase' + id).val();  
    alert(newPhase);
    $('#renameGlobalPhase' + id).replaceWith('<span>' + newPhase + '</span>');
} // }}}

So when user clicks the input button above, I turn a span next to it into an input field so user can rename the value. And in onblur (newly created from jQuery for that new input field), I want to save the new value and return back to span.

The alert shows an undefined value. Can anyone see what is wrong?

Upvotes: 0

Views: 293

Answers (1)

Andreas
Andreas

Reputation: 21911

Remove the # from the id

Change

.replaceWith("<input id='#renameGlobalPhase" + id + "'

to

.replaceWith("<input id='renameGlobalPhase" + id + "'

fiddle

Upvotes: 4

Related Questions