10 Replies - 779 Views - Last Post: 22 August 2013 - 10:09 AM

#1 sabasi  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 15
  • Joined: 04-August 13

javascript form field show after each form is filled

Posted 21 August 2013 - 01:36 AM

<html>
<head><title></title>
</head>

<body>

<form method="post" action="redirect.php">
        <div id="1">
         <input type="text" name="1"  /><br/>
        </div>
        <div id="2">
	<input type="text" name="2" /><br />
        </div>
        <div id="3">
	<input type="text" name="3"  /><br /> 
        </div>
        <div id="4">
	<input type="text" name="4" /><br />
        </div>
	<input type="submit" value="submit"  />  
       
</form>
</body>
</html>


ok i want to make this form so that when loaded only form field one with div id 1 is shown when user writes or clicks on that field, form field two with div id 2 is shown,when a user writes or clicks on form field two, then form field three with div id 3 is shown and it goes like this ways.Is it possible and if possible how ?

Is This A Good Question/Topic? 0
  • +

Replies To: javascript form field show after each form is filled

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,441
  • Joined: 08-June 10

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 01:40 AM

thatís no problem. all you have to do is have a click listener on each field that, when triggered, sets the next field visible.

PS. the <br>s are superfluous
Was This Post Helpful? 0
  • +
  • -

#3 sabasi  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 15
  • Joined: 04-August 13

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 02:13 AM

i didn't get it,can you please write the code or the sample of that code please ?

This post has been edited by Dormilich: 21 August 2013 - 02:18 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,441
  • Joined: 08-June 10

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 02:24 AM

some pseudo code:
function shownext(evt)
{
  // carefully check this DOM-Traversal !!!
  // go to parent div, that divís next sibling, and then down to thats input
  this.parentNode.nextSibling.firstChild.style.display = "inline";
}

var inputs = ... // put all input fields here
for (... inputs ...)
  input.addEventListener('click', shownext);


input {
  display: none;
}
#div1 input {
  display: inline;
}


PS. numbers are invalid for ID names
Was This Post Helpful? 0
  • +
  • -

#5 sabasi  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 15
  • Joined: 04-August 13

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 11:10 AM

can you please write some actual code ,it would be very helpful

This post has been edited by andrewsw: 21 August 2013 - 01:39 PM
Reason for edit:: Removed unnecessary quote

Was This Post Helpful? -1
  • +
  • -

#6 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 01:40 PM

Here is an example in jQuery:
<!DOCTYPE html>
<html>
    <head>
        <title>JQuery click event</title>
        <style type="text/css">
            input{
                display: none;
            }
            input#fName{
                display: block;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <input id="fName" type="text" placeholder="First Name"/>
            <input id="lName" type="text" placeholder="Last Name"/>
            <input id="age" type="text" placeholder="Age"/>
        </form>
        
        <script>
            $(document).ready(function(){
                $("input").on("keyup", function(){
                    $(this).next("input").css("display", "block");
                })
            });
        </script>
    </body>
</html>


Was This Post Helpful? 0
  • +
  • -

#7 no2pencil  Icon User is offline

  • Admiral Fancy Pants
  • member icon

Reputation: 5388
  • View blog
  • Posts: 27,383
  • Joined: 10-May 07

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 01:46 PM

View Postsabasi, on 21 August 2013 - 04:36 AM, said:

i want to make this form


View Postsabasi, on 21 August 2013 - 02:10 PM, said:

can you please write some actual code


Sort of contradictory there. Just sayin'
Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 01:46 PM

Have you even given the pseudo code a try? We really don't like just giving out code and if you ask too much it will be put here.

This post has been edited by laytonsdad: 21 August 2013 - 01:47 PM

Was This Post Helpful? 0
  • +
  • -

#9 sabasi  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 15
  • Joined: 04-August 13

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 10:34 PM

View PostDormilich, on 21 August 2013 - 02:24 AM, said:

some pseudo code:
function shownext(evt)
{
  // carefully check this DOM-Traversal !!!
  // go to parent div, that divís next sibling, and then down to thats input
  this.parentNode.nextSibling.firstChild.style.display = "inline";
}

var inputs = ... // put all input fields here
for (... inputs ...)
  input.addEventListener('click', shownext);


input {
  display: none;
}
#div1 input {
  display: inline;
}


PS. numbers are invalid for ID names

Thanks for the pseudo code
Was This Post Helpful? 0
  • +
  • -

#10 sabasi  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 15
  • Joined: 04-August 13

Re: javascript form field show after each form is filled

Posted 21 August 2013 - 11:50 PM

View Postno2pencil, on 21 August 2013 - 01:46 PM, said:

View Postsabasi, on 21 August 2013 - 04:36 AM, said:

i want to make this form


View Postsabasi, on 21 August 2013 - 02:10 PM, said:

can you please write some actual code


Sort of contradictory there. Just sayin'

Sorry if it was contradictory,I didn't mean it

View Postlaytonsdad, on 21 August 2013 - 01:40 PM, said:

Here is an example in jQuery:
<!DOCTYPE html>
<html>
    <head>
        <title>JQuery click event</title>
        <style type="text/css">
            input{
                display: none;
            }
            input#fName{
                display: block;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <input id="fName" type="text" placeholder="First Name"/>
            <input id="lName" type="text" placeholder="Last Name"/>
            <input id="age" type="text" placeholder="Age"/>
        </form>
        
        <script>
            $(document).ready(function(){
                $("input").on("keyup", function(){
                    $(this).next("input").css("display", "block");
                })
            });
        </script>
    </body>
</html>


Thanks it worked like a charm
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: javascript form field show after each form is filled

Posted 22 August 2013 - 10:09 AM

Next time if you don't show effort I will be forced to close your topic. Please don't ask for code in future posts, it will not be given.

We like to promote learning on this site, and not just giving out code.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1