JQuery Validated Form Not Submitting

Question

I have a form that I am using on my site and it is validated with some simple JQuery validation. Problem is it's not submitting or doing anything really when I change the values. Here is my code:

<form id="radForm" method="post" action="events.php?type=rad">
    <div class="searchBoxLeft searchBoxRad"></div>
    <div class="searchBoxMiddle">
        <input id="radSearch" type="text" class="searchBoxInput searchBoxShort" value="<?php echo $yourradius; ?>" />
        <label class="searchBoxLabel">Mile Radius of Your Address</label>
    </div>
    <div id="radButton" class="searchBoxRight"></div>
    <div class="clearLeft"></div>
</form>

<script>
    $(document).ready(function()
    {
        var radsearchok = 0;
        //Rad search
        $('#radSearch').blur(function()
        {
            var radsearch=$("#radSearch").val();
            if(radsearch < 2){
                $('#radSearch').addClass("searchError");
                radsearchok = 0;
            }
            else if(radsearch > 50){
                $('#radSearch').addClass("searchError");
                radsearchok = 0;
            }
            else{
                $('#radSearch').addClass("searchSuccess");
                radsearchok = 1;
            }
        });
        // Submit button action
        $('#radButton').click(function()
        {
            if(radsearchok == 1)
            {            
                $("#radForm").submit();
            }
            else
            {
                $('#radSearch').addClass("searchError");
            }
            return false;
        });
        //End
    });
</script>

Can anyone see what is wrong with this?

Answer 1

You need to go back and set the .val() property again of your form, otherwise it will take the original value of .val() not radsearch ;

Not sure if you actually want to update .val() though or just attach a property. Some options:

Right before the closing brace of .blur --> }); add"

$("#radSearch").val(radsearch);

Or:

Add a hidden input to your form with a new ID like:

<input type='hidden' name='radsearchHidden' />

and then do the same before the end of .blur:

$("#radsearchHidden").val(radsearch);

Answer 2

I made some changes to your code ( http://jsfiddle.net/zdeZ2/2/ ) which I'll describe below:

<div id="radButton" class="searchBoxRight"></div> I assume you have something in there=> <input id="radButton" class="searchBoxRight" type="button" value="rad button">

I rewrote your validator with blur as follows. As suggested it coroses the radSearch value to an integer before comparisions The changes remove the searchError and searchSuccess classes before validating. I also made some optimizations for you.

//Rad search
$('#radSearch').blur(function () {
    //remove classes from previous validating
    var $this = $(this).removeClass("searchError").removeClass("searchSuccess");
    var radsearch = $this.val() | 0; //radsearch is an integer
    if (radsearch < 2 || radsearch > 50) {
        $this.addClass("searchError");
        radsearchok = 0;
    } else {
        $this.addClass("searchSuccess");
        radsearchok = 1;
    }
});

Can be equivalently written as:

//Rad search
$('#radSearch').blur(function () {
    var $this = $(this);
    var radsearch = $("#radSearch").val() | 0; //radsearch is an integer
    var valid = radsearch < 2 || radsearch > 50;

    $this.toggleClass("searchError", !valid)
        .toggleClass("searchSuccess", valid);
    radsearchchok = valid ? 1 : 0;
});