Tue. Oct 3rd, 2023

[ANSWERED] jquery – How can to user the username part of email entered by user in the input field to replace the text in the textarea?

By

Nov 19, 2022 html, jquery

Solution 1 :

Use this below code to archive your needs

<!DOCTYPE html>
<html>
<head>
    <title>Text change</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var lastStr = "[initial text]";
        $(function(){
            $("#generate").click(function(){
                var txtEmail = $("#txtEmail").val();
                var txtMessage = $("#txtMessage").val();
                var userName = txtEmail.split("@")[0];
                var domainName = txtMessage.split("@")[1];
                $("#txtMessage").val(userName+"@"+domainName);
            });
        });
    </script>
</head>
<body>
<div>
    <label>Email</label>
    <input name="txtEmail" id="txtEmail" type="text" value="" >
    <label>Message</label>       
    <textarea rows="2" name="txtMessage" id="txtMessage">[initial text]@domain.com</textarea>   
</div>
<button type="button" id="generate" >Generate new Code</button>

</body>
</html>

Solution 2 :

Try this:-

$(function(){
    $("#generate").on('click', function() {
    	var prefix = (($("#test1").val()).split("@"))[0];
    	var domain = (($("textarea").val()).split("@"))[1];
        // $("#test1").val(prefix);
    	$("textarea").val(prefix+'@'+domain);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div>
    <label>Email</label>
    <input name="test_1" id="test1" type="text" value="" >
    <label>Message</label>       
    <textarea rows="2" name="textarea_2" id="word">[initial text]@domain.com</textarea>   
</div>
<button type="button" id="generate" >Generate new Code</button>

Problem :

I have an html code that I have been trying to use only the username part to replace the string in the textarea.Here is my html: E.g if the user enters [email protected] the textarea should become [email protected]

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

var lastStr = "[initial text]";
$(function(){
    $("#generate").click(function() {
        var val = $("textarea").val();

        $("textarea").val(val.replace(lastStr, $("#test1").val()));
        lastStr = $("#test1").val();
    });
});

</script>
</head>
<div>
    <label>Email</label>
    <input name="test_1" id="test1" type="text" value="" >

        <label>Message</label>       
        <textarea rows="2" name="textarea_2" id="word">[initial text]@domain.com</textarea>   
</div>
<button type="button" id="generate" >Generate new Code</button>

</form>

Comments

Comment posted by Andrew M

Could you also describe the problem? It may help people answer the question more quickly. What happens with the code you have here when you try to run it? Do you see anything in the console in developer tools in your browser etc

By

Related Post

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022