Form doesnot post data edited from jQuery

Question

i'm having a very simple app which includes a form and 2 buttons.'

Description

When the user clicks the first button the site checks if he has a discount coupon and if he has then it calculates the discount ammount based on the coupon. Thats pretty simple. If the user doesn't enter a code the the precess continues normaly.

The problem

With the data i'm posting i'm also posting the coupon field. If the user has entered a valid coupon then i disable the coupon input with jQuery and withit i also disable the ammount field. That causes a problem which makes the fields edited with jQuery "unpostable".

For example if you dont enter a coupon code then the field stays unlocked and jQuery never edits it.

The code

<form class="form-horizontal row-fluid" action="<?= base_url() . 'transactions/new' ?>" method="POST" id="form" name="form">



                <div class="control-group">
                    <div class="alert js_hidden" id="psc_val_warning">
                        Παρακαλούμε εισάγεται το ποσό που αντιστοιχεί στα PINS
                    </div>
                    <label class="control-label" for="basicinput">Συνολικό ποσό</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="number" name="psc_val" class="span8" id="psc_val" required><span class="add-on">&euro;</span>
                        </div>
                    </div>
                </div>



                <div class="control-group">
                    <div class="alert alert-error js_hidden" id="coupon_error">
                        Το κουπόνι δεν είναι έγκυρο!
                    </div>
                    <div class="alert alert-success js_hidden" id="coupon_success">
                        Το κουπόνι εξαργυρώθηκε με επιτυχία!
                    </div>
                    <label class="control-label" for="basicinput">Κουπόνι</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on">#</span><input class="span8" id="coupon_code" type="text" name="coupon_code" maxlength="11">       
                        </div>
                    </div>
                </div>

                <hr>

                <div class="control-group">
                    <label class="control-label" for="basicinput">Σημειώσεις</label>
                    <div class="controls">
                        <textarea class="span8" rows="5" name="notes"></textarea>
                    </div>
                </div>

                <hr>
                <center>    
                    <button class="btn btn-large btn-success js_hidden" id="proceed_btn" onclick="submit_form()">Proceed</button>
                </center>
            </form>
            <center>
                <a class="btn btn-large btn-info" onclick="validate()" id="check_btn">Check</a>
            </center>

The JS part

function display_proceed_btn() {

$("#psc_val").prop('disabled', true);
$('#check_btn').fadeOut( "slow", function() {
    $('#proceed_btn').fadeIn( "slow", function() {

    });
});

}

function submit_form() {
   $('#form ').submit();
}

there is the other part which takes the coupon and uses the API to see the discount value but it does pretty much the same thing $("#coupon_code").prop('disabled', true);

Answer 1

Add the coupon code to a hidden field once you disable the input field. Remember to actually recalculate the final amount on the server and not trusting any user editable field ;-)