Question

我有一个问题，有ajax请求。按钮输入是clecked它是双打ajax请求。我花了4个小时来处理它并没有任何影响。有人可以帮助我。我在这里创建了consol.log。为了更好地理解我的错误代码。先谢谢你了！

＆＃13;

let formSubmitHandler = (data) => {
  console.log(data)
  // $.ajax({ url: 'index.php',
}
let handleInputEdit = (data) => {
  let onFocusHandler = (element) => {
    element.keypress(function( event ) {
      if ( event.which == 13) {
        let inputData = element.val();
        let name = element.attr('name');
        return onHandlerFormData(name, inputData);
      }
    })
  }
  let onHandlerFormData = (name, data) => {
    let str = `${name}=${data}`;
    $('#data').html(str)
    return formSubmitHandler(str);
  }
  let onEditHandler = () => {
    let checkboxes = document.querySelectorAll('input[type=checkbox]');
    for (let i = 0; i < checkboxes.length; i++) {
      const element = checkboxes[i];
      let getNaighborInput = $(element).parent().next();
      getNaighborInput.attr("disabled", true);
      if (element.checked) {
        let getNaighborInput = $(element).parent().next();
        getNaighborInput.attr("disabled", false)
          .focus(function(){
            onFocusHandler($(this));
          })
      }
    }
  };
  onEditHandler();
  $("input[type=checkbox]").on("click", onEditHandler);
}
handleInputEdit();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mainForm">
  <label for="companyName">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
        id="companyName"
        type="text" 
        class="form-control"
        aria-label="..." 
        name="companyName"
        >
  </div>
  <label for="edrpou">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
      id="edrpou"
      type="text" 
      class="form-control"
      aria-label="..." 
      name="edrpou"
      >
  </div>
</form>

＆＃13;

Answer 1

您多次致电onFocusHandler。每次单击复选框时，您都会多次绑定onFocusHandler。从onFocusHandler的定义移动onEditHandler将解决此问题。试试下面的代码， onEditHandler将更改如下，

let onEditHandler = () => {
    let checkboxes = document.querySelectorAll('input[type=checkbox]');
    for (let i = 0; i < checkboxes.length; i++) {
        const element = checkboxes[i];
        let getNaighborInput = $(element).parent().next();
        getNaighborInput.attr("disabled", true);
        if (element.checked) {
            let getNaighborInput = $(element).parent().next();
            getNaighborInput.attr("disabled", false)

        }
    }
};

并将onFocusHandler函数与复选框绑定一次，如下所示，

$('input[type=checkbox]').each(function () {
    onFocusHandler($(this).parent().next());
});

Answer 2

我重新编写了javascript来处理启用/禁用文本框，还为ENTER按下处理keyup事件。

我认为代码更具可读性，加上：它按预期工作。

// disable all textboxes by default
$('input[type=text]').attr('disabled','disabled');

//only enable the textbox next to the checkbox if it was checked
$(document).on('click','input[type=checkbox]',function(){
    if ($(this).is(':checked')) {

        $(this).parent().siblings('input[type=text]')
                        .removeAttr('disabled');
    } else {

        $(this).parent().siblings('input[type=text]')
                        .attr('disabled','disabled');
    }
});


//whenever the ENTER key is pressed within an enabled textbox, handle it
$(document).on('keyup','input[type=text]',function(e) {
    if(e.which == 13) {
        console.log( $(this).attr('id') + '=' + $(this).val() );
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mainForm">
  <label for="companyName">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
        id="companyName"
        type="text" 
        class="form-control"
        aria-label="..." 
        name="companyName"
        >
  </div>
  <label for="edrpou">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
      id="edrpou"
      type="text" 
      class="form-control"
      aria-label="..." 
      name="edrpou"
      >
  </div>
</form>

Answer 3

与Ahmad一样......我也重写了太复杂的代码。

这让我的大脑流血了它最终做了一个如此简单的任务！

关于HTML的更改，我只在标记中添加了disabled属性straith。

看看：

＆＃13;

$("#mainForm input[type='checkbox']").on("click",function(){
  var text_input = $(this).parent().next("input");
  var text_input_dasbled = text_input.prop("disabled");
  text_input.attr("disabled", !text_input_dasbled); // Toggle disabled
});

$("#mainForm input[type='text']").on("keyup",function(e){
  if(e.which==13){
    var data = {[$(this).attr("name")]:$(this).val()};
    console.log(data)
    // $.ajax({ ... });
  }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>


<form id="mainForm">
  <label for="companyName">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
           id="companyName"
           type="text" 
           class="form-control"
           aria-label="..." 
           name="companyName"
           disabled>
  </div>
  
  <label for="edrpou">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
           id="edrpou"
           type="text" 
           class="form-control"
           aria-label="..." 
           name="edrpou"
           disabled>
  </div>
</form>

＆＃13;

为什么ajax请求加倍？

3 个答案: