<form> is causing problems with my JavaScript code

Question

I have simplified my code down to a very basic level to try to figure out why, when I add a form to any of my HTML pages that contain Javascript, the page renders twice: once with the JavaScript and once without, putting me back where I started.

Here's the simple HTML:

<form action="test.php" method="post">
<div class="section">
    <fieldset>
         <p id="myP"></p>
         <button type='submit' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
    </fieldset>
</div> <!-- ends section -->
</form>

<script type="text/javascript" src="inc/js/scripts.js"></script>

So all I have is an empty paragraph and a Save button.

Then I have this Javascript code that just simple writes "Hello world!" to the paragraph element, when the Save button is clicked:

var saveButton = document.getElementById("save_button");       // Save button

var displaySomeText = function () {
   var myParagraph = document.getElementById("myP");       
   myParagraph.textContent = "Hello World!";
}

saveButton.onclick = displaySomeText;

The problem is that when I click on the Save button, "Hello world!" displays for a brief second and then disappears.

BUT it works just fine IF I remove the FORM element.

Any ideas why this might be happening?
In the real code I need to submit data to the database, and I want to be able to use _POST to get the data I need out of all my inputs.

The button submits your form – ever thought about what the type="submit" might mean? Replace it with type="button". — C3roe
– C3roe, Commented Jan 26, 2016 at 19:16

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-26 19:15:52Z

1

The reason is, after clicking on the submit button, it "submits" the form. Try changing the button's type="button" and this will not happen:

<!------vvvvvvvvvvvvv Change this!!! -->
<button type='button' name='NewClassTypes'
        value='NewClassTypes' id='save_button'>Save</button>

Else, you need to give return false in your function. That would also work:

var displaySomeText = function () {
   var myParagraph = document.getElementById("myP");       
   myParagraph.textContent = "Hello World!";
   return false; // Add this!
}

answered Jan 26, 2016 at 19:15

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

B. Krafft Over a year ago

Oh fantastic! Changing the type to 'button' worked, as did returning false from my function. In my real code, I do want the form to be submitted so returning false from the function seems to be the way to go. Thank you so much!

Axel Amthor · Accepted Answer · 2016-01-26 19:20:06Z

0

The submit button type has a special functionality: it causes the form it is put in to be submitted by the browser. Putting a click handler on it does not prevent this from happening. So, the result is what is expected.

In order to not submit the form, you need to change the button type:

<input type='button' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>

In this case, the action property of the form doesn't make sense, as well as the method - they both are not used.

answered Jan 26, 2016 at 19:20

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

Comments

StephenStephen · Accepted Answer · 2016-01-26 19:37:16Z

0

You may find it easier to use jQuery when troubleshooting issues like that.

$('#save_button').on('click', function(e){
  e.preventDefault();  // don't submit the form as usual. 
  $('#myP').text('Hello World!');
});

answered Jan 26, 2016 at 19:37

StephenStephen

1141 silver badge5 bronze badges

Collectives™ on Stack Overflow

<form> is causing problems with my JavaScript code

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related