CODEWITHSUNDEEP
javascriptjquery
Shailu
Shailu

Reputation: 163

Enable/ Disable for the textfield with same ID

I have two field named "Input1" and "Input2" with id as "inputID". If I click "Input1" field,Input2 field to be disable. And after reset, If I click "Input2" field,Text" Input1 should be disable. I can able to achieve this by different id in javascript. But I need to get this with same id. Can anyone please me on this?

<!DOCTYPE html>
<html>
<body>
<script>
function myFunc1() {
var input1 = document.getElementById("input1");
var input2= document.getElementById("input2");
if (input1.click){
  document.getElementById("input2").disabled=true;
 } 
}
function myFunc2() {
var input1 = document.getElementById("input1");
var input2= document.getElementById("input2");

if (input2.click) {
  document.getElementById("input1").disabled=true;
}
}
</script>
<table>
  <tr>
    <td>Field1: <input type="text" id="input1" onclick="myFunc1();" /></td>
  </tr>
  <tr>
    <td>Field2  : <input type="text" id="input1" onclick="myFunc2();" /></td>
  </tr>

</table>
</body>
</html>

Upvotes: 0

Views: 2000

Answers (4)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

you can add more inputs with class name inpu and it will works.

Pure JavaScript: 

<!DOCTYPE html>
    <html>
    <head><title>test page</title></head>
    <body>
    <table>
      <tr>
        <td>Field1: <input type="text" class='inpu' onclick="focusonly(this);" /></td>
      </tr>
      <tr>
        <td>Field2  : <input type="text" class='inpu' onclick="focusonly(this);" /></td>
      </tr>
      <tr>
        <td>Field3  : <input type="text" class='inpu' onclick="focusonly(this);" /></td>
      </tr>
      <tr>
        <td>Field4  : <input type="text" class='inpu' onclick="focusonly(this);" /></td>
      </tr>
      <tr>
        <td><button onclick='reset();'>reset</button></td>
      </tr>
    
    </table>
    <script>
    function reset(){
    var inpu = document.getElementsByClassName("inpu");
    for(var i=0;i<inpu.length;i++){
    document.getElementsByClassName("inpu")[i].value = "";
    document.getElementsByClassName("inpu")[i].disabled = false;
    }
    }
    function focusonly(el){
    var inpu = document.getElementsByClassName("inpu");
    for(var i=0;i<inpu.length;i++){
    document.getElementsByClassName("inpu")[i].disabled = true;
    }
    el.disabled = false;
    }
    
    </script>
    </body>
    </html>

Upvotes: 1

gschambial
gschambial

Reputation: 1391

Here is a WORKING FIDDLE for you in pure Jquery.

$(function(){
$('input[type=text]').click(function(){
    $('input[type=text]').each(function(){
       if(!($(this).is(":focus"))){
         $(this).attr('disabled',true);
       }
    });
});

});

But, I would suggest you to keep IDs different and use class instead.

I hope, It will solve your purpose.

Upvotes: 1

Brandon
Brandon

Reputation: 3266

The answer above works, however if you want to make it really dynamic and clean, I'd make a function like this:

$("input[type=text]").click(function() {

  $("input[type=text]").not(this).attr("disabled", true);

});


$("button#reset").click(function() {

  $("input[type=text]").attr("disabled", false);

});

This targets all input[type=text] except the one you clicked. Pretty simple and very little code.

DEMO http://jsbin.com/kegasehagi/edit?html,js,console,output

Upvotes: 1

user1289451
user1289451

Reputation: 921

Like I said in my comment, the id's should be unique, but if you insist on doing this the way you have it planned now, just get the elements by name since they are unique.

function myFunc1() {
var input1 = document.getElementsByName("input1");
var input2= document.getElementsByName("input2");
if (input1.click){
  input2.disabled=true;
 } 
}

Upvotes: 1

Related Questions