how to enable a input field and set a value at the same time

Question

<input type= "text" disabled id="ip1">
<button onclick=delete()/>
<script>
    function delete(){
  document.getElementById('ip1').value=''.disabled = false;
}
</script>

I want to make the input field enabled and a set a blank value in a same line. Is it possible? Because i've 12 input fields which will behave same at a time.

score 2 · Answer 1 · answered Nov 20 '17 at 14:07

What you have is invalid syntax. For example, you're trying to access a .disabled property on a string value, and trying to perform two entirely different assignments on a single line of code.

You're doing two things. What you want is two lines of code:

document.getElementById('ip1').disabled = false;
document.getElementById('ip1').value = '';

Or, introduce a variable to perform the document operation only once:

var element = document.getElementById('ip1');
element.disabled = false;
element.value = '';

Omaim · Answer 2 · 2017-11-20T14:15:31.743

function deleteEl(){
  var el = document.getElementById('ip1');
  el.value = 'val';
  el.removeAttribute('disabled');
}

<input type= "text" disabled id="ip1">
<button onclick='delete()'>Delete</button>

You can store the element in a variable and then set value to the element using value and to remove disabled use removeAttribute('disabled').

And don't use delete in function name , its a reserved word in javascript.

Chris Thorsvik · Accepted Answer · 2017-11-20T15:50:25.020

So, if you want the answer to your question, yes, it can be done in one line with jQuery. There is very little reason to do it in one line as single lines are executed more or less the same way that multi-line solutions are. In jQuery, it would look like this:

$('#ip1').val('').prop('disabled', false);

With vanilla javascript, a multi-line solution is required:

document.getElementById('ip1').value = '';
document.getElementById('ip1').disabled = false;

You can also bind two separate function to the onclick if you want:

<button onclick="doSomething();doSomethingElse();" />

For example:

<button onclick="document.getElementById('ip1').removeAttribute('disabled');document.getElementById('ip1').value='';">Click</button>

If you are trying to save space or be more efficient, you should just iterate through the elements using a class or something.

Sir what you have said should work according to me. But i don't know y the disabled attribute removed but the value remain same. Any suggestion for this? — Subhashis Pal, Nov 20 '17 at 14:41
Whoops. Method chaining like that only works in jQuery. You need to use a multi-line solution... I'll try update with a better answer. — Chris Thorsvik, Nov 20 '17 at 14:47

score 0 · Answer 4 · answered Nov 20 '17 at 14:07

0

You have to separate your code

<script>
    function delete(){
        document.getElementById('ip1').disabled = false;
        document.getElementById('ip1').value=''
    }
</script>

answered Nov 20 '17 at 14:07

Sylwek

856
1
9
24

score 0 · Answer 5 · answered Nov 20 '17 at 14:09

You can't do that in one statement. So you would need to create a utility function for that if you want to do that for multiple elements.

function enableAndSetValue(elm, value) {
  elm.disabled = false
  elm.value = value
}

enableAndSetValue(document.getElementById('ip1'), '')

score 0 · Answer 6 · answered Nov 20 '17 at 14:13

0

<script>
    function del() {
        var elem = document.getElementById('ip1');
        elem.disabled = false;
        elem.value = '';
    }
</script>

<input type= "text" disabled id="ip1">
<button onclick="del()">Button</button>

answered Nov 20 '17 at 14:13

Mikhail Katrin

2,304
1
9
17

score 0 · Answer 7 · answered Nov 20 '17 at 14:15

If you provide complete requirement better solution can be provided.

But seeing your current program I am presenting the updated code base on yours.

function deleteIt() {
  var element = document.getElementById('ip1');

  element.value = '';
  element.disabled = false;
  element.focus();
}

<input type="text" disabled id="ip1" />
<button onClick="deleteIt()">Delete</button>

If you have any further doubt feel free to comment. Would love to help.:)

how to enable a input field and set a value at the same time

7 Answers7