CODEWITHSUNDEEP
javascripthtmlforms
B. Krafft
B. Krafft

Reputation: 167

<form> is causing problems with my JavaScript code

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.

Upvotes: 0

Views: 48

Answers (3)

StephenStephen
StephenStephen

Reputation: 114

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!');
});

Upvotes: 0

Axel Amthor
Axel Amthor

Reputation: 11096

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.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

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!
}

Upvotes: 1

Related Questions