send Form data using jQuery which has appended div inside it

Question

I'm not able to send the complete form data using form.I'm able to send the stored data containing even name, event status, trigger event and relay state. The data of the appended div is being sent as the value which is stored in its previous values.

 $(document).ready(function () { $("#condition").click(function (e) { e.preventDefault(); $('#shw').append($('.hiddenRule').clone().removeClass("hiddenRule")); }); }); $('#shw').on('click', '#delete', function (e) { e.preventDefault(); $(this).parent().remove(); }); $(document).ready(function () { $("#condition").click(function () { $('#add').show(); }); }); /*data format*/ var obj= { configuration: { rule: { name: $("#eventname").val(), status: $("#eventstatus").val(), triggerOn: $("#triggerevent").val(), onSuccess: $("#relaystate").val(), conditions: [ { fact: $("#sensor").val(), operator: $("#condition").val(), value: $("#thresholdvalue").val(), } ] } } }; $("form").click("submit",obj, function (e) { e.preventDefault(); $.post('url',$(this).serialize(), function (response) { console.log(response); }) })

 .hiddenRule{ display:none; }

 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div ng-app="demo" ng-controller="ruleCtrl"> <form> <fieldset> <table class='addRuleHolder'> <tr> <td class="label-col"> <label>Event Name:</label> </td> <td> <input type="text" id="eventname"> </td> </tr> <tr> <td class="label-col"> <label>Event status:</label> </td> <td> <select id="eventstatus"> <option value="enabled">Enabled</option> <option value="disabled">Disabled</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Trigger Event:</label> </td> <td> <select id="triggerevent"> <option value="all">All Conditions</option> <option value="any">Any Conditions</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Relay State:</label> </td> <td> <select id="relaystate"> <option value="1">On</option> <option value="0">Off</option> </select> </td> </tr> </table> <div style="margin-top: 20px; float:right;padding-right:15px"> <button class="waves-effect waves-light btn" id="condition">Condition</button> </div> </fieldset> <div class="hiddenRule"> <fieldset> <table class='addRuleHolder'> <tr> <td class="label-col"> <label>Sensor:</label> </td> <td> <select id="sensor"> <option value="s1">S1</option> <option value="s2">S2</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Condition:</label> </td> <td> <select id="condition"> <option value="lessThan">&lt;</option> <option value="lessThanInclusive">&lt;=</option> <option value="greaterThan">&gt;</option> <option value="greaterThanInclusive">&gt;=</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Threshold Value:</label> </td> <td> <input type="text" id="thresholdvalue"> </td> </tr> </table> <button style="margin-top: 20px; float:right;padding-right:15px" class="waves-effect waves-light btn" id="delete">delete</button> </fieldset> </div> <br style="clear:both" /> <div id="shw"></div> <button style="margin-top: 20px; float:right;padding-right:15px;margin-right: 10px; display:none" type="submit" class="waves-effect waves-light btn" value="Add" id="add">Add Schedule</button> </form> </div> </body> </html>

even if I append two times, still the data is only being sent for the first one with the previous values(i'm not able to send even empty or stored data for the div which is being appended the second time), but not the selected values. Can anyone help me out how to submit the complete data? Your leads would be very helpful for me.Thankyou

Answer 1

Lots of ways you can clean this up. I have no way to test the POST functionality. I would advise the following:

 $(function() { function collectData($f) { var obj = { configuration: { rule: { name: $f.find(".name").val(), status: $f.find(".status option:selected").val(), triggerOn: $f.find(".trigger option:selected").val(), onSuccess: $f.find(".state option:selected").val(), conditions: [] } } }; if ($f.find(".conditionHolder").length) { $f.find(".conditionHolder").each(function(index, elem) { var $item = $(elem); obj.configuration.rule.conditions.push({ fact: $item.find(".sensor option:selected").val(), operator: $item.find(".condition option:selected").val(), value: parseInt($item.find(".threshold").val()), }); }); } console.log(obj); return obj; } function makeCondition() { var $c = $(".hiddenRule").clone(); var c = $("form .conditionHolder").length + 1; $c.removeClass("hiddenRule"); $c.find(".delete").before("Condition " + c + " "); $("#shw").append($c); } $("#condition").click(function(e) { e.preventDefault(); makeCondition(); }); $('#shw').on('click', '.delete', function(e) { e.preventDefault(); $(this).parent().parent().parent().remove(); }); $("form").submit(function(e) { e.preventDefault(); var myData = collectData($(this)); /* $.post('url', myData, function(response) { console.log(response); }); */ console.log("My Data:", myData); }); });

 .hiddenRule { display: none; } .conditionHolder { border: 0; border-top: 2px groove #f1f0ef; border-bottom: 2px groove #f1f0ef; margin-left: -11px; margin-right: -10px; margin-bottom: -10px; padding-left: 20px; } .conditionHolder legend { background: #fff; } .conditionHolder .delete { background: #f1f0ef; border: 1px solid #ccc; border-radius: 6px; font-size: 13.33px; font-weight: 600; text-align: center; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="demo" ng-controller="ruleCtrl"> <form> <fieldset> <table class="addRuleHolder"> <tr> <td class="label-col"> <label>Event Name:</label> </td> <td> <input type="text" class="event name"> </td> </tr> <tr> <td class="label-col"> <label>Event status:</label> </td> <td> <select class="event status"> <option value="enabled">Enabled</option> <option value="disabled">Disabled</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Trigger Event:</label> </td> <td> <select class="event trigger"> <option value="all"> All Conditions </option> <option value="any"> Any Conditions </option> </select> </td> </tr> <tr> <td class="label-col"> <label>Relay State:</label> </td> <td> <select class="event relay state"> <option value="1">On</option> <option value="0">Off</option> </select> </td> </tr> </table> <div id="shw"></div> <div style="margin-top: 20px; float:right;padding-right:15px"> <button class="waves-effect waves-light btn" id="condition">Condition</button> </div> </fieldset> <button style="margin-top: 20px; float:right;padding-right:15px;margin-right: 10px;" type="submit" class="waves-effect waves-light btn" value="Add" id="add">Add Schedule</button> <br style="clear:both" /> </form> </div> <!-- Rule Template --> <div class="hiddenRule"> <fieldset class='conditionHolder'> <legend><button class="delete" title="Delete Condition">X</button></legend> <table class="addRuleHolder"> <tr> <td class="label-col"> <label>Sensor:</label> </td> <td> <select class="event sensor"> <option value="s1">S1</option> <option value="s2">S2</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Condition:</label> </td> <td> <select class="event condition"> <option value="lessThan">&lt;</option> <option value="lessThanInclusive">&lt;=</option> <option value="greaterThan">&gt;</option> <option value="greaterThanInclusive">&gt;=</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Threshold Value:</label> </td> <td> <input type="number" class="event threshold"> </td> </tr> </table> </fieldset> </div>

Your code was assigning two click events to #condition and was generating console errors. Hope this helps.

Update

Moved away from id to class for a number of the elements. Seek for conditions and append them to the data object within an array for each condition.

Sample Results

{
  "configuration": {
    "rule": {
      "name": "Shutdown",
      "status": "enabled",
      "triggerOn": "all",
      "onSuccess": "1",
      "conditions": [
        {
          "fact": "s1",
          "operator": "lessThan",
          "value": 5
        },
        {
          "fact": "s2",
          "operator": "greaterThan",
          "value": 10
        }
      ]
    }
  }
}

send Form data using jQuery which has appended div inside it

Question

1 answers

solution1
1 ACCPTED 2018-02-28 02:56:31

send Form data using jQuery which has appended div inside it

Question

1 answers

solution1 1 ACCPTED 2018-02-28 02:56:31

solution1
1 ACCPTED 2018-02-28 02:56:31