在段落中插入输入的表单输入文本

Insert entered form input text into paragraph

本文关键字：输入 表单 文本 插入 段落中      更新时间：2023-09-26

如何将一个人的表单输入文本插入到预制段落中。

例如：输入您的姓名：John

成为 <p>Hello, my name is John</p>

最好在同一或另一个HTML页面上。就像所有这些不同的网络生成器一样。

我可以使用的语言是HTML，jQuery，JavaScript和JSON

。

正如Rory McCrossan的评论中所述，使用.val()和.text()来实现这一点。

试试这个：

$('#btn').on('click', function() {
  $('#text').text('Hello, my name is ' + $('#nameInput').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label for="nameInput">Your Name:
  <input type="text" id='nameInput'>
</label>
<button id='btn'>Show Name</button>
<p id='text'></p>

在 Jquery 中：

$('#paragraphId').text(myText);

如果没有发布更多代码，很难给你更具体的建议，但只要你的段落有一个id并且你的文本存储在一个变量中，上面的应该可以。

这里是小提琴：https：//jsfiddle.net/mt42fn3s/

.HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input type="text" id="name">
<p id="result"></p>

jQuery

$( document ).ready(function() {
    $("#name").keyup(function() {
            var userName = $('#name').val();
            $('#result').html("Hello My name is " + userName);
    });
});

另一种可能的解决方案是将表单发布回当前页面（如果您能够使用 php 和 forms），并从全局 $_POST 变量中检索它们。

// index.php
<?php $name = $_POST['name']; ?>
// This is your predetermined paragraph, with the name dynamically inserted
<p>Hello, my name is <?php echo $name; ?></p>
<form action="index.php" method="post">
  <input id="name" name="name">
  <input type="submit" value="submit">
</form>

这样，向paragrah添加尽可能多的变量要容易得多。

如果你只能使用Javacsript/Jquery，也许可以创建带有id标签的span来保存你的信息。例如;

<p>Hello, my name is <span id='name'></span></p>
<p>My surname is <span id='surname'></span></p>
// jquery
var $name = $('.name').val(); // your name input box;
var $surname = $('.surname').val(); //your surname input box
$('#name').val($name);
$('#surname').val($surname);
相关文章：