CODEWITHSUNDEEP
javascriptphpjqueryhtml
Red
Red

Reputation: 23

'onsubmit' not running javascript function

I've been trying to figure this out for the last hour or so to no avail. I can't even get it to run.

<form action='Summary2.php' method='post' id='summary2Form' onsubmit='return validateSummaryForm(this);'>
    <table  id='jobTable' align='center'>
        <tr>
            <div name='jobDiv'>
                <td>
                    <p><font size='4'>Select Job Name: </font></p>
                </td>
                <td>
                    <select id="jobNameSelect" name="jobNameSelect">
                        <?php
                            print '<option></option>';
                            foreach($jobNumArray as $jobNum) {
                                print '<option>'.$jobNum.'</option>';
                            }
                        ?>
                    </select>
                </td>
            </div>
        </tr>
        <tr>
            <td></td>
            <td>
                <div type="submit" id="summaryNext">
                    <input type="submit" id="summaryNext">
                </div>
            </td>
        </tr>
    </table>
</form>

function validateSummaryForm(test) {
    var e = document.getElementById(test.id);
    var strUser = e.options[e.selectedIndex].text;
    alert(strUser);
    if(strUser == ""){
        $("Table").effect("shake");
        return false;
    }
    return true;
 }

The above html will not even run the javascript function, which is in an external file. My Import statement are below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="../jQuery.js"></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

the ../jQuery.js is where the javascript function is held. This file also has a lot of jQuery, which all works in different webpages. The javascript function is simply at the end of the jQuery. I took out mostly all of the PHP from the code. Any help is appreciated.

Upvotes: 1

Views: 80

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

As you're using the effect() method, which is part of jQueryUI, you need to include your jQuery.js script after jquery-ui.min.js. Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jQuery.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

I would also strongly suggest you rename the jQuery.js file to something else, as it's a very misleading name.

Your validation logic is also flawed; e.options[e.selectedIndex] will be causing an error at least. Assuming you're trying to ensure an option has been selected you can just check the val() of the parent select. As you're using jQuery it would also be better practice to use it to attach your event handlers instead of outdate on* attributes:

<form action='Summary2.php' method='post' id='summary2Form'>

$('#summary2Form').submit(function(e) {
    if ($('#jobNameSelect').val() == '') {
        $("table").effect("shake");
        e.preventDefault();
    }
 });

Finally, the HTML. div elements do not have a type attribute and you're giving it the same id as the input. id attributes must be unique within the document otherwise your HTML will be invalid.

<div>
    <input type="submit" id="summaryNext">
</div>

Also, the <div name='jobDiv'> cannot be a direct child of a tr, it need to go outside the table, or inside a td, and the name attribute should be removed as it too is invalid on a div.

For future reference you can quickly diagnose errors like this by checking the developer tools console by pressing F12

Upvotes: 1

Related Questions