使用 jQuery 将 span 内容替换为字段值

Question

我想要表单字段，填充后单击按钮将更改 html 中 span 的内容。我尝试了以下方法，但没有替换 span 内容。

我写了以下html:

<form role="form">
    <div class="form-group">
        <label for="name">
            Name
        </label>
        <input type="text" class="form-control" id="nameValue" />
    </div>
    <button id="generate" type="submit" class="btn btn-default">
            Generate Story
    </button>
</form>

<p>The persons name is <span id="name"></span></p>

然后写了下面jQuery:

<script>

$(function() {
  $("button").click( function()
       {
            $("#nameValue").keyup(function() {
                var val = $(this).val();
                $("#name").html(val);
            });
       }
  );
});

</script>

Answer 1

这将在单击按钮和 keyup 后更改跨度值

   <script>

    $(function() {
        $("button").click( function(){
            changeSpanValue($("#nameValue").val());
        });

        $("#nameValue").keyup(function() {
            changeSpanValue($(this).val());
        });
    });

    function changeSpanValue(val){
       $("#name").html(val);
    }

   </script>

Answer 2

尝试分离 keyup、click 事件处理程序，如果 "#nameValue" 没有值，则将 button disabled 设置为 true，设置 button disabled 至 false 在 keyup 事件

$(function() {
  var button = $("button"),
    val = "";
  $("#nameValue").keyup(function() {
    val = $(this).val();
    if (val.length > 0 && /\w+/.test(val)) button.prop("disabled", false)
  });
  button.click(function(e) {
    e.preventDefault();
    $("#name").html(val);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form">
  <div class="form-group">
    <label for="name">
      Name
    </label>
    <input type="text" class="form-control" id="nameValue" />
  </div>
  <button id="generate" type="submit" class="btn btn-default" disabled="true">
    Generate Story
  </button>
</form>

<p>The persons name is <span id="name"></span>
</p>

使用 jQuery 将 span 内容替换为字段值

Use jQuery to replace span content with field value

javascript

jquery

html

keyup