Question

我正在研究一个页脚生成器。看起来像这样：

此“预览”按钮有2个功能，功能1是发布用户在黑匣子中输入的值，如下所示：

，第二个函数是向我展示一个名为“button-form-control-generate”的按钮（默认情况下用css隐藏），其中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();

        ?>

我听说这是可能的ajax，但我不知道在这种情况下我是如何尝试在互联网上看的..

Answer 1

如果表单中有type="submit"，则默认情况下会提交表单。请尝试使用<input type="button"。然后你可以在按钮动作上使用ajax，它将在不刷新页面的情况下运行。

以下是如何使用ajax的示例：

＆＃13;

function sendAjax() {
  var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
  url: root + '/posts/1',
  method: 'GET'
}).then(function(data) {
  $(".result").html(JSON.stringify(data))
});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="button" onclick="sendAjax()" value="callAjax" />
  <div class="result"></div>
  </form>

＆＃13;

Answer 2

添加

return false;

到最后的jQuery函数。有了这个，你可以避免提交。

然后你需要添加一个ajax函数，它将表单中的数据发送到你已经使用过的php脚本。

这只是一个例子：

$.ajax({
            url: "YOUR-PHP-SCRIPT"
        }).done(function (content) {
            // ADD HERE YOUR LOGIC FOR THE RESPONSE
        }).fail(function (jqXHR, textStatus) {
            alert('failed: ' + textStatus);
        });

Answer 3

所以你必须向php发送$ .ajax发布请求。像这样：

<script>
$('.form-control').click(function() {
    $.post(url, {data}, function(result) {
         footerPreview();
    }, 'json');
});
</script>

当你的php返回结果时，将调用footerPreview。

Answer 4

//添加javascript

function isPostBack()
{
   return document.referrer.indexOf(document.location.href) > -1;
}

if (isPostBack()){
   $("button.form-control-generate").show();
}

Answer 5

你可以创建一个index.php：

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

            <h3>Select your trademark</h3>

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

            <h3>Your company name</h3>

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

                <br/>
                <br/>

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

<div class="output" id="output">

</div>


<script type="text/javascript">
    $('#generate').on('click', function(e){

        e.preventDefault();
        var companyname = $('#cn').val();
        var trademark = $('#tm').val();

        $.ajax({
            url: 'process.php',
            type: 'post'.
            data: {'company':companyname,'trademark':trademark},
            dataType: 'JSON',
            success: function(data){
                $('#output').append("<div id='footer_date'>"+data.trademark + " " + data.date + " " + data.company + " </div>");
            },
            error: function(){
                alert('Error During AJAX');
            }
        });

    })
</script>

和process.php：

<?php

date_default_timezone_set('UTC');

$trademark = $_POST["trademark"];

$company = $_POST["company"];

$date = date("Y");

$array = array(
    'trademark' => $trademark,
    'company' => $company,
    'date' => $date
);

echo json_encode($array);

?>

确保index.php和process.php位于同一文件夹下.. ex.public_html / index.php和public_html / process.php

提交页面但不要刷新

5 个答案: