Jquery: Change input type from button to submit

Question

I have an animated search form as below.

<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">

<div id="searchtext">
    <input type="text" value="" size="25" name="s" id="s" placeholder="<?php esc_attr_e('Search', 'reverie'); ?>">
</div>

<div id="submitsearch">
    <input type="button" id="searchsubmit" value="" class="button postfix">
</div>

jQuery("#submitsearch").click(function () {
   jQuery("#searchtext").animate({width:'toggle'},500);
      jQuery(this).toggleClass("closed");
});

When the search button is first clicked, it toggles out the text area where a user can type in what they want to search. When they click the search button again however, it should submit the search form (i.e. the input type should change from button to submit).

I've read a few posts on SO already, however these are from a few years ago & I'm not sure if they are still relevant. Is it not possible to change an input's type?

Why not just have a 'state' property on the button that keeps track of the current step? First time you click it sets the state to 'submit'. Second time you click you do form.submit(). Something about changing the type attribute doesn't sound good to me. — mastaBlasta
– mastaBlasta, Commented Apr 9, 2014 at 15:31

Reporter · Accepted Answer · 2014-04-09 14:08:25Z

9

I think it is possible, because type is an attribute. Follwing small code line should help:

$('#searchsubmit').removeAttr("type").attr("type", "submit");

Maybe there is a way with less risk. The way is to add an 'onclickEvent' that called a submit function:

 $('#searchsubmit').on('click', function () {
    $(this).parents("form:first").submit();
});

answered Apr 9, 2014 at 14:08

Reporter

3,9345 gold badges36 silver badges50 bronze badges

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

2 Comments

Steven Over a year ago

Why do you first remove the type? Can't you simply just replace / change the type property?

Reporter Over a year ago

@Steven I do that only for safety. You can leave it out if you want

Karim AG · Accepted Answer · 2014-04-09 14:14:52Z

1

You can remove the type attribute and set it again as submit.

jQuery("#submitsearch").click(function () {
jQuery("#searchtext").animate({
    width: 'toggle'
}, 500);
jQuery(this).toggleClass("closed");
var btn = document.getElementById('searchsubmit');
btn.removeAttribute('type');
btn.setAttribute('type', 'submit');
});

Working fiddle.

answered Apr 9, 2014 at 14:14

Karim AG

2,19315 silver badges30 bronze badges

3 Comments

Steven Over a year ago

Why do you mix DOM with jQuery? Why not just use jQuery?

Karim AG Over a year ago

using jquery attr function won't override it .. check this fiddle jsfiddle.net/Karim_AG/mSzY5/1

Karim AG Over a year ago

the type would still be button

Steven · Accepted Answer · 2014-04-09 14:18:08Z

1

Something like this should do it:

$('.button').on('click', function(){
  $("#searchtext").animate({width:'toggle'},500);
  $(this).attr('type', 'submit');
});

It's not complete, but should get you closer to what you want :)

hmm... I think that with the latest jQuery, you can even replace on('click' function(){}) with .click( function(){} );
(The old version of .click() did not have the live / on bindings)

edited Apr 9, 2014 at 14:18

answered Apr 9, 2014 at 14:10

Steven

19.5k50 gold badges157 silver badges265 bronze badges

Collectives™ on Stack Overflow

Jquery: Change input type from button to submit

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related