How to clear the attribute value of an element using selenium webdriver

Question

I have an element, which is kendo numeric textbox. It has values as well, I can get the value by using this code snippet driver.findElement(By.xpath("xpathlocator_value")).getAttribute("value"); but i want to clear the value and i want to update this element with another value. I tried both the ways like using clear() and alsosendkeys(keys.control +"a",keys.delete) but its not working.

The html code is

    <form id="cashbookForm" class="form">
<div class="widget">
<table class="sTable taskWidget" width="100%" cellspacing="0" cellpadding="0">
<thead>
<tbody>
<tr data-bind="css:ExpenseID()==0?'non-printable':'',click:$root.CloseEditable">
<tr data-bind="css:ExpenseID()==0?'non-printable':''">
<td data-bind="text:Order">2</td>
<td>
<td>
<td>
<td>
<td>
<div style="float: right;">
<span class="k-widget k-numerictextbox noform required" style="text-align: right;">
<span class="k-numeric-wrap k-state-default">
<input class="k-formatted-value noform required k-input" type="text" style="text-align: right; display: inline;" tabindex="0" readonly="readonly">
<input class="noform required k-input" type="text" data-bind="kendoNumericTextBox: { value: Ca_TotalAmount, min: 0,format: '#.00'},uniqueName:true" style="text-align: right; display: none;" data-role="numerictextbox" role="spinbutton" tabindex="0" aria-valuemin="0" aria-valuenow="251.44" name="ko_unique_4">
<span class="k-select">
</span>
</span>
</div>
</td>
<td> </td>
<td class="removeOnPrint">
</tr>
<tr class="removeOnPrint">

Here the numeric textbox present at

<input class="k-formatted-value noform required k-input" type="text" style="text-align: right; display: inline;" tabindex="0" readonly="readonly">

Answer 1

You can use JavascriptExecutor to achieve the goal.

JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("window.document.getElementById("elementID").setAttribute('value', ' ')");

or

JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("window.document.getElementById("elementID").value = ' '");

If you want to use xPath:

JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("document.evaluate('xpath_locator', document, null, 9, null).singleNodeValue.value = ' '"); 

Answer 2

This is a pretty old question, but I'm posting the answer here in case someone finds it useful. If you're using selenium and you want to remove attribute and not clear it, then here's what works:

public static void javascriptRemoveAttribute(WebElement element, WebDriver driver) {
    JavascriptExecutor executor = (JavascriptExecutor) driver;
    executor.executeScript("arguments[0].removeAttribute('required');", element);
}

It is similar to the first answer but they key is removeAttribute. ExecuteScript basically expects an array of elements. So you pass the element when needs to be modified and then remove its attribute.

Answer 3

Using this function you can change the value of the element:

public void clearElementValueByJS(WebElement element, WebDriver driver, Stringvalue) {
    try {
        JavascriptExecutor jse = (JavascriptExecutor) driver;
        jse.executeScript("arguments[0].value='" + value + "'", element);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

OR you can change the inner html value of the element:

public void setInnerHTMLValue(WebElement element, String value) {
    JavascriptExecutor jse = (JavascriptExecutor) driver;
    jse.executeScript("return arguments[0].innerText ='" + value + "'", element);
}