I'm trying to get my form to submit the data to PHP thru AJAX. It shows the loading message but stops at $.ajax(
What am i doing wrong?
Heres my form.js:
$(function () { $('form').on('submit', function (e) { $('.output_message').html("<div class='card'><div class='card-body'><i class='fas fa-spinner fa-spin'></i> Loading...</div></div>"); e.preventDefault(); $.ajax( { type: 'post', url: '//leafy.pw/assets/process.php', data: $('form').serialize(), success: function () { $(".output_message").html(data); } }); }); }); And heres my process.php
if ( isset( $_POST[ "long_url" ] ) ) { $long_url = mysqli_escape_string( $mysqli, $_POST[ "long_url" ] ); if( $_POST[ "alias" ] != "" ) $alias = mysqli_escape_string( $mysqli, $_POST[ "alias" ] ); else $alias = substr( md5( time( ). $long_url ), 0, 4 ); if( $mysqli->connect_error ) { // Debugging Only // die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error); echo( ' <div class="alert alert-danger" role="alert"> Error: Couldn\'t Connect To Database </div>' ); } if( ! @file_get_contents( $long_url ) ) { echo( ' <div class="alert alert-danger" role="alert"> Error: Couldn\'t Connect To URL </div>' ); } $stored_alias = $mysqli->query("SELECT short FROM leafys WHERE BINARY short = '$alias'")->fetch_object()->short; if( $stored_alias ) { echo( ' <div class="alert alert-danger" role="alert"> Error: '. $stored_alias .' Exists </div>' ); } if( strpos( $long_url, 'leafy.tk' ) !== false ) { echo( ' <div class="alert alert-danger" role="alert"> Error: Cannot Use Host URL Leafy.pw </div>' ); } $query = "INSERT INTO leafys ( long_url, short ) VALUES( ?, ? )"; $statement = $mysqli->prepare($query); $statement->bind_param( 'ss', $long_url, $alias ); if( $statement->execute( ) ) { // Display Short Leaf Information Here. echo( ' <hr /> <h2> Leafy URL Created! </h2> <div id="form" data-tip="Your Leafy URL"> <input style="width: 100%; max-width: 215px;" type="text" value="https://leafy.pw/' .$alias. '" id="short" readonly /> <div class="tooltip"> <button onclick="myFunction()" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltipShort">Copy To Clipboard</span> <i style="color:#00FF00;" class="far fa-copy fa-lg"></i> </button> </div> </div> <div id="form" data-tip="Your Leafy Stats URL"> <input style="width: 100%; max-width: 215px;" type="text" value="https://leafy.pw/' .$alias. '+" id="stats" readonly /> <div class="tooltip"> <button onclick="myFunction1()" onmouseout="outFunc1()"> <span class="tooltiptext" id="myTooltipStats">Copy To Clipboard</span> <i style="color:#00FF00;" class="far fa-copy fa-lg"></i> </button> </div> </div> <br /> <h2> QR Code </h2> <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://leafy.pw/' .$alias. '"> ' ); } } else { echo("Error"); } and here is my form html:
<form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span> </div> <input type="url" class="form-control" id="long_url" name="long_url" placeholder="Https://..." aria-label="Https://..." required autocomplete="off" aria-describedby="basic-addon1"> <div class="input-group-append"> <button class="btn btn-outline-success" type="submit" id="submit" name="submit" >Shorten</button> </div> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1" data-toggle="collapse" data-target="#collapseOptions"> <label class="custom-control-label" for="customCheck1">Show Options</label> </div> <br /> <div class="collapse" id="collapseOptions"> <div class="card card-body"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">Https://leafy.pw/</span> </div> <input type="text" class="form-control" id="alias" name="alias" aria-describedby="basic-addon3" placeholder=""> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="privacy"><i class="fas fa-user-secret"></i></label> </div> <select class="custom-select" name="privacy" id="privacy"> <option value="public" selected>Public ( Default )</option> <option value="private">Private ( Not Listed )</option> </select> </div> </div> <br /> </div> <div class="g-recaptcha" data-sitekey="6LfwAmIUAAAAACRaIsSBgxq5qtY0Gov3zf0D0lst" data-size="<?php IsMobile( ); ?>" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired"></div> </form> I'm lost at how this isn't working...
It's meant to grab the url and alias (optional) and add the data into the database and then return the shorten url under the form. I've had it working on my old website but cant seem to get it working on my new site with my new form layout.
