Modify a form button using jQuery

Question

I have a button that looks like the following:

<button type="submit" class="desktop-button tiny" onclick="document.stacks_in_3151032_page6.formAction.value = 'login';">LOGIN</button>

I am unable to modify the code of the button so I want to know if I can add a name to the button using jQuery or JavaScript? I want the button to look like the following:

<button type="submit" class="desktop-button tiny" name="login_button" onclick="document.stacks_in_3151032_page6.formAction.value = 'login';">LOGIN</button>

You can use attr('name', 'login_button'); to do what you need, however this sounds like an XY question. What is the issue you're trying to solve by adding the name attribute? — Rory McCrossan
– Rory McCrossan, Commented Mar 24, 2017 at 10:40
Quite easy. document.querySelector(???).setAttribute('name', 'login_button')'. But for best answer you need to provide more details. You don't want to select this button by very generic class .tiny. So in order to locate button reliably, you need to base selector on HTML structure. — dfsq
– dfsq, Commented Mar 24, 2017 at 10:41
It's a login "stack" that I can't edit and I want to be able to write the last login date and time to the DB. The way I am thinking of doing this is to use if (isset($_POST['login_button'])) and then update the DB with the date and time. — John Higgins
– John Higgins, Commented Mar 24, 2017 at 10:45
When user logins, it must check his credential in server, So why you dont save the time of login in server? I mean you do not need to send login time from client to server. — Farzin Kanzi
– Farzin Kanzi, Commented Mar 24, 2017 at 10:47

Erazihel · Accepted Answer · 2017-03-24 10:48:15Z

1

You can achieve this using:

jQuery:

$('.desktop-button.tiny').attr('name', 'login_button');

Or Javascript:

document.querySelector(".desktop-button.tiny").setAttribute("name", "login_button");

var addNameAttr = function () {
  $('.desktop-button.tiny').attr('name', 'login_button');
  console.log($('.desktop-button.tiny').attr('name'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="desktop-button tiny" onclick="addNameAttr()">LOGIN</button>

edited Mar 24, 2017 at 10:48

answered Mar 24, 2017 at 10:42

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Higgins Over a year ago

Thanks but I am not able to amend the button code to add the id.

Erazihel Over a year ago

I've edited the answer, you can use the class instead of adding an id

John Higgins Over a year ago

Great - I am very much a newbie with jQuery and Javascript. Do I need to add some sort of onLoad type code to make the above work?

Erazihel Over a year ago

Just load your javascript file in your HTML using the <script> tag. If you want to use jQuery as well, you need to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> like I did in the snippet.

leroydev · Accepted Answer · 2017-03-24 10:42:48Z

0

You can select the button using its classes, .desktop-button .tiny.

Together with setting the name attribute, this would result in:

jQuery:

$(".desktop-button.tiny").attr("name", "login_button");

Pure JavaScript:

document.querySelector(".desktop-button.tiny").setAttribute("name", "login_button");

answered Mar 24, 2017 at 10:42

leroydev

2,95820 silver badges31 bronze badges

Comments

Ovidiu Dolha · Accepted Answer · 2017-03-24 10:42:57Z

0

You first need to obtain the element and then set the name attribute.

Without jquery this would be:

<button id='my-button' type="submit" class="desktop-button tiny" onclick="document.stacks_in_3151032_page6.formAction.value = 1'login';">LOGIN</button>

document.getElementById('my-button').setAttribute('name', 'login_button');

With jquery, you would be able to find the element without adding an id as such:

$('button.desktop-button.tiny').attr('name', 'login_button');

Hope this helps.

answered Mar 24, 2017 at 10:42

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

Collectives™ on Stack Overflow

Modify a form button using jQuery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related