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

Question

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>

Does this answer your question? [How can I select an element by name with jQuery?](https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery) — Simone Rossaini, Oct 14 '21 at 07:17
No it didn't help since I have to do a sort of nested select.In that it was given only the single attibute select. — B.R.MADHIVADHANAN, Oct 14 '21 at 07:19
From the linked answer, you can locate an element using multiple attributes, eg: `$('[name="f2"] [name="dob2"]')` where [space] is the any-descendant selector. — freedomn-m, Oct 14 '21 at 07:28
@freedomn-m I'll explain you clearly.What I have to do is , when the user changes the content in input , I have to check which input field was changed. So here my doubt is how to check which field was clicked... Thats it.... — B.R.MADHIVADHANAN, Oct 14 '21 at 07:29
@freedomn-m I tried this code but didn't work...
'$(document).ready( function(){ $('form[name="f1"][name="fname2"]').click( function(){ alert("fname from f1 form is clicked..."); } ); } );' — B.R.MADHIVADHANAN, Oct 14 '21 at 07:38
Here's some code that does: when you click, copy the value to the second form. You have to enter something first, then click, otherwise nothing gets copied (obviously). I didn't notice earlier that your `name=` don't match exactly between the two forms (f1>input2 and f2>input1, which is a little odd). https://jsfiddle.net/aftzbsgn/ — freedomn-m, Oct 14 '21 at 07:47

BlackHole · Accepted Answer · 2021-10-14T09:52:02.997

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>

Thanks it worked perfectly fine. This is what I needed the most... — B.R.MADHIVADHANAN, Oct 15 '21 at 01:42

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

1 Answers1