Question

我创建了这个表单并添加了一些jquery。如果我点击提交，jquery部分应该是一个div节目。它会这样做但只有一次刷新页面并且div返回隐藏状态。我在同一个文件中拥有jquery，php和html中的所有内容。我如何让jquery留下来。

<form class ="form" method="post">
    <h3>Select your trademark</h3>
        <select class="form-control" name="trademark">
            <option></option>
            <option>©</option>
            <option>™</option>
            <option>®</option>
        </select>

    <h3>Your company name</h3>
    <input class="form-control" type="text" name="companyName" action="">

        <br/>
        <br/>

    <button class="form-control" type="submit" name="submit">
        Generate
    </button>
</form>

<script>
    $("button.form-control").click(function(){
        $(".codes").show();
    });
</script>

编辑：

尝试使用Jquery防止默认它可以正常运行它没有重新加载但它不会从我页面中的表单发布填充的数据。

Answer 1

将onsbumit="return false"添加到<form>。通过从false处理程序返回onsubmit，您可以阻止提交表单（不会再向服务器发送请求，也不会重新加载页面）。

Answer 2

因为您按下的按钮是type="submit"，它正在运行您的JavaScript并提交表单

有一个javascript函数可以停止默认的提交操作preventDefault()

<script>
    $("button.form-control").click(function(event){
//------------------------------------------^^^^^
        event.preventDefault();
        $(".codes").show();
    });
</script>

或者，您可以从按钮属性中删除type="submit"。

编辑：

这也错了

onclick="loadDoc"()

应该是

onclick="loadDoc()"

Answer 3

您的按钮是一个提交按钮，这意味着在您的JS onclick完成后，表单将照常提交。你必须阻止：

$("button.form-control").click(function(e){
    e.preventDefault();
    etc...

Answer 4

注1：加载jquery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

试试这个：

<input class="form-control" id="generateButton" type="button" value="Generate" name="submit" onclick="loadDoc()">

代替你的按钮代码。

修改jquery代码： <script> $(document).ready(function() { $("#generateButton").click(function(event){ event.preventDefault(); $(".codes").show(); });
});//DOM
</script>

注意：#id选择器比你的代码快得多。注2：如果你想将loadDoc（）函数插入到jquery点击函数....

Jquery在提交后显示一次

4 个答案: