Question

我插入一个文本框的值是否可能会插入同一个jsp中的另一个文本框而不点击提交按钮？

示例我有textbox1和I类型123，在textbox3 123上也将被输入。就像获取textbox1的值一样，textbox3将复制textbox1的值。

JSP FILE：

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

Answer 1

无法使用jsp个对象，而是可以使用jquery，

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

在这里工作fiddle。

Answer 2

没有任何额外的页面重新加载，你只能使用Javascript来实现它。这有可能的方法：

将字段onKeyUp()：

添加到字段“textbox1”

<input type="text" name="texbox1" 
  value="<c:out value="${person.firstname}" />"
  onKeyup="copyValue(this)" />

编写Javascript函数：

function copyValue(formfield) {
  document.add.textbox3.value = formfield.value;
}

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

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>

希望它符合要求并回答一些问题。

将值从文本框获取到同一个jsp中的另一个文本框

2 个答案: