文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何在更改时获得输入文本值

问如何在更改时获得输入文本值
EN

Stack Overflow用户
提问于 2022-03-28 15:45:51
回答 1查看 46关注 0票数 0

我试图得到输入文本值时，我通过键入按钮+或-所以我可以发送它的形式，但当我点击搜索按钮，我没有得到任何在URL。我拿到了这个：myWebsite.com/?#

每次使用按钮+和按钮进行更改时，我都需要得到最终值

​

代码语言：javascript
运行
复制
// increment num (Voyageurs)
$(".voyageurs-content__item-right :disabled").before(
  '<button type="button" name="button_dec" class="dec button-inc-dec"><span>-</span></button>'
);
$(".voyageurs-content__item-right :disabled").after(
  '<button type="button" name="button_in" class="inc button-inc-dec"><span>+</span></button>'
);

$(".button-inc-dec").on("click", function() {
  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

  if ($button.text() == "+") {
    var newVal = parseFloat(oldValue) + 1;
    $(".button-inc-dec.dec").removeClass("nb-underZero");
    $(".button-inc-dec.dec").removeAttr("disabled");
    // console.log("btn", $button);
  }
  if (newVal > 0) {} else {
    // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseFloat(oldValue) - 1;
    }
    if (newVal == 0) {
      $button.addClass("nb-underZero");
      $button.attr("disabled", true);
      newVal = 0;
    }
  }

  $button.parent().find("input").val(newVal);
  var id = $button.attr("id");
  $.ajax({
    type: "POST",
    url: "?id=" + id + "&newvalue=" + newVal,
    success: function() {
      $button.parent().find("input").val(newVal);
    },
  });
});
代码语言：javascript
运行
复制
.search-box .search-box__voyageurs {
  padding: 0 4rem 1.5rem 4rem;
  margin-right: 2rem;
}

.search-box .search-box__voyageurs .voyageurs-content {
  width: 43rem;
  min-width: 43rem;
}

.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item {
  justify-content: space-between;
}

.search-box {
  flex-direction: row;
  padding: 1rem 2.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 4.5rem;
  background-color: #FFF;
  padding: 1rem 3rem 1rem 1rem;
}

.search-box .radius-box {
  position: absolute;
  top: 10.6rem;
  background-color: #FFF;
  border-radius: 3.2rem;
  padding: 3.5rem 3rem 3.5rem;
}

.search-box .search-box__label {
  font-weight: bold;
  text-align: left;
  margin-bottom: 0.5rem;
}

.search-box .search-box__flex-bulle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search-box .search-box__voyageurs {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1.5rem 1rem;
  text-align: left;
}

vertical-align: bottom;

}
.search-box .search-box__voyageurs button {
  color: #576070;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item {
  display: flex;
  position: relative;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item:not(:last-child) {
  padding-bottom: 2rem;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item:not(:last-child):after {
  content: "";
  background-color: #E1E1E1;
  width: 100%;
  height: 0.1rem;
  display: block;
  position: absolute;
  bottom: 0;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item:not(:first-child) {
  padding-top: 2rem;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-left p {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-left span {
  color: #576070;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right {
  display: flex;
  align-items: baseline;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right .button-inc-dec.dec.nb-underZero {
  border: 0.1rem solid #B8BCC3;
  color: #B8BCC3;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right .button-inc-dec.inc,
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right .button-inc-dec.dec {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 0.1rem solid #576070;
  border-radius: 50rem;
  padding: 0;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right input[type=text] {
  color: #576070;
  background-color: #FFF;
  border: none;
  width: 3rem;
  font-size: 2rem;
  text-align: center;
}
.search-box .search-box__btn {
  display: flex;
  align-items: center;
}
.search-box .search-box__btn>button {
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #F93C64;
  color: #FFF;
  padding: 1.5rem 3rem;
  border: none;
  border-radius: 4rem;
}
代码语言：javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="search" id="az-search-box" class="validate search-box" method="GET" action="#">
  <div class="search-box__voyageurs">
    <div class="voyageurs-content radius-box">
      <div class="voyageurs-content__item">
        <div class="voyageurs-content__item-left">
          <p>Adultes</p>
        </div>
        <div class="voyageurs-content__item-right">
          <input type="text" class="voyageurs-choix" disabled name="voyageur_adultes" id="voyageur-adultes" value="0">
        </div>
      </div>
      
      <div class="voyageurs-content__item">
        <div class="voyageurs-content__item-left">
          <p>Enfants</p>
        </div>
        
        <div class="voyageurs-content__item-right">
          <input type="text" class="voyageurs-choix" disabled name="voyageur_enfants" id="voyageur-enfants" value="0">
        </div>
      </div>
      
      <div class="voyageurs-content__item">
        <div class="voyageurs-content__item-left">
          <p>Bébés</p>
        </div>
        
        <div class="voyageurs-content__item-right">
          <input type="text" class="voyageurs-choix" disabled name="voyageur_bebes" id="voyageur-bebes" value="0">
        </div>
      </div>
    </div>
  </div>

  <div class="search-box__btn">
    <button type="submit" id="search-form-submit">Search
        </button>
  </div>
</form>

​

javascript
jquery
forms
url
EN

回答 1

Stack Overflow用户

发布于 2022-03-29 05:26:26

问题是id和newValue变量的值都是undefined。

此外，当单击按钮增量时，newValue变量已在if块中启动.因此，如果单击按钮减少，则newValue将是undefined。

我假设您希望将id的input名称值(例如: voyageur_adultes、voyageur_enfants、.)发送如下：

代码语言：javascript
运行
复制
var id = $input.attr("name");

​

代码语言：javascript
运行
复制
// increment num (Voyageurs)
$(".voyageurs-content__item-right :disabled").before(
  '<button type="button" name="button_dec" class="dec button-inc-dec"><span>-</span></button>'
);
$(".voyageurs-content__item-right :disabled").after(
  '<button type="button" name="button_in" class="inc button-inc-dec"><span>+</span></button>'
);

$(".button-inc-dec").on("click", function(e) {
  var $button = $(e.currentTarget);
  var $input = $button.parent().find("input")
  var curVal = parseInt($input.val());

  if ($button.attr("name") === "button_dec") {
    $input.val(curVal === 0 ? 0 : --curVal);
  }
  if ($button.attr("name") === "button_in") {
    $input.val(++curVal);
  }

  var id = $input.attr("name");
  var newValue = $input.val();

  console.log(`?id= ${id} &newvalue= ${newValue}`);
  $.ajax({
    type: "POST",
    url: `?id= ${id} &newvalue= ${newValue}`,
    success: function() {},
  });
});
代码语言：javascript
运行
复制
.search-box .search-box__voyageurs {
  padding: 0 4rem 1.5rem 4rem;
  margin-right: 2rem;
}

.search-box .search-box__voyageurs .voyageurs-content {
  width: 43rem;
  min-width: 43rem;
}

.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item {
  justify-content: space-between;
}

.search-box {
  flex-direction: row;
  padding: 1rem 2.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 4.5rem;
  background-color: #FFF;
  padding: 1rem 3rem 1rem 1rem;
}

.search-box .radius-box {
  position: absolute;
  top: 10.6rem;
  background-color: #FFF;
  border-radius: 3.2rem;
  padding: 3.5rem 3rem 3.5rem;
}

.search-box .search-box__label {
  font-weight: bold;
  text-align: left;
  margin-bottom: 0.5rem;
}

.search-box .search-box__flex-bulle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search-box .search-box__voyageurs {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1.5rem 1rem;
  text-align: left;
}

vertical-align: bottom;

}
.search-box .search-box__voyageurs button {
  color: #576070;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item {
  display: flex;
  position: relative;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item:not(:last-child) {
  padding-bottom: 2rem;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item:not(:last-child):after {
  content: "";
  background-color: #E1E1E1;
  width: 100%;
  height: 0.1rem;
  display: block;
  position: absolute;
  bottom: 0;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item:not(:first-child) {
  padding-top: 2rem;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-left p {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-left span {
  color: #576070;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right {
  display: flex;
  align-items: baseline;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right .button-inc-dec.dec.nb-underZero {
  border: 0.1rem solid #B8BCC3;
  color: #B8BCC3;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right .button-inc-dec.inc,
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right .button-inc-dec.dec {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 0.1rem solid #576070;
  border-radius: 50rem;
  padding: 0;
}
.search-box .search-box__voyageurs .voyageurs-content .voyageurs-content__item .voyageurs-content__item-right input[type=text] {
  color: #576070;
  background-color: #FFF;
  border: none;
  width: 3rem;
  font-size: 2rem;
  text-align: center;
}
.search-box .search-box__btn {
  display: flex;
  align-items: center;
}
.search-box .search-box__btn>button {
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #F93C64;
  color: #FFF;
  padding: 1.5rem 3rem;
  border: none;
  border-radius: 4rem;
}
代码语言：javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="search" id="az-search-box" class="validate search-box" method="GET" action="#">
  <div class="search-box__voyageurs">
    <div class="voyageurs-content radius-box">
      <div class="voyageurs-content__item">
        <div class="voyageurs-content__item-left">
          <p>Adultes</p>
        </div>
        <div class="voyageurs-content__item-right">
          <input type="text" class="voyageurs-choix" disabled name="voyageur_adultes" id="voyageur-adultes" value="0">
        </div>
      </div>

      <div class="voyageurs-content__item">
        <div class="voyageurs-content__item-left">
          <p>Enfants</p>
        </div>

        <div class="voyageurs-content__item-right">
          <input type="text" class="voyageurs-choix" disabled name="voyageur_enfants" id="voyageur-enfants" value="0">
        </div>
      </div>

      <div class="voyageurs-content__item">
        <div class="voyageurs-content__item-left">
          <p>Bébés</p>
        </div>

        <div class="voyageurs-content__item-right">
          <input type="text" class="voyageurs-choix" disabled name="voyageur_bebes" id="voyageur-bebes" value="0">
        </div>
      </div>
    </div>
  </div>

  <div class="search-box__btn">
    <button type="submit" id="search-form-submit">Search
        </button>
  </div>
</form>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71650129

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档