how to access form choose jQuery ? How to grab “%” from the amount that entered?

Question

I want to built a fee calculator, and for that I need to access forms, I wondered if I can do it in jQuery. So my code is that :

<form id="fee">
    <input type="text" title="fee" placeholder="Place the amount that you would like to send"/> $
    <input type="submit" onclick="getFee()"/>
</form>
<br/>
<p id="Here will be the fee"></p>

And the JS :

function getFee(){
    $("fee > input:fee").
}

Here is my problem. I want to know how to grab the amount that the user entered in the input and add to this amount of 10%, then print it in the paragraph below.

Answer 1

First off all , add id to your input like this

<input type="text" id="amount"

Now get the value like this:

 var amount = $("#amount").val();

Don't use spaces in your ID

<p id="Here will be the fee"></p>

Use this instead

<p id="feeOnAmount"></p>

Now you can add 10% to the amount like this

function getFee(){
    var amount = parseFloat($("#amount").val());
    if($.isNumeric(amount)){
        $("#feeOnAmount").html((amount * 1.1));    
    }
    else{
        $("#feeOnAmount").html("please enter a valid number");
    }
}

http://jsfiddle.net/mohammadAdil/E2rJQ/15/

Answer 2

Use the # sign for id. Also add an id to the input. id="feeInput"

Also title is not a valid input tag.

function getFee(){
        $("#fee > input#feeInput").
    }

Answer 3

Try this

function getFee(){
    var inputVal = $("#fee > input[title='fee']").val();
    var inputFinal = parseInt(inputVal) + (parseInt(inputVal) * .10);

    //Change the ID of the p your appending to
    //ID is now = "calc"
    $("#calc").text(inputFinal);
}

Heres a demo: http://jsfiddle.net/Ln3RN/

Answer 4

I changed the output id and the selector. example in jsfiddle

attribute selectors

$(document).ready(function () {
    $("#fee")[0].onsubmit= getFee;

});
function getFee(){
        var feeInput = $('#fee > input[title="fee"]').val();
        feeInput = parseInt(feeInput);
        $('#Here_will_be_the_fee').text(feeInput*1.1);
        return false;
}

getFee returns false so that the form would not submit, only trigger onsubmit event.