Отправить страницу, но не обновить

Question

Я работаю над генератором нижнего колонтитула. который выглядит следующим образом:

Эта кнопка «Предварительный просмотр» имеет 2 функции функция 1 является размещение значения, которые пользователь ввел в черный ящик, как это:

и вторую функцию чтобы показать мне кнопку (которая скрыта по умолчанию с помощью CSS) под названием «кнопка-форма контроля генерировать» с JQuery, как это:

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

N ow здесь приходит моя проблема:

Если я нажму на предварительный просмотр, он обновит страницу .. поэтому, если я нажму на предварительный просмотр, она отобразит скрытую кнопку примерно на 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

Добавить

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 2

если у вас есть a type="submit" внутри формы, он будет отправлять форму по умолчанию. Вместо этого попробуйте использовать <input type="button". Затем вы можете использовать ajax для действия кнопки, которая будет работать без обновления страницы.

Вот пример того, как использовать 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>

Answer 3

Так что вы должны сделать запрос пост $ .ajax в PHP. Что-то вроде этого:

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

Так footerPreview будет вызываться, когда ваш PHP возвращает результат.

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