CODEWITHSUNDEEP
javascripthtmlformsinputdisabled-input
Subhashis Pal
Subhashis Pal

Reputation: 149

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

<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.

Upvotes: 0

Views: 2557

Answers (7)

Chris Thorsvik
Chris Thorsvik

Reputation: 470

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.

Upvotes: 1

Ronit Mukherjee
Ronit Mukherjee

Reputation: 405

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.:)

Upvotes: 0

Omaim
Omaim

Reputation: 234

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.

Upvotes: 1

Mikhail Katrin
Mikhail Katrin

Reputation: 2384

<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>

Upvotes: 0

t.niese
t.niese

Reputation: 40842

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'), '')

Upvotes: 0

Sylwek
Sylwek

Reputation: 866

You have to separate your code

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

Upvotes: 0

David
David

Reputation: 218827

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 = '';

Upvotes: 2

Related Questions