How to get attribute it self in function javascript

Question

i need get attribute name for selector another element this is my html code

//I've tried this but it does not work or maybe there is something wrong
/* $(document).ready(function() {
  $('#btnadd').click(function() {
    alert($(this).attr('name'));
  });
}); */

function addval() {
  var btnini=$(this).attr("name");
  $("#txt"+btnini).show();
  $("#btn"+btnini).show();
  $(this).css("display","none");
}

<!-- I've tried this but it does not work or maybe there is something wrong 
//<button type="button" id="btnadd" name="opsional">Tambahkan</button> -->

<input type="text" id="txt-opsional" style="display:none;" />
<button type="button" onClick="addval()" name="opsional">Tambahkan</button>
<button type="button" id="btn-opsional" style="display:none;">simpan</button>

when i click button "tambahkan", textbox id="txt-opsional" and button id="btn-opsional" will show, so button "tambahkan" will hidden

I hope there is a better suggestion Thank You

Try to pass this in onclick function as onClick="addval(this)" and access this "this" as a function param — syms
– syms, Commented Jul 30, 2015 at 3:39

Arun P Johny · Accepted Answer · 2015-07-30 03:44:49Z

Since you are using inline event handler(not recommended, especially when jQuery is used), you need to pass a reference to the clicked element, you can do it by using this in the inline event handler like

//I've tried this but it does not work or maybe there is something wrong
/* $(document).ready(function() {
  $('#btnadd').click(function() {
    alert($(this).attr('name'));
  });
}); */

function addval(el) {
  var btnini = $(el).attr("name");
  $("#txt-" + btnini).show();//also need to add `-` to txt
  $("#btn-" + btnini).show();
  $(el).css("display", "none");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- I've tried this but it does not work or maybe there is something wrong 
//<button type="button" id="btnadd" name="opsional">Tambahkan</button> -->

<input type="text" id="txt-opsional" style="display:none;" />
<button type="button" onClick="addval(this)" name="opsional">Tambahkan</button>
<button type="button" id="btn-opsional" style="display:none;">simpan</button>

Using jQuery handler

//I've tried this but it does not work or maybe there is something wrong
$(document).ready(function() {
  $('.addval').click(function() {
    var $this = $(this),
      btnini = $this.attr("name");
    $("#txt-" + btnini).show(); //also need to add `-` to txt
    $("#btn-" + btnini).show();
    $this.hide();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- I've tried this but it does not work or maybe there is something wrong 
//<button type="button" id="btnadd" name="opsional">Tambahkan</button> -->

<input type="text" id="txt-opsional" style="display:none;" />
<button type="button" class="addval" name="opsional">Tambahkan</button>
<button type="button" id="btn-opsional" style="display:none;">simpan</button>

sfletche · Accepted Answer · 2015-07-30 03:50:02Z

1

You left out the dash (-) in the selectors

function addval() {
  var btnini=$(this).attr("name");
  $("#txt-"+btnini).show();  // changed "#txt" to "#txt-"
  $("#btn-"+btnini).show();  // changed "#btn" to "#btn-"
  $(this).css("display","none");
}

And you'll need to send this to the addVal function

<button type="button" onClick="addval(this)" name="opsional">Tambahkan</button>

edited Jul 30, 2015 at 3:50

answered Jul 30, 2015 at 3:43

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

Comments

syms · Accepted Answer · 2015-07-30 03:43:38Z

0

Try,

function addval($this) {
  var btnini = $this.attr("name");
  $("#txt-" + btnini).show();
  $("#btn-" + btnini).show();
  $this.css("display", "none");
}

<input type="text" id="txt-opsional" style="display:none;" />
<button type="button" onClick="addval(this)" name="opsional">Tambahkan</button>
<button type="button" id="btn-opsional" style="display:none;">simpan</button>

answered Jul 30, 2015 at 3:43

syms

4112 silver badges12 bronze badges

Comments

Thi Tran · Accepted Answer · 2015-07-30 03:43:40Z

0

Try this

function clickMe(button) {
  alert($(button).attr('name'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button onclick="clickMe(this);" name="abc">Click me</button>

answered Jul 30, 2015 at 3:43

Thi Tran

7015 silver badges11 bronze badges

Comments

Jose Mar · Accepted Answer · 2015-07-30 03:48:00Z

0

<button type="button" onClick="addval.apply(this)"  name="opsional">Tambahkan</button>

Bind this to addval()!

Make the addval's context be the button element. In this way you needn't modify your addval function.

answered Jul 30, 2015 at 3:48

Jose Mar

7046 silver badges8 bronze badges

Comments

Rod Ferreira · Accepted Answer · 2015-07-30 04:02:12Z

0

Just change the onclick function at the button to onClick="addval.apply(this)" this will make the "this" variable inside the function to be the button object. And dont forget to append the "-" char at jQuery selector: $("#txt-" and $("#btn-"

answered Jul 30, 2015 at 4:02

Rod Ferreira

1817 bronze badges

Collectives™ on Stack Overflow

How to get attribute it self in function javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related