如何通过单击按钮从输入字段中获取价值

时间:2019-11-14 16:13:10

标签: jquery ajax

我需要帮助来更正我的代码。当我单击“保存”按钮以从每个输入字段检索数据时,HTML代码已从我的PHP循环中打印出来,因此我需要使用T,但无法调整代码。

我不知道为什么,但是如果我在click事件上设置了$this,则整个代码都可以正常工作,但是如果我单击“保存”按钮,则无法正常工作。

div#edit_list
<div id="edit_fields" class="glass">
  <div id="data_holder">
    <p>Nome:</p><input type="text" id="ed_name" name="ed_name" value="<?= $name_dex ?>" />
  </div>
  <div id="data_holder">
    <p>Link:</p><input type="text" id="ed_link" name="ed_link" value="<?= $link_dex ?>" />
  </div>
  <div id="data_holder">
    <p>Tipo:</p><input type="text" id="ed_type" name="ed_type" value="<?= $type_dex ?>" readonly />
  </div>
  <div id="data_holder">
    <p>Shiny:</p><label id="cb_holder"><input type="checkbox" id="ed_shy" name="ed_shy" value="s" <?= $ckd; ?> /><span id="checkmark"></span></label>
  </div>
  <div id="data_holder">
    <input id="submit" class="btn1" type="submit" name="save" value="Salva" />
  </div>
  <div id="nr_dex">#
    <?= $px_dex ?>
  </div>
  <input type="hidden" id="ed_alola" name="ed_alola" value="<?= $alola ?>" />
  <input type="hidden" id="ed_alo_type" name="ed_alo_type" value="<?= $alo_type ?>" />
  <input type="hidden" id="row" name="row" value="<?= $key ?>" />
</div>

这是一个无效的小提琴:https://jsfiddle.net/04w3fdch/

1 个答案:

答案 0 :(得分:0)

摆脱所有, this通话中的$("#...")。在click事件处理程序中,this是“提交”按钮,但输入字段不包含在按钮内。

您需要将其替换为包含所有输入的DIV。另外,ID应该是唯一的,因此您应该使用类而不是ID。

$(document).ready(function() {
  $("input.submit").click(function() {
    var row = $(this).closest(".edit_fields");
    var j_name = $(".ed_name", row).val();
    var j_link = $(".ed_link", row).val();
    var j_type = $(".ed_type", row).val();

    if ($(".ed_shy").is(":checked")) {
      var cb_shy = $(".ed_shy").val();
    } else {
      var cb_shy = "";
    }
    alert("Nome = " + j_name);
  });
});
p {
  margin: 0
}

.edit_fields {
  border: 1px solid black;
  margin: 5px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="edit_fields" class="glass">
  <div class="data_holder">
    <p>Nome:</p><input type="text" class="ed_name" name="ed_name" value="Name..." />
  </div>
  <div class="data_holder">
    <p>Link:</p><input type="text" class="ed_link" name="ed_link" value="a link..." />
  </div>
  <div class="data_holder">
    <p>Tipo:</p><input type="text" class="ed_type" name="ed_type" value="type..." readonly />
  </div>
  <div class="data_holder">
    <p>Shiny:</p><label class="cb_holder"><input type="checkbox" class="ed_shy" name="ed_shy" value="s" /><span class="checkmark"></span></label>
  </div>
  <div class="data_holder">
    <input class="submit" class="btn1" type="submit" name="save" value="Salva" />
  </div>
</div>

<div class="edit_fields" class="glass">
  <div class="data_holder">
    <p>Nome:</p><input type="text" class="ed_name" name="ed_name" value="another Name..." />
  </div>
  <div class="data_holder">
    <p>Link:</p><input type="text" class="ed_link" name="ed_link" value="another link..." />
  </div>
  <div class="data_holder">
    <p>Tipo:</p><input type="text" class="ed_type" name="ed_type" value="another type..." readonly />
  </div>
  <div class="data_holder">
    <p>Shiny:</p><label class="cb_holder"><input type="checkbox" class="ed_shy" name="ed_shy" value="s" /><span class="checkmark"></span></label>
  </div>
  <div class="data_holder">
    <input class="submit" class="btn1" type="submit" name="save" value="Salva" />
  </div>
</div>

<div class="edit_fields" class="glass">
  <div class="data_holder">
    <p>Nome:</p><input type="text" class="ed_name" name="ed_name" value="Third Name..." />
  </div>
  <div class="data_holder">
    <p>Link:</p><input type="text" class="ed_link" name="ed_link" value="Third link..." />
  </div>
  <div class="data_holder">
    <p>Tipo:</p><input type="text" class="ed_type" name="ed_type" value="Third type..." readonly />
  </div>
  <div class="data_holder">
    <p>Shiny:</p><label class="cb_holder"><input type="checkbox" class="ed_shy" name="ed_shy" value="s" /><span class="checkmark"></span></label>
  </div>
  <div class="data_holder">
    <input class="submit" class="btn1" type="submit" name="save" value="Salva" />
  </div>
</div>