Message:

I have made a request PHP form with many select options. One of the select options is name employee to which one of its text area i pre-typed text and selected type="hidden" as shown in form. The problem is when I submit the form request from another select option for example if I select option IT Request from the form and fill its input and submit it & when I get results in HTML email I also get the hidden text area texts that were pre type for Employee select option and it also shows with the tv request details

Also, how can I submit the HTML table in form? Right now I’m doing double work. First, create the hide/show table for users to see and same time I a have hidden text area containing the same data so when the user selects an option from hide/show HTML table it’s submitted it sends the same text pre typed to email

See the image attached i sent a example request from the working form. It is mixing two options. I sent a IT Request and it is mixing the Employee Hidden Textarea

function EmployeeGroup() {

  var groups = document.getElementById("groups"); {

    var ITRequest = document.getElementById("ITRequest");

    ITRequest.style.display = groups.value == "IT" ? "block" : "none";

  } {

    var Employee = document.getElementById("Employee");

    Employee.style.display = groups.value == "EmpGM" ? "block" : "none";

  }



}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="testbox">

  <form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">

    <div class="form-group">

      <label>Select a Category</label>

      <select id="groups" name="groups" class="form-control w-100" required onchange="EmployeeGroup()">

        <option value="">--Select an option--</option>

        <option value="ITRequest">IT Request</option>

        <option value="Employee">New Hire</option>

      </select>

    </div>



    <div class="form-group" id="EmpGM">

      <h2>Requestor's Information</h2>

      <div class="row">

        <div class="col-6">

          <label for="userReqEmp">Requestor Name</label>

          <input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">

        </div>

        <div class="col-6">

          <label for="userNameEmp">Full Name</label>

          <input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">

        </div>

        <div class="col-6">

          <label for="userComEmp">Comments (Optional)</label>

          <textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>

        </div>

        <div class="col-6">

          <div class="row">

            <label class="col-12" for="userEIDEmp">Employee ID</label>

          </div>

          <div class="row">

            <div class="col-12">

              <input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">

            </div>

          </div>

          <div class="row">

            <label class="col-12" for="userOIDEmp">One ID</label>

          </div>

          <div class="row">

            <div class="col-12">

              <input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">

            </div>

          </div>

          <div class="row">

            <label class="col-12" for="userDateEmp">Start Date</label>

          </div>

          <div class="row">

            <div class="col-12">

              <input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">

            </div>

          </div>

        </div>

        <div class="col-6">

          <!--GM Group -->

          <textarea style="visibility:hidden;" class="textarea" id="acc_GMGroup" name="acc_GMGroup" rows="5">

<u>Domain Group Access:</u>

All Access Folders



<u>Distribution List:</u>

All Manager Emails



<u>Additional Access</u>

VPN Non-Standard

                        </textarea>

        </div>

        <div class="col-6">

          <div class="row">

            <label class="col-12">Select Department</label>

          </div>

          <div class="row">

            <div class="col-12">

              <select id="groups" name="groups" class="form-control w-100">

                <option selected value="">Select an option</option>

                <option value="GM">GM</option>

                <option value="AGM">AGM</option>

              </select>

            </div>

          </div>

          <br>

          <!-- GM -->

          <div class="row">

            <div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">

              <h2>DC GM Group</h2>

              <table class="tb">

                <tr>

                  <th>Domain Group Access</th>

                </tr>

                <tr>

                  <td>All Access Folders</td>

                </tr>

                <tr>

                  <th>Distribution List</th>

                </tr>

                <tr>

                  <td>All Manager Emails</td>

                </tr>

                <tr>

                  <th>Additional Access</th>

                </tr>

                <tr>

                  <td>VPN Non-Standard</td>

                </tr>

              </table>

            </div>

          </div>



        </div>

      </div>

    </div>

    <!--  General IT  Request  -->



    <div class="form-group" id="IT">

      <h2>IT Service Request</h2>

      <div class="row">

        <div class="col-6">

          <label for="userITRequest">Requestor Name</label>

          <input type="text" class="form-control w-100" id="userITRequest" name="userITRequest" placeholder="Type Here...">

        </div>

        <br><br>

        <div class="col-6">

          <label>Select your Department</label>

          <select id="groups" name="groups" class="form-control w-100">

            <option selected value="">Select an option</option>

            <option value="HR">HR</option>

            <option value="MPB">MPB</option>

            <option value="Management">Management</option>

          </select>

        </div>

        <br><br>

        <div class="col-12">

          <label for="userITSubject">Subject</label>

          <input type="text" class="form-control w-100" id="userITSubject" name="userITSubject" placeholder="Type Here...">

        </div>

        <br><br>

        <div class="col-12">

          <label for="userITMessage">Messages</label>

          <textarea type="text" class="form-control w-100" id="userITMessage" name="userITMessage" rows="7" placeholder="Type Here..."></textarea>

        </div>

        <br><br>

        <div class="col-12">

          <label for="myfile"><strong>Choose a file to upload</strong></label>

          <input type="file" id="myfile" name="myfile">

        </div>

      </div>

    </div>



  </form>

</div>

My Answer:
It seems like you are experiencing an issue where the hidden textarea content for the Employee option is being included in the form submission even when a different option is selected.

To resolve this issue, you can add a check in your PHP code to only include the hidden textarea content if the Employee option is selected. You can do this by checking the value of the "groups" select option in your PHP code before including the hidden textarea content in the email.

As for submitting an HTML table in a form, you can serialize the table data into a hidden input field before submitting the form. You can use JavaScript to gather the table data and populate the hidden input field with the serialized data before submitting the form.

Here is an example of how you can serialize an HTML table data into a hidden input field before submitting the form:

javascript

// Serialize table data into a hidden input field

function serializeTableData() {

  var tableData = [];

  $('#tableId tr').each(function(row, tr){

    tableData[row]={

      "col1" : $(tr).find('td:eq(0)').text(),

      "col2" : $(tr).find('td:eq(1)').text(),

      // Add more columns as needed

    }

  });



  // Populate hidden input field with serialized table data

  $('#hiddenInput').val(JSON.stringify(tableData));

}



// Call the function before submitting the form

$('#frmContact').submit(function(){

  serializeTableData();

});

In this example, replace "tableId" with the ID of your HTML table and "hiddenInput" with the ID of your hidden input field where you want to store the serialized table data. This way, you can include the table data in the form submission without duplicating the data in a hidden textarea.

Rate this post

3 of 5 based on 4793 votes

John Davidson

javascript - Hidden Textarea Options Showing with Other Options When Submitted

Rate this post

Comments