如何从输入标签正确获取值？

时间：2018-06-28 14:27:24

标签： javascript jquery html css

如何获取输入标签值？

我在从输入中选择正确的值时遇到问题，目前我只获得第一个值= text_1，而且我不知道为什么我不选择其他值...

这是在面板中选择值的原型，用户尝试在其中使用鼠标来选择最感兴趣的面板。

我只希望按钮后单击一个值

有人可以帮我吗？

$(document).ready(function(){
    $("#openButton").click(function(){
        alert("Value: " + $("div > :submit").val());
        });
    });
.item {
    flex: 1;
    text-align: center;
    font-size: 1.5em;
}

.flex {
    flex: 0;
}

.imagem-chave{
    padding-top: 100px;
    margin-bottom: 300px;
    display:flex;
    justify-content: space-evenly;        
}

.container-grande_img{

    border-top: 2px solid #0000FF;
    border-bottom: 2px solid #0000FF;
    border-left: 2px solid #0000FF;
    border-right: 2px solid #0000FF;
    margin-top: 20px;
    padding-bottom: 5px;
    width: 30%;
    height: 50%;
    display: inline-block;
    justify-content: space-around;
    flex-wrap: wrap;
    
}
.botao{
    margin-top:-30px;
}

.legend {
    width: 60px;
    font-size:14px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#00004d;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 50%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

div.inputbutton {
position: relative;
display: inline-block;

}

div.inputbutton input {
background: url('/img/livre.png') no-repeat;
cursor: pointer;
width: 100px;
height: 130px;
border: none;
background-size: 100%;
}

span.text {
position: absolute;
bottom: 10%;
left: 5px;
width: 100%;
font-size: 15px;
color: white;
}
#myNavbar{
    font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <div class="item flex imagem-chave">
                        <div class="inputbutton">
                        <span class="text">TEXT_1</span>
                            <input type="submit" class="btTxt submit" value="TEXT_1"  id="TEXT_1">
                        </div>                        
                        <div class="inputbutton">
                        <span class="text">TEXT_2</span>
                            <input type="submit" class="btTxt submit" value="TEXT_2"  id="TEXT_2">
                        </div>
                        <div class="inputbutton">
                        <span class="text">TEXT_3</span>
                            <input type="submit" class="btTxt submit" value="TEXT_3"  id="TEXT_3">
                        </div>
                        <div class="inputbutton">
                        <span class="text">TEXT_4</span>
                            <input type="submit" class="btTxt submit" value="TEXT_4"  id="TEXT_4">
                        </div>
                </div>
                    <div class="item flex botao ">
                    <button type="Liberar" id="openButton" class="btn btn-primary" >open key</button>
                    </div>

3 个答案:

答案 0 :(得分：0)

我误解了这个问题。如果要使用多个按钮选择一个选项，则应使用单选按钮：

<input type="radio" name="some_option" value="TEXT_1" id="option_TEXT_1" />
<label for="option_TEXT_1">TEXT_1</label>
<input type="radio" name="some_option" value="TEXT_2" id="option_TEXT_2" />
<label for="option_TEXT_2">TEXT_2</label>
<input type="radio" name="some_option" value="TEXT_3" id="option_TEXT_3" />
<label for="option_TEXT_3">TEXT_3</label>
<input type="radio" name="some_option" value="TEXT_4" id="option_TEXT_4" />
<label for="option_TEXT_4">TEXT_4</label>
<button type="Liberar" id="openButton" class="btn btn-primary" >open key</button>

在JS中：

$("#openButton").click(function () {
    alert(document.querySelector(
            'input[name="some_option"]:checked').value);
}

如果您真的想使用按钮，<input type=submit>元素并不是最佳的工具，因为用户可能在同一页面上单击了许多按钮：

<button class="some_option" id="option_TEXT_1">TEXT_1</button>
<button class="some_option" id="option_TEXT_2">TEXT_2</button>
<button class="some_option" id="option_TEXT_3">TEXT_3</button>
<button class="some_option" id="option_TEXT_4">TEXT_4</button>
<button type="Liberar" id="openButton" class="btn btn-primary" >open key</button>

在JS中：

var option = "";
$("button.some_option").click(function () {
    option = $(this).attr("id");
}

$("#openButton").click(function () {
    alert(option);
}

原始答案，我以为您要输入文本：

根据the documentation for val()，它仅从第一个元素获取值（如果您在一组多个元素上调用它）。

考虑将each()与回调一起使用。

答案 1 :(得分：0)

$(document).ready(function() {
  $("#openButton").click(function() {
    $('input[type="submit"]').each(function() {
      alert("Value: " + $(this).val());
    });
  });
});
body,
h1,
h2,
h5,
p,
ul,
li,
a {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: "Nunito", Helvetica, Arial;
  color: #222222;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

.menu-bg {
  background: #00004d;
}

.menu {
  max-width: 2000px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 10px;
  align-items: center;
  margin-right: 250px
}

.menu a {
  color: #FFFFFF;
  font-size: 15px;
}

.menu-logo a {
  font-size: 3em;
  font-weight: bold;
  margin: 0 10px;
  float: left;
}

.menu-logo img {
  padding-left: 0px;
  width: 159px;
  height: 24px;
}

.column {
  min-height: 200px;
  flex-direction: column;
}

.flex-start {
  justify-content: flex-start;
}

h1 {
  text-align: center;
  margin: 50px 0 0 0;
  font-size: 1.25em;
  font-weight: normal;
  justify-content: center;
  width: 100%;
}

.center {
  justify-content: center;
}

.container-grande {
  max-width: 1000px;
  max-height: 600px;
  margin: 40px auto;
  display: flex;
  border: 0px solid #ccc;
  padding: 00px 00px 500px 00px;
  background: #F5F5F5;
}

.container-grande item {
  max-width: 420px;
  margin: 0 auto;
  justify-content: center;
}

.container-grande h1 {
  border-bottom: 0px solid #ccc;
  text-align: left;
  flex: 1 1 400px;
  font-size: 1.25em;
}

.container-cor {
  width: 97%;
  border-bottom: 1px solid;
  margin-left: 15px;
}

.item {
  flex: 1;
  text-align: center;
  font-size: 1.5em;
}

.flex {
  flex: 0;
}

.imagem-chave {
  padding-top: 100px;
  margin-bottom: 300px;
  display: flex;
  justify-content: space-evenly;
}

.container-grande_img {
  border-top: 2px solid #0000FF;
  border-bottom: 2px solid #0000FF;
  border-left: 2px solid #0000FF;
  border-right: 2px solid #0000FF;
  margin-top: 20px;
  padding-bottom: 5px;
  width: 30%;
  height: 50%;
  display: inline-block;
  justify-content: space-around;
  flex-wrap: wrap;
}

.botao {
  margin-top: -30px;
}

.legend {
  width: 60px;
  font-size: 14px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #00004d;
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 50%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

div.inputbutton {
  position: relative;
  display: inline-block;
}

div.inputbutton input {
  background: url('/img/livre.png') no-repeat;
  cursor: pointer;
  width: 100px;
  height: 130px;
  border: none;
  background-size: 100%;
}

span.text {
  position: absolute;
  bottom: 10%;
  left: 5px;
  width: 100%;
  font-size: 15px;
  color: white;
}

#myNavbar {
  font-size: 15px;
}

.navbar-header .navbar-toggle {
  background: white;
  margin-right: -50px;
  margin-bottom: -20px;
}

.navbar-header .navbar-toggle .icon-bar {
  background: black;
}

.menu-nav ul li a:hover {
  background: transparent;
  color: grey;
}

.menu-nav ul li a:active {
  background: transparent;
  color: grey;
}

.navbar-default {
  background-color: #00004d;
  border-color: #00004d;
  margin-right: 50px;
}

.navbar-default .navbar-brand {
  color: #ecf0f1;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ecdbff;
}

.navbar-default .navbar-text {
  color: #ecf0f1;
}

.navbar-default .navbar-nav>li>a {
  color: #ecf0f1;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #ecdbff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #ecdbff;
  background-color: #00004d;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  color: #ecdbff;
  background-color: #00004d;
}

.navbar-default .navbar-toggle {
  border-color: #00004d;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #00004d;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}

.navbar-default .navbar-link {
  color: #ecf0f1;
}

.navbar-default .navbar-link:hover {
  color: #ecdbff;
}

.tam {
  height: 50%;
  width: 1200px;
  background-color: powderblue;
  margin: auto;
}

.tam_Cadastro {
  width: 1200px;
  background-color: powderblue;
  margin: auto;
}

.gerarPDF {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 15px;
}

@media (max-width: 825px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item flex imagem-chave">
  <div class="inputbutton">
    <span class="text">Text_1</span>
    <input type="submit" class="btTxt submit" value="Text_1" id="Text_1">
  </div>
  <div class="inputbutton">
    <span class="text">Text_2</span>
    <input type="submit" class="btTxt submit" value="Text_2" id="Text_2">
  </div>
  <div class="inputbutton">
    <span class="text">Text_3</span>
    <input type="submit" class="btTxt submit" value="Text_3" id="Text_3">
  </div>
  <div class="inputbutton">
    <span class="text">Text_4</span>
    <input type="submit" class="btTxt submit" value="Text_4" id="Text_4">
  </div>
</div>
<div class="item flex botao ">
  <button type="Liberar" id="openButton" class="btn btn-primary">Open Key</button>
</div>

答案 2 :(得分：0)

在您的js中尝试一下：

$(document).ready(function(){
 var lastClicked = null;
 $('.btTxt').click(function(event) {
          lastClicked = event.target
    });

 $("#openButton").click(function(){
    alert("Value: " + $(lastClicked).val());
    });
});
相关问题
最新问题