Question: How can I make this variable calculation work when the user hits the submit button?

```
var size = $("#size").val();

<input id="size" />
<button type="Submit">Calculate!</button>

```

Should take value of the input and store it in variable = size

Is it possible to then output this back to the user on the page without reloading after submit using jQuery only?

[JSFiddle](http://jsfiddle.net/8pEp2/1/)

Answer: 
Attach an event handler to the `submit` event of the form. The event handler should call `preventDefault()` on the event to prevent the form from submitting.

Basic Example
-------------

**HTML**

```
<form>
<input id="size" />
<button type="Submit">Calculate!</button>
</form>
<div id="output"></div>

```

**Javascript**

```
var size;
$("form").submit(function(e){
    e.preventDefault();  //prevents form from submitting
    size = $("#size").val();
    $("#output").text(size);
});

```

**JS Fiddle:** <http://jsfiddle.net/NKq6L/>

---

Using Fiddle Code
-----------------

**Javascript**

```
$("#cushionCalculator").submit(function(e){
    e.preventDefault();
    var size = $("#size").val();
    $("#output").text(size);
});

```

**Fiddle Using Your Code:** <http://jsfiddle.net/8pEp2/2/>
You can do something like:

```
$('button').submit(function() {
  var size = $('#size').val();
  // Do whatever you want with size
  return false;
});

```