Question

我想以提交表格后的方式制作它。表单将恢复为包含表单的div特殊框，并指出错误。这意味着我不必单击按钮重新打开以查看表单中的错误。有什么方法可以解决我的代码吗？非常感谢!!!!!

CSS：

  <!DOCTYPE html>
  <html>
  <head>
  <style type="text/css">

  div#overlay {
    display: none;
    z-index: 2;
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
}
div#specialBox {
    display: none;
    position: relative;
    z-index: 3;
    p.padding;

    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;

    margin: 150px auto 0px auto;
    width: 500px; 
    height: 500px;
    overflow:auto;
    background: #FFF;
    color: #000;
}
div#wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left:24px;
}
</style>
<script type="text/javascript">
function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}
</script>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<p>Create Order
  <p><?php
$timestamp=time(); require_once 'start.php';
?>

HTML：

   <form action="tradeform.php" method="post" > 
    <input type="hidden" name="formSubmitted" value="true">
    <?php echo $message; ?>
    <?php ?>
    <?php if ($haveErrors || $userArriveByClickingOrDirectlyTypeURL) : ?>
        <fieldset>
    <p>Symbol : <select name = "selection" id="selection">
    <option disabled = "disabled" selected = "selected"> Choose one </option>
    <option value="eur/usd">EUR/USD</option>
    <option value="usd/jpy">USD/JPY</option>
    <option value="usd/cad">USD/CAD</option>
    <option value="eur/jpy">EUR/JPY</option>
    <option value="eur/chf">EUR/CHF</option>
    <option value="gbp/usd">GBP/USD</option>
    <option value="aud/usd">AUD/USD</option>
    <option value="usd/chf">USD/CHF</option>

    </select><font color="red"><?php echo $selectionError?></font></p>
            </fieldset> <fieldset>
    <p> Date : <input type="datetime" value="<?php echo date("Y-m-d ",$timestamp); ?>"READONLY name="date"/></p>
    <p> Type : <input type="radio" name="type" value="buy">Buy <input type="radio" name="type" value="sell">Sell<font color="red"><?php echo $typeError;?></font></p>
    <p> Size : <input type="number"pattern="[0-9]+([\.|,][0-9]+)?" step="0.01"name="size"/><font color="red"><?php echo $sizeError?></font></p>
    <p> Bid Price : <input id="bidprice" READONLY name="bidprice" type="text" value=""> <font color="red"><?php echo $bidpriceError?></font></p>
    <p>Offer Price<input id="offerprice" READONLY name="offerprice" type="text" value=""><font color="red"><?php echo $offerpriceError?></font> </p>
    <p> Stop Loss : <input type="number"step="any" name="stoploss"/><font color="red"><?php echo $stoplossError?></font></p>
    <p> Take Profit : <input type="number"step="any"name="takeprofit"/><font color="red"><?php echo $takeprofitError?></font></p>
    </fieldset>
    <div align="center">
    <input type="submit" value="Submit"/>
    </div>
    <?php endif; ?>
    </form>

Answer 1

我建议使用JQuery

$('input[type=submit]').click(function(e) {
    e.preventDefault();
    $.post("tradeform.php", $(this).parents('form').serialize(), function(response) {
        *INSERT RESPONSE HANDLER HERE*
    });
});

显然，用按钮替换输入类型提交更加清晰，以避免必须使用preventDefault（）。

您的处理程序可能会显示错误消息，隐藏表单或执行您希望的其他操作。由于您的表单相对简单，您是否考虑过使用内置于HTML5表单的错误消息？ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML

如何在提交时显示错误并在页面上保留DIV（特殊框）

1 个答案: