将输入的表单输入文本插入段落

-2

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

例如：输入你的名字：John

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

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

的语言我必须是HTML，jQuery的，JavaScript和JSON

来源

2016-02-05 ConduciveMammal

http://api.jquery.com/val＆http://api.jquery.com/text –

你可以分享yo've试过这么远？请编辑您的问题以包含[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。 – twernt

如在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>

来源

2016-02-05 11:26:24 Rayon

这很完美，谢谢。现在，在宏伟计划中，我希望有几个这样的盒子，也许有六个，然后在整个大型HTML文档中生成结果。我会对每个文本字段都遵循这个吗？ – ConduciveMammal

好的，所以我使用了这个，就像上面的代码片段一样，它当然工作。但后来我注意到，所有原始的“Hello my name ...”文本都在jQuery代码中，这对于几行代码来说非常有用，但是这个字段会多次进入大文档，适合包装这个代码围绕整个文档？谢谢。 – ConduciveMammal

对不起，说实话，我没有任何代码，这是开始哈！也许表单行为可能更容易。但无论如何非常感谢。 – ConduciveMammal

jQuery中访问：

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

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

来源

2016-02-05 11:25:56 millerbr

这里是小提琴：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); 
    }); 
});

来源

2016-02-05 11:38:03

另一种可能的解决方案，这是张贴的形式返回到当前页面，并从全局$ _ POST变量检索它们（如果你可以使用PHP和形式）。

// 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标签创建跨度来保存您的信息。例如;

<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);

来源

2016-02-05 11:39:39 Lewis

将输入的表单输入文本插入段落

回答

相关问题