Javascript body onload once

Question

Im just new at using Javascript and I'm having trouble on pageload event. After submitting form1, form 2 should appear.

<html>
<head>
<script src="jquery1.9.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="sCss.css">
</head>
<script type="text/javascript">
function hide( obj1 ) {     
    obj1 = document.getElementById( obj 1); 
    if ( document.cookie.indexOf('mycookie') == -1 ) {
       document.cookie = 'mycookie = 1';
       obj1.style.display = 'none';
    } else {
       obj1.style.display = 'block';
    }
}

function show( obj2 ) {
    var cookie = "test"
    obj2 = document.getElementById( obj2 );
    obj2.style.display = 'block';
    document.cookie = 'mycookie = 1';
}

</script>
<body onload="hide('form2')">
   <form id="form1" onsubmit="show('form2')">
      <table id="table1" border="1" >
        <tr>
          <td>
            <input type="text" name="txt1" id="txt1" />
          </td>
          <td>
            <input type="submit" name="submit1" id="submit1" />
          </td>
        </tr>
      </table>
   </form>
   <form id="form2">
      <table id="table2" border="1" >
        <tr>
          <td>
             <input type="text" name="txt2" id="txt2" />
          </td>
          <td>
             <input type="submit" name="submit2" id="submit2" />
          </td>
        </tr>
      </table>
   </form>
 </body>
</html>

Base on the code given. After clicking the submit button of form1, form2 appears and disappears right away.

Are you truly wanting to submit a form? Or are you trying to show the next section of information to be completed? — zombiehugs, Oct 08 '13 at 03:12
@johnGerdsen tnx for asking.. in my case they need to submit the form then another form would popup, btw the code i posted is just a prototype because i cant handle the onload event properly :( — zxc, Oct 08 '13 at 03:16
'Submit' means something special with forms. Do you just want to hide form1 and show form2? — sync, Oct 08 '13 at 03:32
Instead of submitting, you'd be better off storing all the values, moving onto the next form and adding more values to the scope. THEN submit those values all together only once at the end. BTW, your form is actually hiding, but since form submit results in a page refresh, then your onload method is kicking in and hiding form2 again. — francisco.preller, Oct 08 '13 at 03:41
While I agree that this isn't the best way of doing it, if you are interesting in having it work I have posted final code and a simple step-thru for you. — zombiehugs, Oct 08 '13 at 03:48

score 4 · Accepted Answer · edited May 23 '17 at 11:51

I think you should abort the onload method of trying to do this. If you want to post to the same page maybe you should set your form to post with a query string ?submitted=true Then you could read this with JavaScript to determine if you should show your next form.

Have a look

<form id="form1" action="index.html?submitted=true" method="post" onsubmit="show('form2')">
<table id="table1" border="1" >
<tr>
<td>
<input type="text" name="txt1" id="txt1">
</td>
<td>
<input type="submit" name="submit1" id="submit1">
</td>
</tr>
</table>
</form>

See I've changed the action to reflect the current page (assuming it's index.html) and I've added a query string (?submitted=true) Once the form has been submitted you can use Javascript to parse this from the URL and show the second form.

You can create a Javascript function (taken from jquery get querystring from URL) to parse the query string for you.

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Now that you have this function you can make a call to the method onload or wherever you see fit and see if submitted has been set.

//Simple conditional to see if the query string 'submitted' is set to true
if(getUrlVars()["submitted"] == "true"){ 
   //Hide Form1, Show Form2 
};

While this is probably not the best method and some form of dynamic programming language would suit you better I always had fun learning and this will get you going.

Final Code:

<html>
<head>

</head>
<script type="text/javascript">
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
function hide(obj1)
{       
    obj1 =document.getElementById(obj1);    
    obj1.style.display='none';
}

function show(obj2)
{   
    obj2=document.getElementById(obj2);
    obj2.style.display='block';
}

function isItSubmitted(){
  if(getUrlVars()["submitted"] == "true"){ 
     hide('form1');
     show('form2');
  }
  else{
    hide('form2');
    console.log('notsubmitted');
 }
}
</script>
<body onload="isItSubmitted();">
<form id="form1" action="index.html?submitted=true" method="post" onsubmit="show('form2')">
<table id="table1" border="1" >
<tr>
<td>
<input type="text" name="txt1" id="txt1">
</td>
<td>
<input type="submit" name="submit1" id="submit1">
</td>
</tr>
</table>
</form>

<form id="form2">
<table id="table2" border="1" >
<tr>
<td>
<input type="text" name="txt2" id="txt2">
</td>
    <td>
    <input type="submit" name="submit2" id="submit2">
    </td>
</tr>
</table>
</form>
</body>
</html>

it workd! I change a couple but this gave me an Idea Thank you very much! — zxc, Oct 08 '13 at 03:55

Javascript body onload once

1 Answers1