Question

我正在尝试创建表单，其中我计算（总和）弹出窗口中的值，然后我需要将其转移到主窗体。它正确计算值但不转移该值。能否帮助我确定锣错在哪里？代码是：

<html>
<head>
<title>Popup contact form</title>
<link href="1.css" rel="stylesheet">
<script src="popup.js"></script>
<script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

    </script>
</head>
<!-- Body Starts Here -->
<body id="body" style="overflow:hidden;">
<div id="abc">
<!-- Popup Div Starts Here -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2>Contact Us</h2>
<hr>
Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br>
Total : <input type="text" name="total" id="total"/>
<br><br>
<button id="submit" onclick="div_hide()">Send</button>

</form>
</div>
<!-- Popup Div Ends Here -->
</div>
<!-- Display Popup Button -->
<h1>Fees</h1>
<label>Hostel Charges<label>
Total : <input type="text" name="total" id="total"/>
<br>
<button id="popup" onclick="div_show()">Hostel Fees Charges</button>

</body>
<!-- Body Ends Here -->
</html>

Popmenu的JavaScript代码是

function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}

css文件是

@import "http://fonts.googleapis.com/css?family=Raleway";
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/
#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family:'Raleway',sans-serif
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#fff
}
h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
margin-top:20px;
border:1px solid #ccc;
font-size:15px;
}
#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#FFBC00;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}

Answer 1

尝试将document.getElementById('hostelTotal').value = document.getElementById('total').value;添加到您的div_hide()功能中。这将从您的“弹出窗口”中获取值，并将其放入主页的总框中。请注意，没有两个元素应该具有相同的id，因此我将主页上的一个更改为hostelTotal

function div_show() {
    document.getElementById('abc').style.display = "block";
  }
  //Function to Hide Popup

function div_hide() {
  document.getElementById('abc').style.display = "none";
  document.getElementById('hostelTotal').value =   document.getElementById('total').value;

}

@import "http://fonts.googleapis.com/css?family=Raleway";

/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/

#abc {
  width: 100%;
  height: 100%;
  opacity: .95;
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  background-color: #313131;
  overflow: auto
}
img#close {
  position: absolute;
  right: -14px;
  top: -14px;
  cursor: pointer
}
div#popupContact {
  position: absolute;
  left: 50%;
  top: 17%;
  margin-left: -202px;
  font-family: 'Raleway', sans-serif
}
form {
  max-width: 300px;
  min-width: 250px;
  padding: 10px 50px;
  border: 2px solid gray;
  border-radius: 10px;
  font-family: raleway;
  background-color: #fff
}
h2 {
  background-color: #FEFFED;
  padding: 20px 35px;
  margin: -10px -50px;
  text-align: center;
  border-radius: 10px 10px 0 0
}
hr {
  margin: 10px -50px;
  border: 0;
  border-top: 1px solid #ccc
}
input[type=text] {
  margin-top: 20px;
  border: 1px solid #ccc;
  font-size: 15px;
}
#submit {
  text-decoration: none;
  width: 100%;
  text-align: center;
  display: block;
  background-color: #FFBC00;
  color: #fff;
  border: 1px solid #FFCB00;
  padding: 10px 0;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px
}

<html>

<head>
  <title>Popup contact form</title>
  <link href="1.css" rel="stylesheet">
  <script src="popup.js"></script>
  <script type="text/javascript">
    function findTotal() {
      var arr = document.getElementsByName('qty');
      var tot = 0;
      for (var i = 0; i < arr.length; i++) {
        if (parseInt(arr[i].value))
          tot += parseInt(arr[i].value);
      }
      document.getElementById('total').value = tot;
    }
  </script>
</head>
<!-- Body Starts Here -->

<body id="body" style="overflow:hidden;">
  <div id="abc">
    <!-- Popup Div Starts Here -->
    <div id="popupContact">
      <!-- Contact Us Form -->
      <form action="#" id="form" method="post" name="form">
        <img id="close" src="images/3.png" onclick="div_hide()">
        <h2>Contact Us</h2>
        <hr>Qty1 :
        <input onblur="findTotal()" type="text" name="qty" id="qty2" />
        <br>Qty2 :
        <input onblur="findTotal()" type="text" name="qty" id="qty2" />
        <br>Qty3 :
        <input onblur="findTotal()" type="text" name="qty" id="qty3" />
        <br>Qty4 :
        <input onblur="findTotal()" type="text" name="qty" id="qty4" />
        <br>Qty5 :
        <input onblur="findTotal()" type="text" name="qty" id="qty5" />
        <br>Qty6 :
        <input onblur="findTotal()" type="text" name="qty" id="qty6" />
        <br>Qty7 :
        <input onblur="findTotal()" type="text" name="qty" id="qty7" />
        <br>Qty8 :
        <input onblur="findTotal()" type="text" name="qty" id="qty8" />
        <br>
        <br>Total :
        <input type="text" name="total" id="total" />
        <br>
        <br>
        <button id="submit" onclick="div_hide()">Send</button>

      </form>
    </div>
    <!-- Popup Div Ends Here -->
  </div>
  <!-- Display Popup Button -->
  <h1>Fees</h1>
  <label>Hostel Charges
    <label>
      Total :
      <input type="text" name="total" id="hostelTotal" />
      <br>
      <button id="popup" onclick="div_show()">Hostel Fees Charges</button>

</body>
<!-- Body Ends Here -->

</html>

将计算值从弹出菜单传输到主窗体

1 个答案: