Как запретить элементу jquery принимать ввод / изменения, но при этом отправлять данные по POST (без использования скрытого элемента)? - PullRequest
Новая
       57

Как запретить элементу jquery принимать ввод / изменения, но при этом отправлять данные по POST (без использования скрытого элемента)?

0 голосов
/ 04 января 2019

У меня есть флажок $(#myinput), и, основываясь на выборе нескольких комбинаций других параметров, я бы хотел, чтобы этот флажок применялся как отмеченный или принудительный как не отмеченный.

Однако, если я использую $(#myinput).prop("disabled", true), значение флажка не будет отправлено в сгенерированном POST-запросе. Поскольку это флажок, readonly не имеет никакого эффекта ... то есть, readonly не контролирует, может ли вход испытывать изменение состояния, которое должно быть включено или выключено нажатием.

Без использования скрытого элемента , что является лучшим способом сделать $(#myinput) неизменным при щелчках пользователя, но также убедиться, что любое значение, с которым оно заморожено, все еще может быть отправлено через любую отправку формы / POST запросы?

Я ищу изменение только настроек самого флажка, а не добавление сложности со скрытым элементом. Пожалуйста, добавляйте ответы, только если они избегают создания скрытых элементов.

Ответы [ 2 ]

0 голосов
/ 05 января 2019

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

function check() {
  var val = $('#input1').val();
  console.log(val);
  if (val == "isaac") {
    $('#mycheckbox').prop('checked', true);
  } else {
    $('#mycheckbox').prop('checked', false);
  }
  
}

$('#input1').on('keyup', function() { $(this).blur(); $(this).focus(); });


$('#my-form').submit(function(e){
    e.preventDefault();
    console.log("Submit hit");
    var obj = {
      inputVal1: $('#input1').val(),
      checkedVal: $('#mycheckbox').prop('checked')
    }
    
    console.log(obj)
    //Here is where you would make an ajax request with the form data
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<input onchange="check()" id="input1" type="text" placeholder="type something"/><br />
<p style="display:inline-block">Does the input say "isaac"?</p>
<input style="display:inline-block" disabled="true" id="mycheckbox" type="checkbox" /><br />
<button type="submit">Submit</button>
</form>
0 голосов
/ 04 января 2019

Просто демонстрация предложения Jankapunkt, работает 

document.addEventListener('DOMContentLoaded', function() {

  let button = document.querySelector('#myCheck');
  console.log(button);
  button.addEventListener('click', function(event) {
    event.preventDefault();
    return;
  });

});
<div>
  <input id="myCheck" type="checkbox" checked="true">
</div>
...