Adding/creating an input with javascript

Question

I have few search forms and each form has an input value with class "search_input".

I want: on button click to add this:

<input type="submit" class="searchbtn" value="Search" />

next to each input <input type="text" class="search_input" autocomplete="off">.

Currently I am doing so using display none and on click im setting the display to block but the forms are too many so in order to save some kb's instead of typing that on every form, I'm asking if it possible with jQuery to add the input next to each .search_input

Thanks alot

possible duplicate of add an element AFTER another?

Felix Kling
– Felix Kling

2011-09-12 06:58:42 +00:00
Commented Sep 12, 2011 at 6:58 — Felix Kling
– Felix Kling, Commented Sep 12, 2011 at 6:58

Samich · Accepted Answer · 2011-09-12 06:36:49Z

3

Using jquery it's quiet easy to add control:

$('.search_input').after($('<input type="submit" class="searchbtn" value="Search" />'));

answered Sep 12, 2011 at 6:36

Samich

30.4k6 gold badges70 silver badges80 bronze badges

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

1 Comment

jQuerybeast Over a year ago

Thanks alot again. Give it another 4 minutes to accept your answer

Igor Dymov · Accepted Answer · 2011-09-12 06:36:50Z

2

var $input = $('<input type="submit" class="searchbtn" value="Search" />');
$(".search_input").after($input);

//OR
//$input.insertAfter(".search_input");

answered Sep 12, 2011 at 6:36

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

Comments

Marek Sebera · Accepted Answer · 2011-09-12 06:38:09Z

0

$("#button_id").click(function(){
  $('<input type="submit" class="searchbtn" value="Search" />').insertAfter(".search_input");
});

see docs: http://api.jquery.com/insertAfter/

answered Sep 12, 2011 at 6:38

Marek Sebera

40.8k37 gold badges166 silver badges251 bronze badges

Comments

mVChr · Accepted Answer · 2011-09-12 06:39:31Z

0

$('#addSubmitButtons').click(function(e){
    $('.search_input').after('<input type="submit" class="searchbtn" value="Search" />');
});

answered Sep 12, 2011 at 6:39

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Collectives™ on Stack Overflow

Adding/creating an input with javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related