Question

我只是想实现一个简单的表单，用户输入一个值并单击Submit。然后将数字写入P标签之间的页面上。

我试图避免使用＆＃34; .this＆＃34; ，因为表单会变得更复杂。

我无法解释为什么这不起作用。

有什么建议吗？

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div id="form">
    Number <input type="text" name="number" class="number">
    <input type="submit" name="submit" class="submit">
</div>    
<p></p>    

<script>
  $(document).ready.$(".submit").click(function() {
      var number = $(".number").val();
      $(p).after("numberis :" + number);
  })
</script>

感谢您的时间。

Answer 1

您想要使用＆＃34;提交＆＃34;触发而不是＆＃34;点击＆＃34;在大多数情况下，在提交按钮上：

$('form').on('submit', function(e) {
    e.originalEvent.preventDefault();
    $('p').html($('.number').val());
    return false;
});

这将取代所有p aragraphs＆＃39;带号码的文字。

请参阅jsfiddle

Answer 2

我认为这是您需要做的，您的代码无效

<script type='text/javascript'>
  $(document).ready(function(){       
     $("#submit").click(function(){
        var number= $( ".number" ).val();      
        $('p').html(number); 
     });     
   })    
</script>

<form id="form">
    Number <input type="text" name="number" class="number">
    <input type="button" id='submit' name="submit" class="submit" value="Submit">    
</form>
<p></p>

Answer 3

您需要使用正确的html结构和有效的JavaScript语法，如下所示。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title></title>
       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
        <script type="text/javascript">        
            $(document).ready(function () {    
                $(".submit").click(function () {    
                    var number = $(".number").val();                    
                    $("p").text("number is :" + number);                    
                });
            });            
        </script>
    </head>
    <body>
        <form action="/" method="post">
          <div id="form">
              Number
              <input type="text" name="number" class="number" />
              <input type="button" value="Submit" name="submit" class="submit" />
          </div>
          <p></p>
        </form>
    </body>
   </html>

从提交表单中获取值 - Jquery

3 个答案: