js进度条,html表单错误并弹出

时间:2017-01-31 08:50:49

标签: javascript jquery html css forms

我只是想制作一个表单并且用户填写然后单击提交它应该运行一个进度条(将运行到50%)并弹出错误,将引用用户“联系我们”页面.... ..进度条应该弹出并运行它应该不会出现在页面上,除非用户在填写表格后点击提交.....这里是我的代码...进度条,css和html表单

function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= 50) {
      clearInterval(id);
      $('#error').css("display", "block");
      $('#popupContact').css("display", "block");
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1 + '%';
    }
  }
}
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}

#error {
  color: #F00;
  display: none;
}

#popupContact {
  display: none;
}
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">
    <div id="label">0%</div>
  </div>
</div>

<br>
<button onclick="move()">Click Me</button>

<div id="error">
  Could not connect; please transfer manually.
</div>

<!-- Popup div starts here -->
<div id="popupContact">
  <!-- contact us form -->
  <form action="#" method="post" id="form">
    <img src="images/3.png" id="close" onclick="div_hide()" />
    <h2>Transfer Details</h2>
    <hr/>
    <fieldset>
      <legend>Reciever's information:</legend>
      Account Number:
      <br>
      <input type="text" name="Account number" onkeyup="checkInput(this)" value="" id="name" placeholder="Account Number">
      <br> Account Name:
      <br>
      <input type="text" name="Account Name" value="" id="name" placeholder="Account Name">
      <br>
      <br> Routing (ABA):
      <br>
      <input type="text" name="Routing (ABA)" onkeyup="checkInput(this)" id="name" value="" placeholder="Routing (ABA)">
      <br>
      <br> Bank Name:
      <br>
      <input type="text" name="Bank Name" id="name" value="" placeholder="Bank Name">
      <br>
      <br> Account Type:
      <br>
      <select name="Account Type" placeholder="Account Type">
        <option>Fix Deposit</option>
        <option>Checking</option>
        <option>Savings</option>
        <option>Current</option>
      </select>
    </fieldset>
    <a id="submit" href="javascript: check_empty()" onclick="move()">Send</a>
    <p><span>Note :</span> All Form Is Required.</p>
  </form>
</div>

0 个答案:

没有答案