jQuery（ajax）提交表格

Question

I am having some issues with $.ajax post method.

I would like my form to submit form data while on the current page, however for some odd reason my script is redirecting to the action page.

Please could someone identify what's causing this to happen and how I can resolve this problem?

Here is my script:

 $(document).ready(function() { $('#OverLaySetupScreen').submit(function(e) { e.preventDefault(); var color1 = $('#color1').val(); var color2 = $('#color2').val(); var color3 = $('#color3').val(); var color4 = $('#color4').val(); var color5 = $('#color5').val(); var bigtext = $('#bigtext').val(); var bgcolor = $('#bgcolor').val(); var lowtextcolor = $('#lowertextcolor').val(); var lowertexttext = $('#lowertextext').val(); var bgimage = $('#bgimage').val(); var bgvideo = $('#bgvideo').val(); var toggle1 = $('#toggle1').val(); var toggle2 = $('#toggle2').val(); var toggle3 = $('#toggle3').val(); var toggle5 = $('#toggle5').val(); var toggle6 = $('#toggle6').val(); var toggle7 = $('#ltoggle7').val(); var discordname = $('#discordname').val(); var discordhash = $('#discordhash').val(); $.ajax({ url: 'actions/save.php', type: 'POST', data: { color1: color1, color2: color2, color3: color3, color4: color4, color5: color5, bigtext: bigtext, bgcolor: bgcolor, lowtextcolor: lowtextcolor, lowertexttext: lowertexttext, bgimage: bgimage, bgvideo: bgvideo, toggle1: toggle1, toggle2: toggle2, toggle3: toggle3, toggle5: toggle5, toggle6: toggle6, toggle7: toggle7, discordname: discordname, discordhash: discordhash } }) .done(function(data) { var result = $.trim(data); alert(result); }) .fail(function() { alert('Failed to login...'); }); }); }); 

 <form action="actions/save.php" method="post" id="OverLaySetupScreen" name="OverLaySetupScreen" pb-autologin="true" autocomplete="off" novalidate> <table align="center" width="100%;" border="1"> <tbody> <tr> <td colspan="2">Event Toggle Control</td> <td width="46%"> <div align="center">Preview</div> <?php //<div align="right"><input type="button" value="Update Preview" onClick="preview()"></div>?> </td> <td width="5%"> <div align="center"><a href="javascript:;" class="btn btn-success" data-toggle="modal" data-target="#SettingsImport" id="doimport">Load Settings</a></div> </td> </tr> <tr> <td colspan="2"> <div align="left"> <font color="black"> <ul> <li> <input type="checkbox" <?php if($_GET[ "haloween"]=="false" ) { } else { echo "checked"; } ?> id="1toggle" name="1toggle" onChange="updatethis()"> Haloween [<a href="<?php echo $previewlnk; ?>eventpreview=Haloween" target="_blank">Preview</a>] </li> <li> <input type="checkbox" <?php if($_GET[ "xmas"]=="false" ) { } else { echo "checked"; } ?> id="2toggle" name="2toggle" onChange="updatethis()"> Christmas [<a href="<?php echo $previewlnk; ?>eventpreview=Christmas" target="_blank">Preview</a>]</li> <li> <input type="checkbox" <?php if($_GET[ "newyear"]=="false" ) { } else { echo "checked"; } ?> id="3toggle" name="3toggle" onChange="updatethis()"> New Years [<a href="<?php echo $previewlnk; ?>eventpreview=Newyears" target="_blank">Preview</a>] </li> </ul> US Based Events <ul> <li> <input type="checkbox" <?php if($_GET[ "4july"]=="true" ) { echo "checked"; } else { } ?> id="5toggle" name="5toggle" onChange="updatethis()"> 4th July [<a href="<?php echo $previewlnk; ?>eventpreview=Newyears" target="_blank">Preview</a>] </li> </ul> Jewish Faith Based Events <ul> <li> <input type="checkbox" <?php if($_GET[ "confetti"]=="true" ) { echo "checked"; } else { } ?> id="6toggle" name="6toggle" onChange="updatethis()"> Rosh Hashanah [ <a href="<?php echo $previewlnk; ?>eventpreview=confetti" target="_blank">Preview</a>]</li> </ul>Charity Events <ul> <li><input type="checkbox" <?php if($_GET[ "extralife"]=="true" ) { echo "checked"; } else { } ?> id="7toggle" name="7toggle" onChange="updatethis()"> Extra Life [<a href="<?php echo $previewlnk; ?>eventpreview=extralife" target="_blank">Preview</a>]</li> </ul> </font> </div> </td> <td colspan="2" rowspan="9" valign="top"><iframe id="previewframe" src="<?php if($_GET[" importSettings "]) { echo $protocol . $_SERVER["SERVER_NAME "] . "https://crossfire151.gq/twitch/chottis/?chottis=false&preview=true&text=Loading&text2=Importing%20Settings "; } else { ?><?php echo $protocol . $_SERVER["SERVER_NAME "]; ?>/twitch/chottis/preview/<?php if($_GET["chottis "] == "true ") { echo "? "; } else { echo "?chottis=false& "; } ?>preview=true<?php } ?>" frameborder="0" scrolling="no" style="height: 250px; width: 100%;"></iframe></td> </tr> <tr> <td colspan="2">Big Text Customization</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td width="15%"> <div align="center">Color 1</div> </td> <td width="34%"> <div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c1 "]) { echo $_GET["c1 "]; } else { echo "7E147C "; } ?>" id="color1" name="color1"></div> </td> </tr> <tr> <td> <div align="center">Color 2</div> </td> <td> <div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c2 "]) { echo $_GET["c2 "]; } else { echo "7C2B88 "; } ?>" id="color2" name="color2"></div> </td> </tr> <tr> <td> <div align="center">Color 3</div> </td> <td> <div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c3 "]) { echo $_GET["c3 "]; } else { echo "AC44AE "; } ?>" id="color3" name="color3"></div> </td> </tr> <tr> <td> <div align="center">Color 4</div> </td> <td> <div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c4 "]) { echo $_GET["c4 "]; } else { echo "9633A4 "; } ?>" id="color4" name="color4"></div> </td> </tr> <tr> <td> <div align="center">Color 5</div> </td> <td> <div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c5 "]) { echo $_GET["c5 "]; } else { echo "B13DC2 "; } ?>" id="color5" name="color5"></div> </td> </tr> <tr> <td> <div align="center">Text</div> </td> <td> <div align="center"><input class="input" onchange="preview()" type="text" value="<?php if($_GET[" text "]) { echo $_GET["text "]; } else { echo "be right back "; } ?>" id="bigtext" name="bigtext"></div> </td> </tr> <tr> <td colspan="4">Lower text customization</td> </tr> <tr> <td> <div align="center">Text</div> </td> <td><input class="input" onchange="preview()" type="text" value="<?php if($_GET[" text2 "]) { echo $_GET["text2 "]; } else { echo "go treat yourselves! "; } ?>" id="lowertexttext" name="lowertexttext"></td> <td colspan="2"><a href="javascript:lowerblank()">Click here to set this text to blank</a> - This will remove the lower text completely</td> </tr> <tr class="ltccollumn"> <td> <div align="center">Color</div> </td> <td> <div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" lowertextcolor "]) { echo $_GET["lowertextcolor "]; } else { echo "702E6D "; } ?>" id="lowertextcolor" name="lowertextcolor"></div> </td> <td colspan="2">&nbsp;</td> </tr> <tr> <td colspan="4">Background Customization</td> </tr> <tr> <td> <div align="center">Custom Background</div> </td> <td> <div align="center"><a href="#" class="btn btn-block btn-raised btn-primary" data-toggle="modal" data-target="#myModal">Setup...</a></div> </td> <td colspan="2">&nbsp;</td> </tr> <tr> <td> <div align="center">Background Color</div> </td> <td> <div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" bgcolor "]) { echo $_GET["bgcolor "]; } else { echo "37133C "; } ?>" id="bgcolor" name="bgcolor"></div> </td> <td colspan="2"> <div id="copystate"></div> </td> </tr> <tr> <td> <div align="center"></div> </td> <td colspan="3"> <div align="center"> <?php if(isset($_SESSION["brb-authenticated"])) { ?> <input class="input" onchange="preview()" type="text" id="sourceurl" value="<?php if($_GET[" importSettings "]) { } else { ?><?php echo $protocol . $_SERVER["SERVER_NAME "]; ?>/twitch/chottis/preview/<?php if($_GET["chottis "] == "true ") { echo "? "; } else { echo "?chottis=false& "; }?>c1=7e147c&c2=7c2b88&c3=ac44ae&c4=9633a4&c5=b13dc2&text2=go treat yourselves&text=be right back&chromakey=37133c&text2c=702e6d&bgimg=&bgvideo=&haloween=true&xmas=true&newyear=true&4july=false&confetti=false&extralife=false <?php } ?>" onClick="this.select(),copythis(),document.execCommand('copy');" readonly> <?php } elseif(!isset($_SESSION["brb-authenticated"])) { ?> <a href="#" onClick="jQuery('#discordbegin').toggle('show')" id="authclick" class="btn btn-block btn-raised btn-primary" data-toggle="modal" data-target="#Authentication">Finish Setup</a> <input type="submit" value="submit"></div> <?php } ?> </div> </td> </tr> </tbody> </table> <div align="center"><input type="reset" onClick="setTimeout('preview()', 500)" value="Reset to default Settings"></div> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog animated zoomIn animated-3x" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button> <h3 class="modal-title" id="myModalLabel">Custom Background</h3> </div> <div class="modal-body"> <center> <p> <label> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" <?php if($_GET["bgvideo"]) {} else { echo "checked"; }?> onChange="radioupdate()"> Image</label> <label> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" <?php if($_GET["bgvideo"]) { echo "checked"; } else {} ?> onChange="radioupdate()"> Video</label> <br> </p> <p id="type1"> <?php if($_GET["bgvideo"]) { ?>Please enter an video location(URL) below.<br/>This video can be from any source but <a href="https://simple.wikipedia.org/wiki/Hotlinking" target="_blank" title="What an earth is hotlinking?">hotlinking</a> must be enabled.<br/>Dropbox is supported, make sure you set &quot;dl=1&quot;<br/>Supported format: MP4. <?php } else { ?>Please enter an image location(URL) below.<br/>This image can be from any source but <a href="https://simple.wikipedia.org/wiki/Hotlinking" target="_blank" title="What an earth is hotlinking?">hotlinking</a> must be enabled.<br/>Dropbox is supported, make sure you set &quot;dl=1&quot;<br/>Supported formats: jpg,jpeg,png,bmp,gif. <?php } ?> </p> <p> <div id="type2"> <?php if($_GET["bgvideo"]) { ?><input type="hidden" id="bgimage"><input type="text" id="bgvideo" name="bgvideo" <?php if($_GET[ "bgvideo"]) { echo 'value="' . $_GET[ "bgvideo"] . '" '; } ?>style="width: 60%"> <?php } else { ?><input type="hidden" id="bgvideo"><input type="text" id="bgimage" name="bgimage" <?php if($_GET[ "bgimage"]) { echo 'value="' . $_GET[ "bgimage"] . '" '; } ?>style="width: 60%"> <?php } ?> </div> <span id="type3"><?php if($_GET["bgvideo"]) { ?><br/><div align="left" style="color: red"><b>Warning: If you use a background video, the Haloween event will NOT show it's background, meaning this video will over-ride the events background.</b></div><?php } else { ?><a href="javascript:;" onClick="document.getElementById('bgimage').value=&quot;https://www.dropbox.com/s/q1w7mmyynsdri9p/transparent.png?dl=1&quot;">Transparent Image</a><br/>Your image must be at least <b>1920x1080</b> for it to fit within the overlay.<br/><div align="left" style="color: red"><b>Warning: If you use a background image, the Haloween event will NOT show it's background, meaning this image will over-ride the events background.</b></div><?php } ?></span> </p> </center> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" onClick="preview()" class="btn btn-primary" data-dismiss="modal">Apply</button> </div> </div> </div> </div> <div class="modal" id="Authentication" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog animated zoomIn animated-3x" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="AuthCancel()"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button> <h3 class="modal-title" id="myModalLabel">Authentication</h3> </div> <div class="modal-body"> <center> <p> <?php //<table border="1" id="disclogin" style="display: none;"> //<tbody> //<tr> //<td><div align="right">Discord name:</div></td> //<td><input type="text" name="discordname" required></td> //<td><input placeholder="#1245" required name="discordhash" required></td> //</tr> //<tr> //<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-success" id="sub1">Save &amp; Get my URL</button></td> //</tr> //<tr> //<td colspan="3"></td> // </tr> //</tbody> //</table> ?> <div id="discordbegin" style="display: none;"> To begin you must first join our Discord Server! <table border="0" align="center"> <tbody> <tr> <td><a href="http://discord.crossfire151.gq" onClick="jQuery('#discordbegin').toggle('hide'),jQuery('#adddiscord').toggle('show')" target="_blank" class="btn btn-block btn-raised btn-primary">Join Discord</a></td> </tr> </tbody> </table> <table border="0" align="center"> <tbody> <tr> <td><a href="javascript:;" onClick="jQuery('#discordbegin').toggle('hide'),jQuery('#adddiscord').toggle('show')" target="_blank" class="btn btn-block btn-raised btn-info">I already Joined!</a></td> </tr> </tbody> </table> </div> <table border="1" id="adddiscord" style="display: none;"> <tbody> <tr> <td> <div align="right">Discord name:</div> </td> <td><input type="text" name="discordname" id="discordname" required></td> <td><input type="text" placeholder="#1245" name="discordhash" id="discordhash" required></td> </tr> <tr> <td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-success" id="regthat">Whitelist my Discord name</button></td> </tr> </tbody> </table> <?php //<form> //<table border="1" id="newname" style="display: none;"> //<tbody> //<tr> //<td><div align="right">Old Discord name:</div></td> //<td><input type="text" name="olddiscordname" required></td> //<td><input placeholder="#1245" required name="discordhash" required></td> //</tr> //<tr> //<td><div align="right">New Discord name:</div></td> //<td><input type="text" name="newdiscordname" required></td> //<td><input placeholder="#1245" required name="newdiscordhash" required></td> //</tr> //<tr> //<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-primary" id="updatethat">Save new my Discord name</button></td> //</tr> //<tr> //<td colspan="3"></td> //</tr> //</tbody> //</table></form> ?> <?php } ?> </p> </center> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" onClick="AuthCancel()">Cancel</button> </div> </div> </div> </div> </form> 

Please note that this form contains PHP functionality which will be used to get saved data at a later date, once I can get this script working as it should.

For best results you can see a live testing page over here: Testing page to this script

Answer 1

This resolved my issue:

  $(document).ready(function() { $('#overlaysetupscreen').submit(function(e){ e.preventDefault(); var color1 = $('#color1').val(); var color2 = $('#color2').val(); var color3 = $('#color3').val(); var color4 = $('#color4').val(); var color5 = $('#color5').val(); var bigtext = $('#bigtext').val(); var bgcolor = $('#bgcolor').val(); var lowtextcolor = $('#lowertextcolor').val(); var lowertexttext = $('#lowertextext').val(); var bgimage = $('#bgimage').val(); var bgvideo = $('#bgvideo').val(); var toggle1 = $('#toggle1').val(); var toggle2 = $('#toggle2').val(); var toggle3 = $('#toggle3').val(); var toggle5 = $('#toggle5').val(); var toggle6 = $('#toggle6').val(); var toggle7 = $('#ltoggle7').val(); var discordname = $('#discordname').val(); var discordhash = $('#discordhash').val(); $.ajax({ url: 'actions/save.php', type: 'POST', data: { color1: color1, color2: color2, color3: color3, color4: color4, color5: color5, bigtext: bigtext, bgcolor: bgcolor, lowtextcolor: lowtextcolor, lowertexttext: lowertexttext, bgimage: bgimage, bgvideo: bgvideo, toggle1: toggle1, toggle2: toggle2, toggle3: toggle3, toggle5: toggle5, toggle6: toggle6, toggle7: toggle7, discordname: discordname, discordhash: discordhash } }) .done(function(data){ var result = $.trim(data); alert("Success"); }) .fail(function(){ alert('Failed'); }); }); }); 

I simply counted each of the opening and closing tags and realized a slight problem with the end tags.

So I added }); }); }); }); onto the end, that resolved the issue.