how to compare element of a form using name in query?-CodePudding

I have to do some operations if I select the specific input in the form f1...
So I need to compare and check which input is clicked and use ajax to display the typed text into the second form with the help of name in jquery. But I don't know how .
Please help me how to select an element inside a form using its respective name...
I have attached the code for further clarification.

<!DOCTYPE html>
<head>
<title>Ajax Revision</title>
<link rel="stylesheet" href="CSS1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="JS1.js">
</script>
</head>
<body>
    <h1>
        Enter Your details :
    </h1>
    <form name="f1" action="Servlet2" on>
            <p>
                <label>First name : </label>
                <input type="text" name="fname2">
            </p>
            <p>
                <label>Last name : </label>
                <input type="password" name="lname2">
            </p>
            <p>
                <label>Date of birth : </label>
                <input type="date" name="dob2">
            </p>
            <p>
                <label>Blood group : </label>
                <input type="text" name="blood2">
            </p>
            <p>
                <label>Email : </label>
                <input type="text" name="email2">
            </p>
            <p>
                <label>City : </label>
                <input type="text" name="city2">
            </p>
            <p>
                <label>State : </label>
                <input type="text" name="state2">
            </p>
            <p>
                <label></label>
                <input style="width: 100px" type="submit" value="signup">
            </p>
        </form>
    <h1>Entered details : </h1>
    <form name="f2">
        <p>
            <label>First name : </label>
            <input type="text" name="fname1" readonly>
        </p>
        <p>
            <label>Last name : </label>
            <input type="password" name="lname1" readonly>
        </p>
        <p>
            <label>Date of birth : </label>
            <input type="text" name="dob1" readonly>
        </p>
        <p>
            <label>Blood group : </label>
            <input type="text" name="blood1" readonly>
        </p>
        <p>
            <label>Email : </label>
            <input type="text" name="email1" readonly>
        </p>
        <p>
            <label>City : </label>
            <input type="text" name="city1" readonly>
        </p>
        <p>
            <label>State : </label>
            <input type="text" name="state1" readonly>
        </p>
    </form>
</body>

CodePudding user response：

Try this script, I think that is what you are asking. Using the keyup event I identify in which element you are writing from form one and I copy it to form element two replacing the last character of the attribute name of theinput(for example fname2 by fname1) to get form element two.

<script>
$(document).on('keyup',function(e) {                
       var inputF2 = e.target.name;
       inputF2=inputF2.replace(/2$/,"1")
       $('input[name="' inputF2 '"]')[0].value =  $('input[name="' e.target.name '"]')[0].value;
});
</script>

<!DOCTYPE html>
<head>
<title>Ajax Revision</title>
<link rel="stylesheet" href="CSS1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).on('keyup',function(e) {                
       var inputF2 = e.target.name;
       inputF2=inputF2.replace(/2$/,"1")
       $('input[name="' inputF2 '"]')[0].value =  $('input[name="' e.target.name '"]')[0].value;
});
</script>
<script type="text/javascript" src="JS1.js">
</script>
</head>
<body>
    <h1>
        Enter Your details :
    </h1>
    <form name="f1" action="Servlet2" on>
            <p>
                <label>First name : </label>
                <input type="text" name="fname2">
            </p>
            <p>
                <label>Last name : </label>
                <input type="password" name="lname2">
            </p>
            <p>
                <label>Date of birth : </label>
                <input type="date" name="dob2">
            </p>
            <p>
                <label>Blood group : </label>
                <input type="text" name="blood2">
            </p>
            <p>
                <label>Email : </label>
                <input type="text" name="email2">
            </p>
            <p>
                <label>City : </label>
                <input type="text" name="city2">
            </p>
            <p>
                <label>State : </label>
                <input type="text" name="state2">
            </p>
            <p>
                <label></label>
                <input style="width: 100px" type="submit" value="signup">
            </p>
        </form>
    <h1>Entered details : </h1>
    <form name="f2">
        <p>
            <label>First name : </label>
            <input type="text" name="fname1" readonly>
        </p>
        <p>
            <label>Last name : </label>
            <input type="password" name="lname1" readonly>
        </p>
        <p>
            <label>Date of birth : </label>
            <input type="text" name="dob1" readonly>
        </p>
        <p>
            <label>Blood group : </label>
            <input type="text" name="blood1" readonly>
        </p>
        <p>
            <label>Email : </label>
            <input type="text" name="email1" readonly>
        </p>
        <p>
            <label>City : </label>
            <input type="text" name="city1" readonly>
        </p>
        <p>
            <label>State : </label>
            <input type="text" name="state1" readonly>
        </p>
    </form>
</body>