Question

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:

Answer 1

Because you self-closed the <button> tag:

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

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