Java 将值从textbox获取到同一jsp中的另一个textbox_Java_Javascript_Jsp

Java 将值从textbox获取到同一jsp中的另一个textbox

java javascript jsp

Java 将值从textbox获取到同一jsp中的另一个textbox,java,javascript,jsp,Java,Javascript,Jsp,我插入到一个文本框中的值是否可能在不单击submit按钮的情况下插入到同一jsp中的另一个文本框中例如，我有textbox1，我键入123，在textbox3上也会键入123。这就像获取textbox1的值一样，textbox3将复制textbox1的值 JSP文件： <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <%@ taglib u

我插入到一个文本框中的值是否可能在不单击submit按钮的情况下插入到同一jsp中的另一个文本框中

例如，我有textbox1，我键入123，在textbox3上也会键入123。这就像获取textbox1的值一样，textbox3将复制textbox1的值

JSP文件：

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>Profile</title>

  <link rel="stylesheet" href="/assets/reset/reset.css">


</head>

<body>


<form method="POST" action='Controller' name="add" id="msform" onsubmit="return confirm('Are you sure to update the data?')">

        <fieldset>
        <div class="field--wrapper">
        <label for ="firstname">Firstname</label>
        <input type="text" name="texbox1" value="<c:out value="${person.firstname}" />" />
        </div>


        <div class="field--wrapper">
        <p>Gender</p>
        </div>

        <div class="field--wrapper">
        <select name="select1">
        <option value="">Gender</option>
        <option value="Male" <c:if test = "${person.gender == 'Male'}">selected</c:if>>Male</option>
        <option value="Female" <c:if test = "${[person.gender == 'Female'}">selected</c:if>>Female</option>
        </select>
        </div>



        <div class="field--wrapper">
        <label for ="address">Address</label>
        <input type="text" name="textbox2" value="<c:out value="${person.address}" />" />
        </div>  


        <!-- The Value above will be reflected to the value below -->

        <fieldset>
        <div class="field--wrapper">
        <label for ="firstname">Firstname</label>
        <input type="text" name="texbox3" />
        </div>


        <div class="field--wrapper">
        <p>Gender</p>
        </div>

        <div class="field--wrapper">
        <select name="select2">
        <option value="">Gender</option>
        <option value="Male" >Male</option>
        <option value="Female">Female</option>
        </select>
        </div>



        <div class="field--wrapper">
        <label for ="address">Address</label>
        <input type="text" name="texbox4"/>
        </div>  

        <input type="submit" name="submit"  value="Submit" onclick="submit" onclick="return validateForm()"/>
    </fieldset>
</form>
</body>
</html>


轮廓
名字
性别
性别
男性
女性
地址
名字
性别
性别
男性
女性
地址

不可能使用

jsp

对象，而可以使用

jquery

$("#text_1").keyup(function() {
    $("#text_3").val($("#text_1").val());
})

在这里工作。

没有任何额外的页面重新加载，您只能使用Javascript实现。这里有一个可能的方法：

在字段“textbox1”中添加属性

onKeyUp（）

：

根据OP的进一步问题，这里有一个完整的工作示例。

javascript：

 <script>
  function copyValue(formfield)
  {
   switch (formfield.name) {
    case "texbox1":
     document.add.texbox3.value = formfield.value;
     break;
    case "textbox2":
     document.add.texbox4.value = formfield.value;
     break;
    case "select1":
     for (optItemIndex = 0; optItemIndex < document.add.select2.length; optItemIndex++)
     {
      if (document.add.select2.options[optItemIndex].value == formfield.value) 
         {document.add.select2.options[optItemIndex].selected = true;}
     }
     break;
   }
  }
 </script>


函数copyValue（formfield）
{
开关（formfield.name）{
案例“texbox1”：
document.add.texbox3.value=formfield.value；
打破
案例“textbox2”：
document.add.texbox4.value=formfield.value；
打破
案例“select1”：
对于（optItemIndex=0；optItemIndex


HTML源代码：
    <form method="POST" action='Controller' name="add" id="msform"
 onsubmit="return confirm('Are you sure to update the data?')">
     <fieldset>
      <div class="field--wrapper">
       <label for ="firstname">Firstname</label>
       <input type="text" name="texbox1" value="" onKeyUp="copyValue(this)"/>
      </div>
      <div class="field--wrapper">
       <p>Gender</p>
      </div>
      <div class="field--wrapper">
       <select name="select1" onChange="copyValue(this)">
        <option value="">Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
       </select>
      </div>
      <div class="field--wrapper">
       <label for ="address">Address</label>
       <input type="text" name="textbox2" value="" onKeyUp="copyValue(this)"/>
      </div>  
      <!-- The Value above will be reflected to the value below -->
      <fieldset>
       <div class="field--wrapper">
        <label for ="firstname">Firstname</label>
        <input type="text" name="texbox3" />
       </div>
      <div class="field--wrapper">
       <p>Gender</p>
      </div>
      <div class="field--wrapper">
       <select name="select2">
        <option value="">Gender</option>
        <option value="Male" >Male</option>
        <option value="Female">Female</option>
       </select>
      </div>
      <div class="field--wrapper">
       <label for ="address">Address</label>
        <input type="text" name="texbox4"/>
      </div>  
      <input type="submit" name="submit"  value="Submit" onclick="return validateForm()"/>
     </fieldset>    
</form>


名字
性别
性别
男性
女性
地址
名字
性别
性别
男性
女性
地址

希望它能满足要求并回答一些问题。
您确定OP是允许或能够使用Jquery的吗？但是OP没有提到他希望只使用普通的vannila js。而是希望在他的jsp页面上完成。到目前为止，您尝试了什么？这是正确的吗？我试过用这个，但没用<代码>函数copyValue（formfield）{documents.add.textbox3.value=formfield.value；}

我的答案中有一个小错误。字母“s”在

文档中无效。A根据您的代码为您做了一个示例。我的答案已经更新。
 <script>
  function copyValue(formfield)
  {
   switch (formfield.name) {
    case "texbox1":
     document.add.texbox3.value = formfield.value;
     break;
    case "textbox2":
     document.add.texbox4.value = formfield.value;
     break;
    case "select1":
     for (optItemIndex = 0; optItemIndex < document.add.select2.length; optItemIndex++)
     {
      if (document.add.select2.options[optItemIndex].value == formfield.value) 
         {document.add.select2.options[optItemIndex].selected = true;}
     }
     break;
   }
  }
 </script>

    <form method="POST" action='Controller' name="add" id="msform"
 onsubmit="return confirm('Are you sure to update the data?')">
     <fieldset>
      <div class="field--wrapper">
       <label for ="firstname">Firstname</label>
       <input type="text" name="texbox1" value="" onKeyUp="copyValue(this)"/>
      </div>
      <div class="field--wrapper">
       <p>Gender</p>
      </div>
      <div class="field--wrapper">
       <select name="select1" onChange="copyValue(this)">
        <option value="">Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
       </select>
      </div>
      <div class="field--wrapper">
       <label for ="address">Address</label>
       <input type="text" name="textbox2" value="" onKeyUp="copyValue(this)"/>
      </div>  
      <!-- The Value above will be reflected to the value below -->
      <fieldset>
       <div class="field--wrapper">
        <label for ="firstname">Firstname</label>
        <input type="text" name="texbox3" />
       </div>
      <div class="field--wrapper">
       <p>Gender</p>
      </div>
      <div class="field--wrapper">
       <select name="select2">
        <option value="">Gender</option>
        <option value="Male" >Male</option>
        <option value="Female">Female</option>
       </select>
      </div>
      <div class="field--wrapper">
       <label for ="address">Address</label>
        <input type="text" name="texbox4"/>
      </div>  
      <input type="submit" name="submit"  value="Submit" onclick="return validateForm()"/>
     </fieldset>    
</form>