I added some Javascript validation to a form on my website. The site connects to the DB just fine, however when you click on the submit button, no action is taken.

This is the form located in the footer of the page:

<div id="add_restaurant" class="full-shadow">
    <h4>Add a Restaurant</h4>

    <form name="submitForm" action="<?php echo $pageName ?>" method="POST"> 
        <ul class="radio_list" id="category">
            <li>Category:</li>
            <li><label class="radiobtn"><input name="category" type="radio" value="healthy" id="is_healthy" checked="checked"/>Healthy</label></li>
            <li><label class="radiobtn"><input name="category" type="radio" value="unhealthy" id="is_unhealthy"/>Unhealthy</label></li>
        </ul>
        <br />
        <label>Name:</label>&nbsp;<input name="rest_name" id="rest_name" type="text" autoplete="off"/>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>

    <p id="add_thanks"></p>
</div>

I imagine the problem is something simple I'm over-looking. Can anyone help?

EDIT: I've found that the issue is here in my JS validation:

$('#submit').off('click').on('click', function(){
    if($('#rest_name').val() === ""){
        $('#add_thanks').html("Please type in a restaurant name.");
    }
    return false;
});

If I disable this code, my form works. What is causing the problem in this JavaScript code?

I added some Javascript validation to a form on my website. The site connects to the DB just fine, however when you click on the submit button, no action is taken.

This is the form located in the footer of the page:

<div id="add_restaurant" class="full-shadow">
    <h4>Add a Restaurant</h4>

    <form name="submitForm" action="<?php echo $pageName ?>" method="POST"> 
        <ul class="radio_list" id="category">
            <li>Category:</li>
            <li><label class="radiobtn"><input name="category" type="radio" value="healthy" id="is_healthy" checked="checked"/>Healthy</label></li>
            <li><label class="radiobtn"><input name="category" type="radio" value="unhealthy" id="is_unhealthy"/>Unhealthy</label></li>
        </ul>
        <br />
        <label>Name:</label>&nbsp;<input name="rest_name" id="rest_name" type="text" autoplete="off"/>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>

    <p id="add_thanks"></p>
</div>

I imagine the problem is something simple I'm over-looking. Can anyone help?

EDIT: I've found that the issue is here in my JS validation:

$('#submit').off('click').on('click', function(){
    if($('#rest_name').val() === ""){
        $('#add_thanks').html("Please type in a restaurant name.");
    }
    return false;
});

If I disable this code, my form works. What is causing the problem in this JavaScript code?

• javascript
• php
• jquery
• forms

• One odd observation I made was if I add the form to the page twice, the second one works correctly when I hit submit... – user2766423 Commented Jun 30, 2014 at 18:59
• can You post html which is rendered on page? only this line: <form name="submitForm" action="<?php echo $pageName ?>" method="POST"> . Secondary - what does it mean it doesn't submit it? Button doesn't work or what is happening actually? – mmmm Commented Jun 30, 2014 at 19:41
• @Mati When I say it doesn't submit I mean it does nothing when the button is clicked. It just presses the button and no action as taken whatsoever. I will post above what the result page looks like. – user2766423 Commented Jun 30, 2014 at 19:58
• When you return false, you cancel the click. Cancel click means no form submission – epascarello Commented Jan 6, 2016 at 21:10

5 Answers 5

You are not printing $pageName:

<form name="submitForm" action="<?php echo $pageName ?>" method="POST">

You JavaScript validation is cancelling EVERY click, not just when there is an error.

$('#submit').off('click').on('click', function(){
    if($('#rest_name').val() === ""){
        $('#add_thanks').html("Please type in a restaurant name.");
        return false;  //<-- add this
    }
    //return false;  <-- remove this
});

two places, the first is to print the $pageName in the action section of the form and the second is to define the $submit in the action page.

This is what you wrote

<form name="submitForm" action="<?php $pageName ?>" method="POST"> 

You need to print that $pageName variable.

<form name="submitForm" action="<?php print($pageName); ?>" method="POST"> 

It might looks silly. But try this:

Remove all your scripts. And just run the below line on your onclick event.

$("form").submit();

Your form won't be submitted.

Rename the "id" and "name" of your button:

<input id="btnSubmit" type="submit" name="btnSubmit" value="Submit">

Remove all your scripts. And just run the below line on your onclick event.

$("form").submit();

Your form will be submitted.

"You should not use 'submit' as your id and name"