將輸入的表單輸入文本插入段落

Question

如何將一個人的表單輸入文本插入到預先製作的段落中。

例如： 輸入你的名字：John

變爲 <p>Hello, my name is John</p>

最好是在同一個或另一個HTML頁面。就像所有這些各種網絡生成器一樣。

的語言我必須是HTML，jQuery的，JavaScript和JSON

Answer 1

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

Answer 2

jQuery中訪問：

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

很難給你更具體的建議沒有更多的代碼的發佈，但只要你的段落有一個id，你的文本存儲在一個變量中，上面的內容應該可以工作。

Answer 3

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

Answer 4

另一種可能的解決方案，這是張貼的形式返回到當前頁面，並從全局$ _ 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);