0

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

  • Note, you can use the server side form api to show submitted and computed form data on the form – David Thomas Feb 8 '13 at 2:02
  • it will not work because you have javascript error in your page – Aboodred1 Feb 8 '13 at 2:15
  • drupal_add_js is a Drupal/PHP function not a javascript function – Aboodred1 Feb 8 '13 at 2:17
0

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'); ?>
0

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

  • I tried to test your example but nothing shows. Should I put it in script tags? – loparr Feb 8 '13 at 1:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.