Can't get $_POST value from JS generated form using onclick

Question

I have an app, in which I have a button that opens a pop up window.

<li class="nav-item">
    <a href="#" onclick="showSwal('addnotebook')" class="nav-link"> 
        <i class="link-icon" data-feather="plus"></i>
        <span class="link-title">
            <p>Create notebook</p>
        </span>
    </a>
</li>

This then uses the sweet-alert js class to create the following pop-up form.

$(function() {

showSwal = function(type) {
'use strict';
if (type === 'addnotebook') {
  swal.fire({


    title: '<strong>Create a notebook</strong>',
    html:
    '<form class="forms-sample" method="post" action="/notebook/addnotebook">' +
          '<div class="form-group">' +
              '<input type="text" class="form-control" name="notebook_name" placeholder="Notebook name">' +
          '</div>' +
          '<div class="form-group">' +
            '<button type="button" value="&#x1F363;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#x1F363;">' +
              '<p>&#x1F363;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#127812;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#127812;">' +
              '<p>&#127812;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#127541;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#127541;">' +
              '<p>&#127541;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#127817;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#127817;">' +
              '<p>&#127817;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#128213;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#128213;">' +
              '<p>&#128213;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#128216;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#128216;">' +
              '<p>&#128216;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#128273;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#128273;">' +
              '<p>&#128273;</p>' +
            '</button>' +
            '<br>' +
            '<button type="button" value="&#129361;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#129361;">' +
              '<p>&#129361;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#127825;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#127825;">' +
              '<p>&#127825;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#127757;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#127757;">' +
              '<p>&#127757;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#127826;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#127826;">' +
              '<p>&#127826;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#9749;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#9749;">' +
              '<p>&#9749;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#127891;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#127891;">' +
              '<p>&#127891;</p>' +
            '</button>' +
            '&nbsp;' +
            '<button type="button" value="&#128065;" name="notebook_icon" class="btn btn-white btn-icon" onclick="&#128065;">' +
              '<p>&#128065;</p>' +
            '</button>' +
          '</div>' +
          '<button type="submit" class="btn btn-primary" autocomplete="off">Submit</button>' +
      '</form>',
      showCancelButton: true,
      showConfirmButton: false,
      cancelButtonText: 'Close',

  })
} 

The problem I am having is that when the form is submitted, the 4_POST value for 'notebook_icon' isn't submitted. Only the notebook name obtained from the input element.

I am presuming it is something to do with using a rather than a radio but I prefer the button option visually. I tried using the logic from this post: https://stackoverflow.com/a/5438236/6413592 but no luck as of yet.

If anyone could help me work out how to get the value of notebook_icon submitted with the form it would be appreciated.

Regards, Brad

Answer 1

This is my theory you may try this if it works. I assume you are using jquery because of $(function() { . Insert this line in your html <input type="hidden" name="notebookIcon" value="" /> . Then create a function like

function selectIcon() {
   $("input[name='notebookIcon']").val($(this).val());
} 

Then on your button you may add the function on click

<button type="button" value="&#128065;" name="notebook_icon" class="btn btn-white btn-icon" onclick="selectIcon">

Theoretically this is my approach. Hope this will guide you to your solution.