Получить значение checkbox в Rails check_box_tag, используя jquery ajax

Question

У меня есть эта форма И этот код для формы выглядит так:

.form-group.form-item.row
   = hidden_field_tag "test_method_id", @test_method.id, id: 'test_method_id'
   .col-sm-3
     %label Signature Title
      = text_field_tag 'signature_title', nil, class: 'form-control', placeholder: 'Enter Signature Title'
   .col-sm-3
     %label Add Required Certificate Types
      = collection_select :signature_requirement, :certificate_ids, @certificates, :id, :name, { selected: @test_method.certificate_ids, include_blank: "Select Certificate Type" }, { class: "form-control select2 multi-select2", multiple: "multiple" }

   .col-sm-2
     %label.small Mandatory Signature
     .form-check.mt-2.text-center
       = check_box_tag 'mandatory', 'mandatory', false, class: 'form-check-input'
   .col-sm-2
     %label.small Show Signature in Report
     .form-check.mt-2.text-center
       = check_box_tag 'include_in_report', 'include_in_report', false, class: 'form-check-input'
   .col-sm-2
     .icon.text-center
       %i#create-signature-requirement-btn.fa.fa-plus-circle.add-icon

Основное внимание уделяется флажкам, я хочу, чтобы это значение было отправленона рельсы, но они не передаются в params, я понятия не имею, почему.

Прочитайте несколько ответов и документации StackOverflow, но я не могу найти правильное решение.

Как получить значение флажка для передачи - на рельсы, снять флажок (при успешном выполнении ajax), а затем проверить его при добавлении в таблицу?

Вот кодкоторый получает значения заголовка и типов сертификатов, добавленные в таблицу в данный момент.

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();

    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();

    $.ajax({
      url:
        '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
      dataType: 'json',
      method: 'POST',
      data: {
        signature_requirement: {
          signature_title: signatureTitle,
          certificate_ids: certificateIds
        }
      },
      success: function(data) {
        console.log(data);
        appendSignatureRequirement(data);
        $('#signature_title').val('');
        $('#signature_requirement_certificate_ids')
          .val(null)
          .trigger('change');
      }
    });
  });

Это код для функции appendSignatureRequirement():

function appendSignatureRequirement(record) {
  row = $('#signature_requirement_' + record['id']);
  texts = $('#signature_requirement_certificate_ids').select2('data');
  var html =
    '<td>' +
    non_null(record['signature_title']) +
    '</td>' +
    '<td>' +
    extractTextFromMultiSelect(texts) +
    '</td>' +
    '<td>' +
    "<a class='mr-2' href='javascript:editSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-pencil text-secondary' aria-hidden='true' data-toggle='tooltip' title='Edit'></i>" +
    '</a>' +
    "<a href='javascript:deleteSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-trash text-danger' aria-hidden='true' data-toggle='tooltip' title='Delete'></i>" +
    '</a>' +
    '</td>';
  if (!row.length) {
    row = $('#signature_requirements').append(
      "<tr id='signature_requirement_" + record['id'] + "'>" + html + '</tr>'
    );
  } else {
    row.empty();
    row.append(html);
  }
}

, а вот моя таблица базы данных:

 => SignatureRequirement(id: integer, signature_title: string, mandatory: integer, include_in_report: integer, test_method_id: integer, created_at: datetime, updated_at: datetime)

Это код длятаблица, отображающая значения:

    .col-sm-10
      .table-responsive.mt-5
        %table.table.table-hover.table-valign-middle
          %thead
            %tr
              %th Title
              %th Certificate Types
              %th Mandatory
              %th Show in Report
              %th Actions
          %tbody#signature_requirements
            - @test_method.signature_requirements.each do |signature_requirement|
              %tr{:id => "signature_requirement_#{signature_requirement.id}"}
                %td
                  = signature_requirement.signature_title
                %td
                  - signature_requirement.certificates.each do |certificate|
                    %span.badge.badge-pill.badge-primary
                      = certificate.name
                %td
                  %a.mr-2{:href => "javascript:editSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-pencil.text-secondary{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Edit"}
                  %a{:href => "javascript:deleteSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-trash.text-danger{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Delete"}

Answer 1

Я смог решить проблему.Спасибо за этот ответ за то, что я начал.

Это полная реализация:

Извлечение текста из поля множественного выбора и удаление запятой из массива, сгенерированногофункция карты

function extractTextFromMultiSelect(record) {
  if (record.length === 0) {
    return '';
  } else {
    let texts = $.map(record, function(obj) {
      span =
        '<span class="badge badge-pill badge-primary">' + obj.text + '</span>';
      return span;
    });
    return texts.join(' ');
  }
}

с использованием свойства HTML selected, отметьте флажок, если установлен, и null, если нет

function extractMandatoryCheckbox() {
  let mandatory = $('input[name="mandatory"]').prop('checked')
    ? 'checked'
    : null;
  return `<div class="form-check text-center">
    <input type="checkbox" class="form-check-input mb-4" ${mandatory}>
    </div>`;
}

function extractShowInReportCheckbox() {
  let include_in_report = $('input[name="include_in_report"]').prop('checked')
    ? 'checked'
    : null;
  return `<div class="form-check text-center">
    <input type="checkbox" class="form-check-input mb-4" ${include_in_report}>
    </div>`;
}

Добавить в таблицу

function appendSignatureRequirement(record) {
  row = $('#signature_requirement_' + record['id']);
  texts = $('#signature_requirement_certificate_ids').select2('data');
  var html =
    '<td>' +
    non_null(record['signature_title']) +
    '</td>' +
    '<td>' +
    extractTextFromMultiSelect(texts) +
    '</td>' +
    '<td>' +
    extractMandatoryCheckbox() +
    '</td>' +
    '<td>' +
    extractShowInReportCheckbox() +
    '</td>' +
    '<td>' +
    "<a class='mr-2' href='javascript:editSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-pencil text-secondary' aria-hidden='true' data-toggle='tooltip' title='Edit'></i>" +
    '</a>' +
    "<a href='javascript:deleteSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-trash text-danger' aria-hidden='true' data-toggle='tooltip' title='Delete'></i>" +
    '</a>' +
    '</td>';
  if (!row.length) {
    row = $('#signature_requirements').append(
      "<tr id='signature_requirement_" + record['id'] + "'>" + html + '</tr>'
    );
  } else {
    row.empty();
    row.append(html);
  }
}

Создать и вставить вбаза данных (извлеките значения флажков и затем обнулите в случае успеха)

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();

    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();
    let mandatory = $('input[name="mandatory"]').prop('checked') ? 1 : 0;
    let include_in_report = $('input[name="include_in_report"]').prop('checked')
      ? 1
      : 0;

    $.ajax({
      url:
        '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
      dataType: 'json',
      method: 'POST',
      data: {
        signature_requirement: {
          signature_title: signatureTitle,
          certificate_ids: certificateIds,
          mandatory: mandatory,
          include_in_report: include_in_report
        }
      },
      success: function(data) {
        appendSignatureRequirement(data);
        $('#signature_title').val('');
        $('#signature_requirement_certificate_ids')
          .val(null)
          .trigger('change');
        // uncheck upon success
        $('#mandatory').prop('checked', false);
        $('#include_in_report').prop('checked', false);
      }
    });
  });

Таблица в представлении Rails

   .col-sm-10
      .table-responsive.mt-5
        %table.table.table-hover.table-valign-middle
          %thead
            %tr
              %th Title
              %th Certificate Types
              %th Mandatory
              %th Show in Report
              %th Actions
          %tbody#signature_requirements
            - @test_method.signature_requirements.each do |signature_requirement|
              %tr{:id => "signature_requirement_#{signature_requirement.id}"}
                %td
                  = signature_requirement.signature_title
                %td
                  - signature_requirement.certificates.each do |certificate|
                    %span.badge.badge-pill.badge-primary
                      = certificate.name
                %td
                  .form-check.text-center.mb-4
                    = check_box_tag 'mandatory', nil, signature_requirement.mandatory == 1, class: 'form-check-input'
                %td
                  .form-check.text-center.mb-4
                    = check_box_tag 'include_in_report', nil, signature_requirement.include_in_report == 1, class: 'form-check-input'
                %td
                  %a.mr-2{:href => "javascript:editSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-pencil.text-secondary{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Edit"}
                  %a{:href => "javascript:deleteSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-trash.text-danger{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Delete"}

Изображение после реализации

Answer 2

Пожалуйста, попробуйте следующий код для проверки значений флажков.

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();
    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();

    let mandatory = $("input[name='mandatory']:checked") ? 1 : 0;

    let include_in_report= $("input[name='include_in_report']:checked") ? 1 : 0;

    $.ajax({
    url:
            '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
            dataType: 'json',
            method: 'POST',
            data: {
            signature_requirement: {
            signature_title: signatureTitle,
                    certificate_ids: certificateIds,
                    mandatory: mandatory,
                    include_in_report: include_in_report,
            }
            },
            success: function(data) {
            console.log(data);
            appendSignatureRequirement(data);
            $('#signature_title').val('');
            $('#signature_requirement_certificate_ids')
                    .val(null)
                    .trigger('change');
            }
    });
    });