html - How do I keep a NAME when I disable a button with Javascript? -

i have code similar this:

<input type="submit" name="var1" value="x" onclick="   this.disabled=true;   this.value='submitting...';   this.form.submit();"> 

the problem need name in handler seems disabling button disables name. tried adding 'this.name="var1";' didn't work. know how pass information specific button pressed? doesn't have name. alternative methods welcome.

here's example can do. prevent default event on keypress. allow access attributes. can styling accessing it's data ref.

(function(){        // attach dom    var debug = document.getelementbyid('debug');    var elm = document.queryselectorall('[data-disabled="false"]');        (var = 0; < elm.length; i++) {          elm[i].addeventlistener('click', function(evt) {              // disable default event        evt.preventdefault();                // disabled state        evt.target.dataset.disabled = true;        evt.target.value = 'submitting...';                 // log information dom        debug.innerhtml = this.getattribute('name') + ' still accessible, input disabled disabling click user doesn\nt submit anything, attributes can still read.';                // artificial request, completes in 2 seconds        settimeout(function() {          evt.target.value = 'done!';          evt.target.dataset.disabled = false;        }, 2000);              });          }  })();

input {    border: 1px solid black;    padding: 5px;  }  input[data-disabled="true"]{    background: red;  }

<input type="submit" name="superinput" data-disabled="false" value="submit" />  <div id="debug"></div>