在输入上使用jquery val（）后，PHP $ _POST为空

Question

I want to check value of input for year of birth. I have figured out that if I use jquery function val() to get value of this input, so the php post of this input will be empty. It works fine without using val(). Here you can see the important part part of code. It is not so essential ability of form, but it would be useful to check if the isn't written anything inappropriate or any mistype.

Thank you for help.

<?php
if (!empty($_POST['rn']) && isset($_POST['rn'])){
    // proceed
} else {
    echo "You haven't filled all inputs";
}
?>
<script>
$("#kontrolaButton").click(function(){
    var rok = parseInt($("#rok_nar").val(),10);
    if (rok > 1900 && rok < 2016) {
        $("#odeslatButton").trigger('click');
    };
});
</script>
<form accept-charset="utf-8" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" class="send_form">

<input class="bold" id="rok_nar" type="text" name="rn" placeholder="Rok narození"/>
<input type="button" value="Odeslat" name="kontrola" id="kontrolaButton" /> 
<input type="submit" value="Odeslat" name="odeslat" id="odeslatButton" style="visibility: hidden;" />

</form>

Update: I have probably found the problem. I didn't write it here, because I didn't consider it as an issue. My script looks like:

$("#kontrolaButton").click(function(){
    var rok = parseInt($("#rok_nar").val(),10);
    alert(rok);
    if (rok > 1900 && rok < 2016) {
        $("#odeslatButton").trigger('click');
    };
});

After erasing the alert, the code works :/ Interesting...

Answer 1

You should move the script right to the end of the HTML body so that it executes when the kontrolaButton element is in the DOM.

Note that the mouse down/up or key press/release you issue to close the alert(rok); may interfere with the submission of the form. For instance, I could reproduce a problem like this: I pressed the ESC key to close the alert, and although the form submitted its data, the next page did not render; it was just a blank page. This may be very browser dependent, but on my set-up the ESC key apparently interrupts the rendering of a page.

There may be other such side effects, certainly also if you have other Javascript code on the page that responds to these key or mouse events.