CODEWITHSUNDEEP
jqueryhtmlforms
Alko
Alko

Reputation: 1439

Save html form layout and values with jQuery

I'm trying to save form layout including full html as well as checkbox status and field entered values. This is the sample form:

<div id="formRaw">
  <div class="block-group">
    <label class="checkbox">
      <input value="Internet Explorer" name="checkd[]" type="checkbox">
      Internet Explorer</label>
    <label class="checkbox">
      <input value="Firefox" name="checkd[]" type="checkbox">
      Firefox</label>
    <label class="checkbox">
      <input value="Chrome" name="checkd[]" type="checkbox">
      Chrome</label>
  </div>
  <div class="block-group">
    <input name="fullname" type="text">
  </div>
</div>

Here is js part:

 $(document).ready(function() {
     $('body').on('click', 'button[name=dotemp]', function() {
         $.ajax({
             type: "post",
             url: "process.php",
             dataType: 'json',
             data: {
                 htmlcode: $("#formRaw").html()
             },
             success: function(json) {
             }
         });
     });
 })

I want to be able to capture checkbox status as well as entered value of input box. Everything is working fine, but no matter what if I select on or more checkboxes or enter value in fullname filed, it does not get captured.

The preferred result should be something like:

<div id="formRaw">
  <div class="block-group">
    <label class="checkbox">
      <input value="Internet Explorer" name="checkd[]" type="checkbox">
      Internet Explorer</label>
    <label class="checkbox">
      <input value="Firefox" name="checkd[]" type="checkbox" checked="checked">
      Firefox</label>
    <label class="checkbox">
      <input value="Chrome" name="checkd[]" type="checkbox" checked="checked">
      Chrome</label>
  </div>
  <div class="block-group">
    <input name="fullname" type="text" value="My Name">
  </div>
</div>

Upvotes: 2

Views: 2452

Answers (1)

charlietfl
charlietfl

Reputation: 171689

The issue is that html attributes don't get updated on user input....the element properties do.

To store the values and attributes back to the html you would need to loop back over the form and map those values to assign as attributes in the raw html

Something like this would get you started

var $form = $("#formRaw");

var $clone = $form.clone()
$clone.find(':input').each(function () {
    var $input = $(this);
    // start an attribute object later use with attr()
    var attrs = {
        value: $input.val()
    }
    // case for radios and checkbox
    if ($input.is(':radio,:checkbox')) {
        if (this.checked) {
            attrs.checked = 'checked'
        }else{
            // make sure attributes are removed that might be there from initial load
            $input.removeAttr('checked');
        }
    }
    // add the attributes to element
    $input.attr(attrs);

});

 var html = $clone.html();

I did not cover all types of form control , just a few basics to get it started

DEMO

Upvotes: 3

Related Questions