CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Carlos M.
Carlos M.

Reputation: 198

JS Closes tag prematurely

this is actually my first question ever in this awesome site. I usually find the answer that I need here with a little research but this time is not the case, therefore I'm forced to ask.

Here is what happens:

I'm building a search form that has one dropdown, a field and a button initially. People select from the dropdown the field (field1, field2, etc) where they want to execute the search and then type the condition in the textbox. Then there is an "OR" button that when clicked it dynamically creates another set like the one before (dropdown, textbox & "OR" button) to create a second condition for the search.

Here is the important portion of that code that inserts the button:

var divid = '#orbuttondiv'+divid;
    $(divid).after('<div id="field'+orbuttonid+'" class="blockSrc"><select name="orfield[]" id="condition'+orbuttonid+'field" class="blockSrc'+orbuttonid+'"><option value="0">Select Field</option><?php //function ?></select><input name="orstr[]" id="condition'+orbuttonid+'str" type="text" /></div><div class="orbutton" id="orbuttondiv'+orbuttonid+'"><button name="orbutton'+orbuttonid+'" id="orbutton'+orbuttonid+'" class="btn orbt" type="button" value="OR" /><i class="icon-comments-alt"></i> OR</button></div>');             
});

So the problem is that when the set is inserted in the document everything works perfectly except that the button tag is closed prematurely. What I expect is:

<div class="orbutton" id="orbuttondiv1">
<button class="btn orbt" value="OR" name="orbutton1" id="orbutton1" type="button"><i class="icon-comments-alt"></i> OR</button>
</div>

And What I'm getting is:

<div class="orbutton" id="orbuttondiv1">
<button class="btn orbt" value="OR" name="orbutton1" id="orbutton1" type="button"></button><i class="icon-comments-alt"></i> OR
</div>

Notice how the < button > tag gets closed before the contents so the < i> and the word "OR" are loaded outside of the button.

Any help will be appreciated:

Upvotes: 1

Views: 74

Answers (3)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107566

Because you self-closed the <button> tag:

 <button ... value="OR" /><i>...
                        ↑

Just take out the slash and you'll be on your way.

Upvotes: 5

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382264

You have /> at the end of your button opening element, that makes it self closed. remove the /.

Upvotes: 1

Kevin Boucher
Kevin Boucher

Reputation: 16685

You are closing the button tag in your example:

<button name="orbutton'+orbuttonid+'" id="orbutton'+orbuttonid+'" 
    class="btn orbt" type="button" value="OR" /> <--- see the forward slash

Upvotes: 1

Related Questions