CODEWITHSUNDEEP
javascripthtml
zxc
zxc

Reputation: 1526

Javascript body onload once

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.

Upvotes: 3

Views: 2978

Answers (1)

zombiehugs
zombiehugs

Reputation: 717

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>

Upvotes: 4

Related Questions