adding js into body

Question

I use drupal 7 an I want to add very simple jquery code to only one page on my site.

 $('#var1').on('keypress keydown keyup', function(){
   $(this).val($(this).val().replace(/([^\d]+)/, '')); 
});
 $('form').submit(


 function (e) {
e.preventDefault();
 var xyz = parseInt($('#var1').val());
$('#result').text("Result is " + ((xyz / 1.25)*30) + " days");
 });

 <form>
<input type="text" id="var1" />
<input type="submit" value="=" />
 </form>
 <span id="result"></span>

The problem is that pressing submit button allways reloads wlole page which I do not need. How to prevent this? Thank you. I need it to work as smooth as this without reloading http://jsfiddle.net/eWXUT/3/

EDIT: I put the code on livesite but it is not working www(dot)vypadavanie(dot)net/ako-rychlo-rastu-vlasy?

In drupal 7 had to wrap the code inside jQuery(document).ready(function($) as well

Answer 1

You have more than one solution for your problem

First solution add your javascript after the form or in the footer

 <form>
<input type="text" id="var1" />
<input type="submit" value="=" />
 </form>
 <span id="result"></span>

 <script>
 $('#var1').on('keypress keydown keyup', function(){
   $(this).val($(this).val().replace(/([^\d]+)/, '')); 
 });

 $('form').submit(function (e) {
   e.preventDefault();
   var xyz = parseInt($('#var1').val());
   $('#result').text("Result is " + ((xyz / 1.25)*30) + " days");
 });
 </script>

Second solution add ready() handler like this

 <script>
 jQuery(function($) {
   $('#var1').on('keypress keydown keyup', function(){
     $(this).val($(this).val().replace(/([^\d]+)/, '')); 
   });

   $('form').submit(function (e) {
     e.preventDefault();
     var xyz = parseInt($('#var1').val());
     $('#result').text("Result is " + ((xyz / 1.25)*30) + " days");
   });
 ));
 </script>

 <form>
<input type="text" id="var1" />
<input type="submit" value="=" />
 </form>
 <span id="result"></span>

Third solution add your javascript code with ready() handler in drupal_add_js function

<?php drupal_add_js('/* javascript code */', 'inline'); ?>

Answer 2

There is actually a drupal api for javascript and drupal_add_js() is exactly what you are looking for..

Example:

  drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');

As for stopping the page from refreshing, why not just add action='#' to your form