ansaurus

Question

How do I make a textbox and button so it will fire a javascript method and not post?

Answer 1

A:

with jQuery - you could do:

$('#form_id').submit(function(e){
  $('#output_element').append(double_func(parseInt($('#text').val(), 10))); // I changed the name of your function because 'double' is reserved...
  return false;  // This stops the form from submitting.
});

Alex Sexton 2009-10-20 23:35:15

+1 for picking up on the reserved word use. and -1 for answering with: use jQuery. It was a simple question and doesn't need a large framework to solve it.

Jonathan Fingland 2009-10-20 23:57:11

If this was his entire application, then you would probably be correct. I didn't tell him he _should_ use jQuery, I merely offered that solution by saying that he _could_ do it. It's pretty clear from his post that he probably wont be able to handle browser quirks, etc. He actually sounds like the perfect candidate for the kind of abstraction and ease of use that jQuery offers.

Alex Sexton 2009-10-21 07:57:26

Answer 2

+2 A:

Something like this would do it:

<script type="text/javascript">

function calculate() {
   var number = parseInt(document.getElementById('Number').value);
   document.getElementById('Result').innerHTML += double(number) + '<br/>';
}

function double(number) {
   return number * 2;
}

</script>

<input type="text" id="Number"/>
<input type="button" value="Calculate" onclick="calculate();"/>
<div id="Result"></div>

Guffa 2009-10-20 23:35:25

Answer 3

A:

<script type="text/javascript">
function javaScriptFunction(){
  documet.getElementById("output").html += "<br>"+document.getElementById("textbox").value*2;
}
</script>

<form onsubmit="javaScriptFunction(); return false;">
<input type="text" id="textbox" />
<p id="output">

</p>
<input type="submit" value="Click Me!" />
</form>

Marius 2009-10-20 23:36:38

Answer 4

A:

Hope this will help!

NOTE: number.match(/^\d+$/ ) confirms the value should be numeric.

<html>
<head>
    <script type="text/javascript">
     function calulation() {
      var number = document.forms[0].number.value;
      if( number.match(/^\d+$/ ) )
       document.getElementById("output").innerHTML += double(number) + "<br/>";
      else
       alert("Only numeric allowed");
     }

     function double(number) {   return number * 2;}
    </script>
</head>
<body>
    <form onsubmit="calulation();return false;">
     <input id="number" type="text"/><input type="submit" value="calculate" />
    </form>
    <div id="output"></div>
</body>
</html>

Ramiz Uddin 2009-10-21 06:19:04

ansaurus

tags:

views:

answers:

How do I make a textbox and button so it will fire a javascript method and not post?

related questions