What to use instead of innerHTML in jQuery to get value?

Question

<table border="0" cellpadding="10" cellspacing="1" id="edit">
        <tr>
        <div class="input-label">
        <td>Name:</td>
        </div>
        <td><div class="input-tbox"><input type="text" name="Myname" id="names" contenteditable="true" onblur="saveToDatabse(this,'name','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $name; ?>"/></div></td>
        </tr>

         <tr>
        <td>Username:</td>
        <td><div class="input-tbox"><input type="text" name="myuser" id="user" contenteditable="true" onblur="saveToDatabse(this,'userName','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $username; ?>" /></div></td>
        </tr>

         <tr>
        <td>Email:</td>
        <td><div class="input-tbox"><input type="text" name="mail" id="email" contenteditable="true" onblur="saveToDatabse(this,'email','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $usermail; ?>" /></div></td>
        </tr>
</table>

I have saveToDatabase() function at onblur event. This is my function,

function saveToDatabse(editableObj,column,id){
    $(editableObj).css("background","#FFF url('../images/loaderIcon.gif')no-repeat right");
    $.ajax({
        url:"update.php",
        type:"POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        cache: false,        
        sucsess:function(data){
            $(editableObj).css("background","#FDFDFD");
        }
    });
}

when I'm updating it set a blank value. I it's think because the use of innerHTML . I know innerHTML is not for jquery. So what can I use there for getting the value from this object of saveToDatabse() function?

`.html()` function. see doc http://api.jquery.com/html/ to your answer. But you are trying to get value of input though `innerHTML` , you should use `.value` instead. — The_ehT, Aug 04 '16 at 08:00
Why do you have `contenteditable="true"` on an `input`? Remove that attribute and just use the `value` property in your JS code. — Rory McCrossan, Aug 04 '16 at 08:01
Possible duplicate of [How to replace innerHTML of a div using jQuery?](http://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery) — thatOneGuy, Aug 04 '16 at 08:01

score 1 · Answer 1 · answered Aug 04 '16 at 08:09

<table border="0" cellpadding="10" cellspacing="1" id="edit">
        <tr>
        <div class="input-label">
        <td>Name:</td>
        </div>
        <td><div class="input-tbox"><input type="text" name="Myname" id="names" contenteditable="true" onblur="saveToDatabse(this,'name','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $name; ?>"/></div></td>
        </tr>

         <tr>
        <td>Username:</td>
        <td><div class="input-tbox"><input type="text" name="myuser" id="user" contenteditable="true" onblur="saveToDatabse(this,'userName','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $username; ?>" /></div></td>
        </tr>

         <tr>
        <td>Email:</td>
        <td><div class="input-tbox"><input type="text" name="mail" id="email" contenteditable="true" onblur="saveToDatabse(this,'email','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $usermail; ?>" /></div></td>
        </tr>
</table>

Jquery code If you want the value from textbox you should use value instead of innerHTML

function saveToDatabse(editableObj,column,id){
    $(editableObj).css("background","#FFF url('../images/loaderIcon.gif')no-repeat right");
    $.ajax({
        url:"update.php",
        type:"POST",
        data:'column='+column+'&editval='+editableObj.value+'&id='+id,
        cache: false,        
        sucsess:function(data){
            $(editableObj).css("background","#FDFDFD");
        }
    });
}

score 1 · Accepted Answer · answered Aug 04 '16 at 08:11

 $.ajax({
        url:"update.php",
        type:"POST",
        data:({'column':column,'editval':editableObj.value,'id':id}),
        cache: false,        
        sucsess:function(data){
            $(editableObj).css("background","#FDFDFD");
        },
        error:function(data){
            alert(data); /*this will help to to find the error*/
        }
    });

What to use instead of innerHTML in jQuery to get value?

2 Answers2