How to prevent result and input data from vanishing while using form submit in Javascript

Question

I have been trying to prevent the result in the p tag and the input from date from vanishing after showing the output for a second after I submit the form because later a secondary program is unable to read the data from the p tag.

Please help!!

function Adate(){
    var edate= document.getElementById("dob").value;
    var res = document.getElementById("result");
    var tday = new Date();
    var bdate = new Date(edate);
    var agedate= tday.getFullYear() - bdate.getFullYear();
    if(agedate>=0)
    {
        res.textContent ="You are "+agedate ;
    }
    else
    {
        res.textContent ="You are from the future!!";}
}

<body>
    <form onsubmit="return Adate()">
        Enter your DOB: 
        <input type="date" id = "dob" >
        <input type="submit" value ="submit">
    </form>
    <p id="result"> 
    </p>
</body>

We can call Adate function when submit button is clicked and remove onsubmit from form but doing this html body is changed. :( — prabin badyakar, Feb 06 '19 at 15:43
@prabin badyakar can't do that but thanks for the advice anyway :) — , Feb 06 '19 at 15:46

score 1 · Accepted Answer · answered Feb 06 '19 at 16:00

Just add return false; to the end of the function Adate(), and this should do the trick:

function Adate(){
    var edate= document.getElementById("dob").value;
    var res = document.getElementById("result");
    var tday = new Date();
    var bdate = new Date(edate);
    var agedate= tday.getFullYear() - bdate.getFullYear();
    if(agedate>=0)
    {
        res.textContent ="You are "+agedate ;
    }
    else
    {
        res.textContent ="You are from the future!!";}
    return false;
}

<body>
    <form onsubmit="return Adate()">
        Enter your DOB: 
        <input type="date" id = "dob" >
        <input type="submit" value ="submit">
    </form>
    <p id="result"> 
    </p>
</body>

Here, return false; basically means that the page will not try submitting the form to some backend, hence it will not refresh the page.

eustatos · Answer 2 · 2019-02-06T17:25:37.150

0

My variant

var edate = document.getElementById("dob").value;
var res = document.getElementById("result");
var form = document.querySelector('form');

function Adate() {
  var tday = new Date();
  var bdate = new Date(edate);
  var agedate = tday.getFullYear() - bdate.getFullYear();
  if (agedate >= 0) {
    res.textContent = "You are " + agedate;
  } else {
    res.textContent = "You are from the future!!";
  }
  setTimeout(function() {
      form.submit();
    },
    4000
  );
  return false;
}

<form onsubmit="return Adate()">
  Enter your DOB:
  <input type="date" id="dob">
  <input type="submit" value="submit">
</form>
<p id="result">
</p>

edited Feb 06 '19 at 17:25

answered Feb 06 '19 at 15:48

eustatos

686
1
10
21

You've changed the HTML; from the OP (in bold there also): "**It is important that anything within the body tag should not be changed**". – Heretic Monkey Feb 06 '19 at 15:50
I changed my js code. And not changed HTML (by code in question) – eustatos Feb 06 '19 at 17:26
You realize we can see the edit history, right? At the time I wrote that comment, you had changed the HTML. – Heretic Monkey Feb 06 '19 at 17:27
You're talking about ? – eustatos Feb 06 '19 at 17:30
You had removed the `onsubmit` attribute of the `form` element in the initial answer, and change the submit button to a `button` element. – Heretic Monkey Feb 06 '19 at 17:32
Now HTML code as in the question. I said that. – eustatos Feb 06 '19 at 17:34

How to prevent result and input data from vanishing while using form submit in Javascript

2 Answers2