Question

I have a form with a submit button named Apply,

Visual

HTML

<div id="accordion">
    <div>
       <h3><a href="#">Theme color and layout</a></h3>
       <div>
       <!-- Colour picker code -->
        <form id="applyColor">
           <input class='simple_color' value='#cc3333'/>     
           <input type='submit' value='Apply'/>
        </form>
        </div>
    </div>
<div>

Javascript

//Colour picker
$(document).ready(function(){
    $('.simple_color').simpleColor();

    $("#applyColor").submit(function() {
        alert($('input.simple_color')[0].value);
    });
});

Problem :

Now, Whenever I click on submit button it doesn’t execute my alert statement. I have tried to use simple alert statement like alert('Hello World!'); but it did not work as well.

I am not sure whats wrong, am I doing something wrong?

---

Linked Jquery

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

Sources I used to create a color picker and tutorial regarding post via ajax,

• Color picker
• How to post form via jquery ajax

Answer 1

I was only able to reproduce your problem when I didn’t have the color picker properly referenced. When I did reference it, the solution worked as expected:

$(".simple_color").simpleColor();

$("#applyColor").on("submit", function(event){
    event.preventDefault();
    alert( 'Submitted' );
});

Working: http://jsbin.com/ejovir/2/edit
Not Working (plugin not referenced): http://jsbin.com/ejovir/3/edit

Check your console for a message similar to the following:

Uncaught TypeError: Object [object Object] has no method ‘simpleColor’