0

So I have this code for this class project that I am doing I have my random number generator attach to the current flow submit button and the results of the random number generator are supposed to go in the water main information placeholder. The numbers do pop up for a split second but then they disappear. What am I doing wrong?

function refreshPage() {
  document.getElementById("ref").value = Math.floor(Math.random() * 70000) + 10000;
}
body {
  background: #87CEEB;
  color: #fff;
}

.header {
  font-size: 20px;
  text-align: center;
}
<form name="" class="">
  <fieldset>
    <div style="text-align:center; padding:.5em; margin-bottom:2em;">
      <span style="border:1px solid #ccc;text-align:center; font-size:2em;background:#0099FF;padding:.5em; clear:both;">
     National Water Company</span><br/>
      </br><span style="border:1px solid #ccc;text-align:center; font-size:20px;background:#0099FF; padding:.5em; clear:both;">
     System Damage Tracking, Water Loss Reporting. Leakage and Pipes Damage Reporting</span>
    </div>

    <div style="text-align:left; padding:.5em; margin-bottom:2em; width:40%; float:left;">
      <span style="width:1em; font-size:1.5em;">Water Main Information</span>
      <input id="ref" type="text" name="" style=" font-size:1.5em; width:160px;" /><br/>
      <input type="submit" name="" style="font-size:1.5em;background:#0099FF" Value="current flow" onClick="refreshPage()" />
    </div>
    <div style="text-align:left; padding:.5em; margin-bottom:2em;">
      <span style="width:10px; font-size:1.5em;">Customer Consumption </span>
      <input type="text" name="" placeholder="Name" style=" font-size:1.5em; width:160px;" />
      <input type="text" name="" placeholder="Address" style=" font-size:1.5em; width:160px;" />
      <input type="text" name="" placeholder="Location" style=" font-size:1.5em; width:160px;" /><br/>
      <input type="submit" name="" placeholder="" style="font-size:1.5em;background:#0099FF" Value="History" />
    </div>
    <div style="text-align:left; padding:.5em; margin-bottom:2em; width:50%; float:left;">
      <span style="width:1em; font-size:1.5em;">Request Incident</span>
      <input type="text" name="" placeholder="Name" style=" font-size:1.5em; width:150px;" />
      <input type="text" name="" placeholder="Phone" style=" font-size:1.5em; width:150px;" />
      <input type="text" name="" placeholder="Location" style=" font-size:1.5em; width:150px;" /><br/>
      <input type="submit" name="" placeholder="" style="font-size:1.5em;background:#0099FF" Value="History" />
    </div>
    <div style="text-align:left; padding:.5em; margin-bottom:2em;">
      <span style="width:1em; font-size:1.5em;">Differencing Data</span>
      <input type="text" name="" placeholder="00,000 l" style=" font-size:1.5em; width:160px;" /><br/>
      <input type="submit" name="" style="font-size:1.5em;background:#0099FF" Value="History" />
    </div>
  </fieldset>
</form>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
cmontiel
  • 1
  • what do you mean pop up for a split second? probably because the JS ran and then you actually submit the page, thats why its showing a little bit then disappears. if you want to prevent this from happening, just add `return false` on the function – Kevin Jun 04 '18 at 06:15
  • there is no php here –  Jun 04 '18 at 06:16
  • or probably use a ` – Kevin Jun 04 '18 at 06:19
  • @Ghost i am sorry but where would i but the return false this is my first class in coding and thank you for your help – cmontiel Jun 04 '18 at 06:21
  • Change ` – mplungjan Jun 04 '18 at 06:26
  • @Ghost - if you return false you need to change to `onClick="return refreshPage()"` - easier to just make it a button – mplungjan Jun 04 '18 at 06:27
  • 1
    thank you guys for your help doing what mplungjan said made it work thanks again – cmontiel Jun 04 '18 at 06:29
  • just follow @mplungjan 's comment, it should answer everything, its doing an actual form submission, thats why its reloading again – Kevin Jun 04 '18 at 06:29

0 Answers0