4 Replies - 772 Views - Last Post: 25 August 2013 - 01:19 AM

#1 sabasi  Icon User is offline

  • New D.I.C Head

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

form field not showing properly

Posted 20 August 2013 - 11:13 PM

<html>
<head>
<title>Untitled Document</title>
</head>
<style>
:invalid ~ .test {
    display: none;
}
:invalid ~ .test1 {
    display: none;
}
</style>
<form>
    <input type="text" required/> <!-- Displayed -->
    <fieldset class="test">
        <input type="text"/>  <!-- Hidden until top input is filled -->
    </fieldset> 
	<fieldset class="test1">
        <input type="text"/>  <!-- Hidden until top input is filled -->
    </fieldset>        
</form></div>
</body>
</html>

what is want to do is that after each field is filled up the next field is shown,but what happening is that after first field is written all the other form is shown where it should show the next one

Is This A Good Question/Topic? 0
  • +

Replies To: form field not showing properly

#2 sabasi  Icon User is offline

  • New D.I.C Head

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

Re: form field not showing properly

Posted 20 August 2013 - 11:28 PM

can it be done by javascript ?
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9091
  • View blog
  • Posts: 34,144
  • Joined: 12-June 08

Re: form field not showing properly

Posted 21 August 2013 - 06:54 AM

Moving to html
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 436
  • View blog
  • Posts: 1,848
  • Joined: 30-April 10

Re: form field not showing properly

Posted 21 August 2013 - 09:29 AM

This looks like a job better done by Javascript.
Was This Post Helpful? 0
  • +
  • -

#5 Atheistzilla  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-August 13

Re: form field not showing properly

Posted 25 August 2013 - 01:19 AM

Just use javascript to hide the fields and set Visibilty: none; before the page loads, and then grab the value of the fields and run checks on them.

Pseudocode:
    if (document.getElementById().val("#ElementID") != '') {
        // Set the visiblity of the given object to visible.
        // Maybe you can also use JQuery to fade the form in?
        // Not sure if that works.
    }


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1