提交按钮刷新页面

时间:2016-10-20 09:38:44

标签: php jquery html

我正在使用页脚生成器。 看起来像这样: enter image description here

这"预览"按钮有2个功能功能1是发布用户在黑匣子中输入的值,如下所示:

enter image description here

,第二个功能是向我显示一个按钮(默认情况下用css隐藏),名为" button-form-control-generate"像这样的jquery:

$("button.form-control").click(function(event){
    $("button.form-control-generate").show();
});

现在我的问题出现了:

如果我点击预览它会刷新页面..所以,如果我点击预览,它会显示隐藏按钮1秒钟,然后刷新页面,按钮返回隐藏状态。所以我尝试删除type="submit",但如果我这样做它不会像在图像2中那样发布输入的数据,它会显示隐藏的按钮,但因为提交类型已经消失,所以不会将输入的数据发布到黑匣子。

这是我的代码:

<form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" action="">
                    <option></option>
                    <option>©</option>
                    <option>™</option>
                    <option>®</option>
                </select>

            <h3>Your company name</h3>

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

                <br/>
                <br/>

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




<!-- script for the preview image -->

        <div id = "output">
        <?php

        function footerPreview ()
        {
            date_default_timezone_set('UTC');

            $trademark = $_POST["trademark"];

            $company = $_POST["companyName"];

            $date = date("Y");

            echo "<div id='footer_date'>$trademark $date $company </div>";
        }

        footerPreview();

        ?>

jquery:

$("button.form-control").click(function(event){
    $("button.form-control-generate").show();
});

已尝试阻止默认但如果我这样做,则用户输入的数据不会显示在预览框中。看起来像preventdefault阻止这一点工作:

<!-- script for the preview image -->

        <div id = "output">
        <?php

        function footerPreview ()
        {
            date_default_timezone_set('UTC');

            $trademark = $_POST["trademark"];

            $company = $_POST["companyName"];

            $date = date("Y");

            echo "<div id='footer_date'>$trademark $date $company </div>";
        }

        footerPreview();

        ?>

4 个答案:

答案 0 :(得分:1)

如果您不想发布表单,可以使用preventDefault();功能。

&#13;
&#13;
$("button.form-control").click(function(event) {
  event.preventDefault();
  $("button.form-control-generate").show();
});
&#13;
&#13;
&#13;

答案 1 :(得分:0)

$("button.form-control").click(function(event) {
 event.preventDefault();
 setTimeout(function(){$("button.form-control-generate").show();},100);
 });

尝试一次

答案 2 :(得分:0)

的形式提交表单
$('.form').on('submit', function(e){
    $("button.form-control-generate").show();
    e.preventDefault();
    this.submit();
})

而不是使用click事件。使用提交类型的按钮,submit()动作会自动触发,因此您可以在提交处理程序中显示您的按钮,然后阻止默认操作刷新页面。

更新:

除了使用php,你也可以使用jquery做同样的事情。

&#13;
&#13;
$('.form').on('submit', function(e){
  e.preventDefault();
   var date = new Date();
   date = date.getYear() + 1900;
   var data = $(this).serializeArray();
 
  var str = data[0].value + date + data[1].value;
  $('#output').text(str);
  $('.form-control-generate').show();
})
&#13;
.form-control-generate {
  display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" action="">
                    <option></option>
                    <option>©</option>
                    <option>™</option>
                    <option>®</option>
                </select>

            <h3>Your company name</h3>

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

                <br/>
                <br/>

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




<!-- script for the preview image -->

        <div id = "output"></div>
        
&#13;
&#13;
&#13;

答案 3 :(得分:0)

@ShubhamKhatri几乎做对了

问题是,他认为这是一个提交事件,我不相信它应该是。我相信你在错误的按钮上输入了type =“submit”。当然preview不会提交表格?您想在generate上提交,不是吗?

因此对标记略有改动 - 添加了一个id来预览以简化生活

<button class="form-control" id="preview">
    Preview
</button>
<br/>
<button class="form-control-generate" type="submit" name="submit">
    Generate
</button>

并对@ShubhamKhatri中的代码稍作修改

$("#preview").click(function(e) {
    e.preventDefault();
    var date = new Date();
    date = date.getYear() + 1900;
    var data = $('.form').serializeArray();

    var str = data[0].value + ' ' + date + ' ' + data[1].value;
    $('#footer_date').text(str);
    $('.form-control-generate').show();
});

etvoilà