CODEWITHSUNDEEP
jqueryformsappend
dot
dot

Reputation: 15660

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

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.

Upvotes: 3

Views: 32486

Answers (3)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You can use .after like this 

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

OR

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

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

you cannot append anything to the input element ..

Use .after or .before

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

Upvotes: 9

Justin
Justin

Reputation: 27301

try this instead: jsFiddle

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

Upvotes: 2

Related Questions