如何在查詢中使用名稱比較表單元素？-有解無憂

如果我選擇表單 f1 中的特定輸入，我必須做一些操作......
所以我需要比較并檢查點擊了哪個輸入，并使用 ajax在 jquery 中的 name 的幫助下將鍵入的文本顯示到第二個表單中。但我不知道如何。
請幫助我如何使用其各自的名稱在表單中選擇一個元素......
我附上了代碼以供進一步說明。

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

uj5u.com熱心網友回復：

試試這個script，我想這就是你要問的。使用keyup我你是從形成一個寫哪個元素標識的事件，我把它復制到形成元素2替代屬性的最后一個字符name的的input（例如fname2通過fname1）來獲取表單元素兩項。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315376.html

標籤：html 查询阿贾克斯

上一篇：如何在javascript/jquery中限制開始日期之前的結束日期選擇

下一篇：在資料檔案屬性中顯示復選框值