CODEWITHSUNDEEP
javascriptphp
any guy
any guy

Reputation: 1

Simultaenously copy text from user input to text area

Hi I'm trying to have a system whereby a user can type their name, address, postcode etc. and the system generates a prewritten letter. All my code is currently in a PHP file. 

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

However, this Javascript solution doesn't seem to be working. I'd like the text to appear under the Kind Regards, line without the submit button being clicked, i.e. live, so whilst the user types his name/address/city these values will appear in the specified order in real time.

Thanks for your help.

Update 2: Hi, the solution below seems to only yield:

Form can be seen in action at hhassan.me/codetest to seem what I mean, using ST5 3JL as a demo postcode.

Image below as an aid (can't embed as I'm a new user):

[https://i.sstatic.net/6N48v.png

Upvotes: 0

Views: 53

Answers (1)

MaggsWeb
MaggsWeb

Reputation: 3017

Move your JS to the end of the page, so that you are not referencing elements that the DOM has not loaded. Use the syntax below to put your JS code, and place it at the end of your page..

<?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>

Upvotes: 2

Related Questions