CODEWITHSUNDEEP
javascriptjqueryhtmlforms
DIM3NSION
DIM3NSION

Reputation: 1761

Replacing DIVs with List Items inside form

I'm trying to format and change the structure of a standard HTML form. At the moment the output looks like this

    <form accept-charset="UTF-8"  autocomplete="off" method="POST">
            <ol class="questions">
                <div>
                     <label>First Name *</label>
                     <input type="text" />
                </div>
                <div>
                     <label>Email *</label>
                     <input type="text" />
                </div>
                <div class="submit">
                      <input type="submit" value="Submit" />
                </div>
            </ol>
      </div>
    </form>

I need to change the divs to list items and then add a span around the labels if possible.

I've got this so far but it's not altering unfortunately.

  window.onload = function() {        
    var widgetHTML = $('ol.questions').html();
        widgetHTML = widgetHTML
            .replace(/<div>/g, '<li>')
            .replace(/<\/div>/g, '</li>');
    $('ol.questions').html(widgetHTML);
  };

Any ideas to add the span and replace the DIVs to LIs that would be great

Upvotes: 0

Views: 165

Answers (3)

Jamiec
Jamiec

Reputation: 136104

This should do it.

$('ol.questions div').each(function(){
  $('label',this).wrap('<span/>');
  var children = $(this).children();
  $(this).replaceWith($('<li/>').append(children));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8"  autocomplete="off" method="POST">
            <ol class="questions">
                <div>
                     <label>First Name *</label>
                     <input type="text" />
                </div>
                <div>
                     <label>Email *</label>
                     <input type="text" />
                </div>
                <div class="submit">
                      <input type="submit" value="Submit" />
                </div>
            </ol>
    </form>

Upvotes: 1

j08691
j08691

Reputation: 207901

Use .replaceWith() and .wrap():

$("form div").replaceWith(function(){
    $(this).find('label').wrap('<span/>');
    return $('<li>' + this.innerHTML + '</li>')
});

jsFiddle example

This will give you:

<form accept-charset="UTF-8" autocomplete="off" method="POST">
    <ol class="questions">
        <li>
            <span><label>First Name *</label></span>
            <input type="text">
        </li>
        <li>
            <span><label>Email *</label></span>
            <input type="text">
        </li>
        <li>
            <input type="submit" value="Submit">
        </li>
    </ol>
</form>

Upvotes: 1

user1017882
user1017882

Reputation:

Use the following jQuery function for changing the type:

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    }
})(jQuery);


// USAGE
$("div").changeElementType("li");

(https://stackoverflow.com/a/8584217/1017882)

Use the following code to wrap your labels with a span:

$("label").wrap("<span></span>");

NOTE: You'll need to refine the selectors as you see fit. The selectors above will work given the markup you've posted, but I assume you have other divs and labels on your page.

Upvotes: 0

Related Questions