CODEWITHSUNDEEP
jqueryajax
Tom
Tom

Reputation: 130

Jquery ajax .load form places options outside select tag

I'm trying to grab a form from one page and place it in a div on another using...

jQuery('#my-div').load('form-url/ #form-container');

It's working fine other than the select fields, all the options are placed outside the select tag so...

<select>
</select>
<option>number 1</option>
<option>number 2</option>
<option>number 3</option>
<option>number 4</option>

html of the original form looks clean but there are a lot of options for each select. Any ideas?

Update

Well I got around it by using jquery to move the options inside the select tags after the form is brought in. Would still be good to know why it's happening though...

Upvotes: 1

Views: 268

Answers (1)

jreidko
jreidko

Reputation: 77

I had this exact problem, using jQuery's ajax functions .load or .get to place a form on a page would work as expected but place the <option> elements outside the <select> tag.

I found that the trailing "/" in my select tag seemed to be the culprit:

Changing:

<select class="form-control" name="foo" />
    <option value="">Option 1</option>
    <option value="">Option 2</option>

To:

<select class="form-control" name="foo" >
    <option value="">Option 1</option>
    <option value="">Option 2</option>

Fixed the problem for me.

I don't see a "/" in your code above so maybe it's a different issue, but thought I'd share.

Upvotes: 2

Related Questions