Question

我建立一个链接缩短器，只是为了好玩！一切正常，但每次我创建链接并提交表单时，页面都会重新加载！我希望用onclick="return false;"来阻止它，但它没有用。

<input class="submit" type="submit" value="Create!"  />

$('#contactForm').submit(function () {
    sendContactForm();
    return false;
});

但没有任何作用，文件只是卡住而且没有做任何事情！我在做什么？这是问题页https://viid.su PHP

   require("db_config.php");
       $uid = 1;
      $flink = $_POST['url'];
      if(!preg_match("/^[a-zA-Z]+[:\/\/]+[A-Za-z0-9\-_]+\\.+[A-Za-z0-9\.\/%&=\?\-_]+$/i", $flink)) {
        $html = "Error: invalid URL";
      } else {

        $db = mysqli_connect($host, $username, $password);
        $conn = new mysqli($host, $username, $password, $database);

          $id = substr(md5(time().$flink), 0, 5);
          if($conn->query("INSERT INTO `".$database."`.`link` (`id`, `flink`,`adonly`,`userid`) VALUES ('".$id."', '".$flink."','true','".$uid."');")) {
            $html = 'Your short URL is <a class="test" href="https://viid.su/'.$id.'">https://viid.su/'.$id.'</a>';
          } else {
            $html = "Error: cannot find database";
          }
        mysqli_close($db);
      }

Answer 1

您可以使用类似AJAX调用的方式提交表单而无需重新加载页面。

<强>的JavaScript

$('#contactForm').submit(function (e) {
    e.preventDefault();        

    $.ajax({
           type: "POST",
           url: "path/to/your/script.php",
           data: $('#contactForm').serialize(), // Packs the form's elements
           success: function(data)
           {
               // Do something  here if the call succeeded
               alert(data);
           }
         });
}

<强> HTML

<form id="contactForm">
    <input type="text" name="username" />
    <input type="text" name="email" />
    <input type="submit" value="Submit form" />
</form>

<强> PHP

<?php

echo $_POST['username'];

?>

这些行中的某些内容应该有效，而您不需要任何其他内容，因为您已经在使用jQuery。

Answer 2

你需要在事件回调中使用事件对象作为参数并调用event.preventDefault（）

Answer 3

只需将<input type="submit" />更改为<button onclick="return false;" id="shortenLinkButton">Send</button>

然后使用jQuery，您可以像这样捕获：

// This code will be usable after the page has fully loaded
$(document).ready(function(){
  // Catch the onclick event
  $('#shortenLinkButton').on('click', function() {
    // do something
    alert('clicked the button, do your ajax stuff here after retrieving the data from the input');
  });
});

无法重新加载页面，无法提交表单

3 个答案: