using jquery append() to add a button to a form

Question

I need to add a button to a form. I have no control over the logic that creates the form itself... but i can add code around the form, if need be.

The code for the form looks like this:

<form action="/cgi-bin/a/logon" method="POST">
     <DT>Login ID</DT>
       <DD>
          <input class=" text" type="text"  name="id"  value="">
       </DD>
     <DT>Password</DT>
       <DD>
          <input class=" password" type="password"  name="password"  value="">
       </DD>
       <DT></DT>
       <DD><input class="submit" type="submit" name="submit" value="Logon">
      </DD>
</FORM>

I know I can add a div around the entire form and append to that... but I would like the new button to appear right beside the "Logon" button. I've tried the following code, but it didn't work:

<script type="text/javascript">
        $(document).ready(function() {
           $('.submit').append($('<input type="button" value="test">'));
        });
</script>

I'm assuming you probably can't append to a button... which is why it didn't work.

I'm still learning jquery so if there's another method aside from append that I could use, I'm all ears! Actually, the button doesn't have to be a part of the form because I'm going to run client side code when it is clicked. But it does have to appear beside the login button.

Thanks.

Note, name="submit" should be avoided, it can interfere with the form's submit method if called directly (such as form.submit()) — user400654
– user400654, Commented May 20, 2013 at 18:38

Sushanth -- · Accepted Answer · 2013-05-20 18:36:13Z

9

you cannot append anything to the input element ..

Use .after or .before

 $('.submit').after($('<input type="button" value="test">'));

answered May 20, 2013 at 18:36

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

2 Comments

dot Over a year ago

I tried that, but it doesn't create any button. I am checking F12 in firefox... under console, I don't see any errors. Neither in script

dot Over a year ago

actually, never mind. I found the error. missing ); it works!

Justin · Accepted Answer · 2013-05-20 18:36:00Z

2

try this instead: jsFiddle

$('<input type="button" value="test">').insertAfter('.submit');

answered May 20, 2013 at 18:36

Justin

27.4k16 gold badges117 silver badges130 bronze badges

Comments

Adil Shaikh · Accepted Answer · 2013-05-20 18:37:32Z

2

You can use .after like this

$('.submit').after('<input type="button" value="test" />');

OR

$('form').append('<input type="button" value="test" />');

answered May 20, 2013 at 18:37

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Collectives™ on Stack Overflow

using jquery append() to add a button to a form

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related