Question

嗨，我目前正忙着完成一项任务：我要在一个带有字段和texarea的页面上创建一个表单。

我必须在字段中添加信息并在textarea中添加变量：“我的名字是$ name，我住在@adress ....”

这些变量的值来自表单的字段。

当我按下按钮时，它应该按值更改$ name。所以我会得到“我的名字是约翰”。

这个想法是保持同一页面。

这个例子：

  <html>
  <form action="values.php" method="get">
   Name: <input id="name" type="text" name="name"><br>
   Adress<input id="name" type="text" name="adress"><br>
   Phone<input id="name" type="text" name="phone" ><br>
   Textarea<input id="textarea" type="text" name="textarea"> Hi my name is $name and    you can call me on this number : $phone<br>
   <input type="submit">
   </form>

/ 点击按钮后的结果 / 嗨，我的名字是约翰，你可以用这个号码给我打电话：77665555544 //结果我想要在不离开页面的情况下获得

我在values.php中的代码是：

<?php
$description= $_GET["textarea"];
$description = str_replace( '$name',$_GET["name"],$description); 
$description = str_replace( '$adress',$_GET["adress"],$description);
$description = str_replace( '$phone',$_GET["phone"],$description);
echo "<textarea>$description</textarea>";
?>

Answer 1

使用event.preventDefault();阻止提交表单（刷新页面），并使用值填充textarea。例如：

$('form').submit(function(event) {
    /* rest of the script */
    event.preventDefault();
});

Answer 2

如果我理解正确的话，这很容易完成。您可以在此处查看工作版本：http://jsfiddle.net/ah9qp/

用户点击提交后，您需要停止实际提交表单。这可以通过使用以下方法来完成：e.preventDefault（）;

在此之后，您需要从输入框中获取要输出的所有值。您可以使用jquery .val（）;这将获得输入的值。为了得到这个，你必须有一个与每个输入元素相关联的特定ID。下面是您修改的表单，用于听取Jquery并与之交互：

<form action="" method="get" id="formit">
   Name: <input id="name" type="text" name="name" value="John"><br>
   Adress<input id="address" type="text" name="adress"><br>
   Phone<input id="phone" type="text" name="phone" value="77665555544"><br>
   Textarea<textarea id="textarea" rows="5">Hello my name is $name and you can call me at this: $phone</textarea><br>
   <input type="submit" id="textit">
   </form>

正确设置表单后，您只需添加jquery文件：

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

最后你需要使用jquery来创建代码，以实现你所需要的：

$("#textit").click(function(e){
   //prevents the form from submitting
    e.preventDefault();
    //get variables from input
    var name = $("#name").val();
    var phone = $("#phone").val();
    //set var to textarea for output
    var textarea = $("#textarea");

    textarea.val("Hi my name is "+name+" and you can call me on this number: "+phone);
});

您将看到表单中的id被jquery调用并输出。希望这可以帮助！如果您有任何问题，请告诉我。

获取表单的值并替换textarea中的变量

2 个答案: