提交页面但不刷新

I'm working on a footer generator. Which looks like this: enter image description here

This "preview" button has 2 functions function 1 is posting the values that the user entered in the black box like this :

enter image description here

and the second function is to show me a button(which is hidden by default with css) called "button-form-control-generate" with jquery like this:

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

Now here comes my problem:

If i click on preview it refreshes the page.. so if i click on preview it shows the hidden button for like 1 second then it refreshes the page and the button goes back to hidden. So i tried removing the type="submit" but if i do that it wont post the entered data like it did in image 2 it will show the hidden button though, but because the submit type is gone it wont post the entered data on the black box.

Here is my code:

<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();

        ?>

The jquery:

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

Already tried prevent default but if i do this the users entered data doesnt show in the preview box. Looks like preventdefault stops this bit from working:

<!-- 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();

        ?>

I heard this is possible with ajax, but i have no idea how in this case i already tried to look on the internet..

5个回答


如果表单中有 type =“ submit” </ code>,则默认情况下它将提交表单。 尝试改用 。 然后,您可以在按钮操作上使用ajax,该操作将在不刷新页面的情况下运行。</ p>

这是一个如何使用ajax的示例:</ p>

</ p>



 函数sendAjax(){
   var root ='https://jsonplaceholder.typicode.com';
$ .ajax({
   网址:root +'/ posts / 1',
   方法:“获取”
})。then(function(data){
   $(“。result”)。html(JSON.stringify(data))
});
} </ code> </ pre>
   &lt;/ script&gt;</p>

<p>&lt;表格&gt;<br>
   <input type =“ button” onclick =“ sendAjax()” value =“ callAjax” /><br>
   <div class =“ result”> &lt;/ div&gt;<br>
   &lt;/ form&gt; &lt;/ code&gt; &lt;/ pre&gt;<br>
 &lt;/ div&gt;<br>
 &lt;/ div&gt;</p>

<p>     &lt;/ div&gt;</p>

展开原文

原文

if you have a type="submit" inside a form, it will submit the form by default. Try to use <input type="button" instead. Then you can use ajax on the button action, that will run without refreshing the page.

Here's an example of how to use ajax:

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

</div>


添加</ p>

 返回false;
</ code> </ pre>

最后显示您的jQuery函数。 这样可以避免提交。</ p>

然后,您需要添加一个ajax函数,该函数会将表单中的数据发送到您已经使用的php脚本中。</ p>

这只是一个例子:</ p>

  $。ajax({
             网址:“ YOUR-PHP-SCRIPT”
         })。done(函数(内容){
             //在此处添加响应信息
         })。fail(函数(jqXHR,textStatus){
             alert('failed:'+ textStatus);
         });
</ code> </ pre>
     </ div>

展开原文

原文

Add

return false;

to your jQuery-function at the end. With this you can avoid the submit.

Then you need to add an ajax-function, which sends the data from your form to the php-script you already use.

This is just an example:

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


因此,您必须向PHP执行$ .ajax发布请求。 像这样:</ p>

  <br>
 $(&#39;。form-control&#39;)。click(function(){<br>
     $ .post(url,{data},function(result){<br>
          footerPreview();<br>
     },&#39;json&#39;);<br>
 });<br>
 &lt;/ script&gt;<br>
 &lt;/ code&gt; &lt;/ pre&gt;</p>

<p><p>因此,当您的PHP返回结果时,将调用<code> footerPreview &lt;/ code&gt;。&lt;/ p&gt;<br>
     &lt;/ div&gt;</p>

展开原文

原文

So you have to do $.ajax post request to the php. Something like this:

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

So footerPreview will be called when your php returns result.


//添加javascript </ p>

 函数isPostBack()
{
    返回document.referrer.indexOf(document.location.href)> -1;
}

如果(isPostBack()){
    $(“ button.form-control-generate”)。show();
}
</ code> </ pre>
     </ div>

展开原文

原文

//add in javascript

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

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

you can create an 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>

and the 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);

?>

Be sure that the index.php and the process.php will be under the same folder.. ex.public_html/index.php and public_html/process.php

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问