当前位置: 代码迷 >> JavaScript >> 将文本从用户输入同时复制到文本区域
  详细解决方案

将文本从用户输入同时复制到文本区域

热度:61   发布时间:2023-06-13 12:38:29.0

嗨,我正在尝试建立一个系统,用户可以在其中输入他们的姓名,地址,邮政编码等,然后系统会生成一个预写字母。 我所有的代码当前都在一个PHP文件中。

<h2>Send your MP our pre-written letter</h2>
<p>Please fill out the information required below:</p>
<div align="left">
<form action="form.php" method="post" enctype="multipart/form-data"
    <p>Name <font color="red">(required) </font> <input name="flname" required placeholder="Your Name"> </p>
    <p>Email <font color="red">(required) </font> <input name="emailfrom" type="email" required placeholder="Your Email">  </p>
    <p>Address <font color="red">(required) </font> <input name="address" required placeholder="Address"> </p>
        <p>City <font color="red">(required) </font> <input name="city" required placeholder="City"> </p>
        What is 2+2? <font color="red">(required) </font> <input name="human"required placeholder="Type Here">
        <p> <b> You can edit the text below as much or as little as you wish </b> </p>

<script>

 $("input[name=name]").on('keyup', function () {
        $('#name1').html($(this).val());
    });

    $("input[name=address]").on('keyup', function () {
        $('#add1').html($(this).val());
    });
    $("select[name=city]").on('change', function () {
        $('#city1').html($(this).find('option:selected').text());
    });

</script>

<textarea name="text" required placeholder="Your Message" style="margin: 5px; width: 391px; height: 230px;">
Dear <?php echo "$mptitle $mpsecondname"?>,

Please support us

Kind Regards,
<?php 
echo "<p id="name1"></p>"
echo "<p id="add1"></p>" , echo "<p id="city1"></p>"
echo "$senderpostcode"?>
?>

</textarea>

</div>
</div>
</form>

但是,此Javascript解决方案似乎无效。 我希望文本显示在“亲切问候”行下,而无需单击“提交”按钮(即实时),因此,当用户键入其姓名/地址/城市时,这些值将以指定的顺序实时显示。

谢谢你的帮助。

更新2:嗨,下面的解决方案似乎只产生:

使用ST5 3JL作为演示邮政编码,可以在hhassan.me/codetest上看到实际的形式,这似乎是我的意思。

下图为辅助工具(由于我是新用户,所以无法嵌入):

[

将您的JS移动到页面的末尾,这样就不会引用DOM尚未加载的元素。 使用下面的语法放入您的JS代码,并将其放在页面的末尾。

<?php 
echo "<p id='name1'></p>";
echo "<p id='add1'></p>";
echo "<p id='city1'></p>";
echo "$senderpostcode";
?>

    <script>
    $(document).ready(function () {

        // put JS code here    

    });
    </script> 

    </body>      
</html>
  相关解决方案