Как получить текстовое значение ввода?

Question

Как я могу получить значение текстового поля?

<input class="num1" type="text" val=""><br> 
<button class="show">Click</button> 

это мой Js код:

var value = $('.num1').text(); 
$('.Click').click(function(){ 
    $('<'p>').text(value); 
}); 

, когда я нажал на кнопку «нажмите» Я хочу показать в пункте текст, который я бы ввод в текстовое поле.

Answer 1

Это было бы

var value = $('.num1').val(); 

Answer 2

использование .val() не .text()

$(".show").click(function(){ 
     var value= $(".num1").val(); 
    $(".para").text(value) 

    }); 

demo

Answer 3

Использование .val() для элементов формы, чтобы получить или установить его значение. Кроме того, обратите внимание на опечатку, когда вы устанавливаете текст абзаца.

var value = $('.num1').val(); 
$('.show').on('click', function(){ 
    $('p').text(value); 
}); 

Answer 4

Используйте оператор val() на входе, чтобы получить значение, а затем вы можете использовать следующий код:

Html:

<input class="num1" type="text"> 
<button class="show">Click</button> 
<p class="output"></p> 

Javascript:

$('button').click(function(){ 
    $('.output').html($('.num1').val()); 
}); 

Answer 5

В вашем коде есть ошибка: если вы хотите поймать событие click, вы должны использовать класс th e. Другая ошибка в вашем коде - о одиночных кавычках, которые вы используете для вставки значения в <p>. И помните, что это $('p'), а не $('<p>').

Код должен выглядеть так:

$('.show').click(function(){ 
    $('p').text(value); 
}); 

Вы можете использовать этот код:

JQuery

$(function(){ 

     $("form").on("submit", function(event){ 
      event.preventDefault(); 

      var text = $(".num1").val(); 

      $("#outputText").text(text); 
     }) 

    }); 

Ваш HTML должен быть чем-то вроде этого:

HTML

<form> 
     <input class="num1" type="text" val=""> 
     <button class="show">Click</button> 
</form> 

<p id="outputText"></p> 

Обратите внимание, что в данном случае очень важно, чтобы остановить поведение события по умолчанию с помощью preventDefault().

Если вы не используете форму предыдущий код стал чем-то вроде этого:

JQuery

$(function(){ 

      $(".show").on("click", function(event){ 

       var text = $(".num1").val(); 

       $("#outputText").text(text); 
      }) 

     }); 

HTML

<input class="num1" type="text" val=""> 
    <button class="show">Click</button> 

    <p id="outputText"> 

    </p> 

outputText DIV является ДИВ I созданный для отображения текста.

Я подготовил jsfiddle1, jsfiddle2 вы можете использовать, чтобы увидеть код в действии, я надеюсь, что это помогает ;-)

Answer 6

$('.show').click(function() { 
 
    var value = $('.num1').val(); 
 
    $('p').text(value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="num1" type="text" val=""></input> 
 
<button class="show">Click</button> 
 
<p></p>

Есть ошибки типа

1. var value = $('.num1').val(); должен быть в click метод.
2. Используйте val() вместо .text(), чтобы получить входное значение.