jQuery error: ReferenceError: completedInputs is not defined
<p>I am currently writing some jQuery that will check to see if all input and select elements in a certain div have a value set (not null), then once they all have a value it would show a next button that would then slide in the next part of the form.</p>

<p>Here is my markup:</p>

<pre><code>&lt;div id="signupFormInner"&gt;
    &lt;form action="/" method="post" id="form1"&gt;
        &lt;div id="slide1"&gt;       
            &lt;label for="title"&gt;Title:&lt;/label&gt;
            &lt;select name="title" id="title"&gt;
                &lt;option value=""&gt;-- Please select --&lt;/option&gt;
                &lt;?php foreach($this-&gt;titles as $title) { ?&gt;
                    &lt;option value="&lt;?php echo $title; ?&gt;"&gt;&lt;?php echo $title; ?&gt;&lt;/option&gt;

                &lt;?php } ?&gt;
            &lt;/select&gt;
            &lt;label for="firstname"&gt;First Name:&lt;/label&gt;&lt;input type="text" name="firstname" id="firstname" /&gt;
            &lt;label for="lastname"&gt;Last Name:&lt;/label&gt;&lt;input type="text" name="lastname" id="lastname" /&gt;
            &lt;label for="email"&gt;Email Address:&lt;/label&gt;&lt;input type="email" name="email" id="email" /&gt;&lt;label for="email"&gt;Confirm Email Address:&lt;/label&gt;&lt;input type="email" id="email_confirm" /&gt;

        &lt;/div&gt;
        &lt;div id="slide2"&gt;
            content in here

        &lt;/div&gt;
        &lt;div id="slide3"&gt;
            content in here

        &lt;/div&gt;
    &lt;/form&gt; 
&lt;/div&gt;
</code></pre>

<p>I have three divs inside my form which will slide across once all input fields within a div have been completed. Here is the attempted jQuery:</p>

<pre><code>jQuery('#signupFormInner input, #signupFormInner select').change(function(i, v) {
        var parentDivId = jQuery(this).parent().attr('id');
        jQuery("#" + parentDivId + " input, #" + parentDivId + " select").each(function(i2, v2) {
            if(jQuery(v2).attr('value') == "") {
                var completedInputs = false;
            } else {
                var completedInputs = true;
            }               
        });
        alert(completedInputs);
    });
</code></pre>

<p>What I am trying to do here is when a user changes an element of the form the jQuery will check to see if all other elements within that div of the form have values too, and if so, as said before, it will allow them to press a button to slide the next div in, containing more elements of the form.</p>

<p>As you can see I am setting a variable called completedInputs to true or false dependent on whether all other elements within that div have been completed but I keep on getting a an error saying:</p>

<pre><code>ReferenceError: completedInputs is not defined
[Break On This Error]   

alert(completedInputs);
</code></pre>

<p>I can't seem to solve this as I define the variable whether it is true or false so not sure why it is saying it is undefined. </p>

<p>Can anybody see where I am going wrong?
Thanks </p>
