CODEWITHSUNDEEP
javascripthtmlcssforms
sensation
sensation

Reputation: 437

Hide/Show form in HTML produce unusual result

I've been trying for some time now (some time = whole day) to figure out why I have this strange problem with my form. I have a client who wants a stand-alone HTML page running locally which would display one form with couple of textbox and one button. After info is entered and user click that button, a second form should show up with new textboxes. Form can't have a redirection to another website or file. It all has to be in that (HTML) file.

I figured out this would be easiest to do with jQuery but loading whole library just to hide one form is plain stupid. So I take a look at other option and decided to use pure Javascript.

The problem is when I click "NEXT" first time the 1st form disappear but then apear a second later like some sort of request is sent. Bellow is the code I currently have. I tried making an JSFiddle but browser blocks every time I access it.

Javascript:

function hideAll() {
  document.getElementById('first').style.display = 'block';
  document.getElementById('second').style.display = 'none';
  showFirstForm();
}

function showFirstForm() {
  if (document.getElementById('second').style.display == 'block') {
    document.getElementById('first').style.display = 'block';
    document.getElementById('second').style.display = 'none';
    }
}

function showSecondForm() {
  if (document.getElementById('first').style.display == 'block')
  {
    document.getElementById('second').style.display = 'block';
    document.getElementById('first').style.display = 'none';
  }
}

HTML:

<body class="if5" onload="hideAll()"> // I'm loading hideAll() on refresh to hide second form
   ....
    <!-- FORM 2 -->
    <form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >

    <filedset>
    <label for="name"> Your name </label>
    <input name="name" value="MyName" /></input>
    <button onClick="showFirstForm()">Next</button>
    </filedset>
    </form>


    <!-- FORM 1 -->
    <form id="second" class='tx_anmelden'>

    <fieldset>
    <label for="name"> Your name </label>
    <input name="name" value="MyNaffffffme" /></input>
    <button onClick="showSecondForm()">Next</button>
    </fieldset>
    </form>
   ....

References:

Upvotes: 0

Views: 161

Answers (3)

RustyToms
RustyToms

Reputation: 7810

Besides the fact that you have your form id's switched, <button> has a default type of submit. So when your button is clicked it is posting the form to #. So correct your form ids, and then change your button code type to button:

<button type="button" onClick="showSecondForm()">Next</button>

Here are some docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Here is a working jsfiddle using the corrected code: http://jsfiddle.net/789SP/

Upvotes: 2

The Muffin Man
The Muffin Man

Reputation: 20004

First off, any button in a form that doesn't have a type attribute or has a type attribute of submit will by default submit the form on click.

Second, it looks like you are trying to implement some sort of wizard. If this is true you don't want each part to be it's own form because at the end you're going to want to send all of this data to the server which won't work if it's in two forms.

The entire thing needs to be in one form with sections inside that you show/hide. To navigate between the sections you'll want to use

<button type="button" onClick="showSecondForm()">Next</button>

To do wizards is always a pain in the butt. Once you start handling validation you need to figure out which step has an error in it and show that section, or if the user uses the back button they might expect the form to go back to step one. You might want to search for a third party solution that provides some of the boiler plate functionality. These might help

This should get you off to a good start though.

Edit

Don't attempt this from scratch. Use this

Upvotes: 2

EvilBeer
EvilBeer

Reputation: 2084

<!-- FORM 2 -->
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >

<fieldset> **fieldset was misspelled as "filedset"**
<label for="name"> Your name </label>
<input name="name" value="MyName"></input> **your input had /> at it's end, which is unfortunately wrong**
<button onClick="showFirstForm()">Next</button>
</fieldset> **fieldset was misspelled as "filedset"**
</form>


<!-- FORM 1 -->
<form id="second" class='tx_anmelden'>

<fieldset>
<label for="name"> Your name </label>
<input name="name" value="MyNaffffffme"></input> **your input again had /> at it's end, which is unfortunately wrong**
<button onClick="showSecondForm()">Next</button>
</fieldset>
</form>

Upvotes: -1

Related Questions