Hi guys,

I have a form that have below condition:

  1. when the "Printing Form" button is clicked,the form will popup and prompt user to fill in the required details
  2. when the "Complete"button in the table is click,the same form will be popup and prompt user to fill in the required details but the different is when the user click on "Printing Form" button,fill in the required details and click submit,the function submitdata() will be begin,and when the user click submit on"Complete" button,the function submitdata1() will begin instead of function submitdata()

this the image showing how it supposed to works:
Form

This is the html template for the form:

<!-- title -->
  <header class='clearfix db'>
    <div class='t_f t_title'>
      <span class='fn-16'><i class='icon-reorder'></i> Table Name</span>

$row[11] = "<a class='btn btn-small' onclick='open_wrappers();'>Complete</a>";

    </div>
    <div class='t_r t_title'>
      <a class='btn btn-small' data-href="msp__daily_wrapper">Printing Daily Form</a>
      <a class='btn btn-small' data-href="msp__form_wrapper/p">Printing Form</a>

      <a class='btn btn-small' data-href="msp__rep_wrapper">Printing Replacement</a>
      <a class='btn btn-small' data-href="msContainer">Insert Data</a>
    </div>
  </header><!-- title -->
  <!-- printing plf form -->
<section id="msp__form_wrapper" class="msp-none section__wrapper">
  <div id="form__plf" class="msp__form_plf center">
    <a class="plf__close wrapper__close">x</a>
    <span class="plf__title">Printing Form</span>
    <select id="plf__form_type" class="custom_select-x">
      <option value="p">PVC</option>
      <option value="f">Fabric</option>
    </select>
    <table class="plf__form" data-plf="p">
      <thead>
        <tr><th width='100px'></th><th></th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Form Date</td>
          <td>
            <input type='date' name="plf_date" class="custom_datepick" value="{$dailyformdate}">
          </td>
        </tr>
        <tr>
          <td>Jobsheet</td>
          <td>
            <select id="__jobsheet" class="chosen-select __jobsheet" tabindex="+5">
              <option value=''>Select Jobsheet</option>
              {foreach from=$jobsheet item=job}
                <option value="{$job.idmsul}" data-type="normal">{$job.idmsul}</option>
              {/foreach}
             </select>
          </td>
        </tr>
        <tr>
          <td>Daily</td>
          <td>
            <input type="radio" name="plf__radio" value="Day" checked>
            <span class="plf_sub">Day</span>
            <input class="msp-none ra__OF" type="radio" name="plf__radio" value="OF">
            <span class="msp-none ra__OF plf_sub">Old Factory</span>
            <input type="radio" name="plf__radio" value="Night">
            <span class="plf_sub">Night</span>
          </td>
        </tr>
        <tr>
          <td>Articleno</td>
          <td>
            <select id="__articleno" class="chosen-select __articleno" tabindex="+5">
            </select>
          </td>
        </tr>
        <tr>
          <td>Material Part</td>
          <td class="pad-5">
            <form class="plf__material_list">
              <ol class="material__list">
                <li> Please Choose A Material </li>
              </ol>
              <input type="checkbox" name="heattrans"> <span class="heatsub">Heat & Sub</span>
            </form>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="__action_plf">
      <a class="f-r submit__form_btn">Submit</a>
    </div>
  </div>
</section><!--printing plf form -->

and this is the javascript code for function submitdata()when user click "printing form"button,filled up the details and clicked on submit:

// submiting data 
    function submitdata() {
      var $this      = $(this);
      var $div       = $this.parent("div");
      var $container = $this.parents(".msp__form_plf").find("table");
      var $slipdate  = $container.find("input[type='date']");
      var $isvalid   = $slipdate.next("span");
      var $article   = $container.find(".__articleno");
      var $daily     = $container.find("input[type='radio']:checked");
      var $form      = $container.find(".plf__material_list");
      var $ol        = $form.find(".material__list");
      var $inputs    = $ol.find("input[type='number']").filter(function() { return (this.value && this.value != 0); } );
      var $heat      = $form.find("input[type='checkbox']");

      var logtype    = $heat.is(":checked") ? "heat" : $plf_form_type.val();
      var idschedule = $article.val();
      var dailyshift = $daily.val();
      var slipdate   = $slipdate.val();
      var records    = [];

      var isvalid = $isvalid.hasClass("plf-invalid") || false;

      if($inputs.length < 1) {
        displaymsg("Error Message", "No Valid Input Found.");
        return;
      } else if(isvalid) {
        displaymsg("Error Message","No Daily Form Found. Cenot Submit.");
        return;
      }

      $inputs.each(function() {
        var value = this.value;
        var name  = this.name;
        var temp  = {
          "log_type"     : logtype,
          "idschedule"   : idschedule,
          "daily_shift"  : dailyshift,
          "slip_date"    : slipdate,
          "material"     : name,
          "qty"          : value,
          "qcid"         : "no",
          "qcqty"        : 0,
          "return_type"  : "normal",
          "qcStatus"     : "pending"
        };

        records.push(temp);
      });

      $.ajax({
        url  : "msp/submit_plf_data?id=" + idschedule,
        type : "post",
        data : {
          re : records
        },
        success : function(data) {
          var data    = JSON.parse(data);
          var a       = document.createElement("a");

          a.href      = "/sindisys/plf/plfdts?trans=" + data.trans + "&logtype=" + logtype;
          a.innerText = "You have " + data.trans + " previous Transaction.Print Slip";
          a.target    = "blank";
          a.setAttribute("class", "trans__");

          $div.find("a.trans__").remove().end().prepend(a);
          $ol.children("li").remove().end().append("<li>Please Choose A Material");
          $article.val("").trigger("liszt:updated");
        }
      });
    }

while this is the javascript code for function submitdata1()when user click "Complete"button,filled up the details and clicked on submit:

 // submiting data 
    function submitdata1() {
      var $this      = $(this);
      var $div       = $this.parent("div");
      var $container = $this.parents(".msp__form_plf").find("table");
      var $slipdate  = $container.find("input[type='date']");
      var $isvalid   = $slipdate.next("span");
      var $article   = $container.find(".__articleno");
      var $daily     = $container.find("input[type='radio']:checked");
      var $form      = $container.find(".plf__material_list");
      var $ol        = $form.find(".material__list");
      var $inputs    = $ol.find("input[type='number']").filter(function() { return (this.value && this.value != 0); } );
      var $heat      = $form.find("input[type='checkbox']");

      var logtype    = $heat.is(":checked") ? "heat" : $plf_form_type.val();
      var idschedule = $article.val();
      var dailyshift = $daily.val();
      var slipdate   = $slipdate.val();
      var records    = [];

      var isvalid = $isvalid.hasClass("plf-invalid") || false;

      if($inputs.length < 1) {
        displaymsg("Error Message", "No Valid Input Found.");
        return;
      } else if(isvalid) {
        displaymsg("Error Message","No Daily Form Found. Cenot Submit.");
        return;
      }

      $inputs.each(function() {
        var value = this.value;
        var name  = this.name;
        var temp  = {
          "log_type"     : logtype,
          "idschedule"   : idschedule,
          "daily_shift"  : dailyshift,
          "slip_date"    : slipdate,
          "material"     : name,
          "qty"          : value,
          "qcid"         : "no",
          "qcqty"        : 0,
          "return_type"  : "Dummy",
          "qcStatus"     : "pending"
        };

        records.push(temp);
      });

      $.ajax({
        url  : "msp/submit_plf_data?id=" + idschedule,
        type : "post",
        data : {
          re : records
        },
        success : function(data) {
          var data    = JSON.parse(data);
          //var a       = document.createElement("a");

         // a.href      = "/sindisys/plf/plfdts?trans=" + data.trans + "&logtype=" + logtype;
          //a.innerText = "You have " + data.trans + " previous Transaction.Print Slip";
          //a.target    = "blank";
          //a.setAttribute("class", "trans__");

          //$div.find("a.trans__").remove().end().prepend(a);
          $ol.children("li").remove().end().append("<li>Please Choose A Material");
          $article.val("").trigger("liszt:updated");
        }
      });
    }

Nobody's going to try and decipher/run all that code. What exactly is the problem? Try creating a JSFiddle or something.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.