Отправка формы сообщения PHP и работа с Vue. js только для проверки полей "в реальном времени" - PullRequest
Новая
       7

Отправка формы сообщения PHP и работа с Vue. js только для проверки полей "в реальном времени"

0 голосов
/ 26 мая 2020

Основная идея - работать с vue. js только для проверки полей "в реальном времени". Но форма будет отправлена ​​только PHP методом POST. Проблема в том, что vue. js принимает всю форму и не позволяет php продолжить процесс.

Мой код (одностраничный) тест. php: 

<?php
  if(!empty($_POST['name'])){
    //do something
  }
?>

<form method="POST">
  <div id="app">
    <b-container>
      <b-form-group horizontal :label-cols="4" description="Let us know your name." label="Enter your name">
        <b-form-input id="input-live" v-model="name" :state="nameState"
                            aria-describedby="input-live-help input-live-feedback" placeholder="Enter your name" trim>
        </b-form-input>
        <b-form-invalid-feedback id="input-live-feedback">
          Enter at least 3 letters (english only)
        </b-form-invalid-feedback>
      </b-form-group>
    </b-container>
  </div>
  <input type="submit">
</form>


<script type="text/javascript">
  function get_data_from_url(url) {
    var http_req = new XMLHttpRequest();
    http_req.open("GET", url, false);
    http_req.send(null);
    return http_req.responseText;
  }
 window.app = new Vue({
   el: '#app',
   data: {
     name: ''
   },
   computed: {
     nameState() {
       var url = "core/valid.php?name=" + encodeURIComponent(this.name);
       var data_obj = JSON.parse(get_data_from_url(url));
       return (data_obj['status'] == "success") ? true : false;
     }
   },
   data() {
     return {
       name: ''
     }
   }
});
</script>



<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Required scripts -->
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

Ответы [ 2 ]

2 голосов
/ 26 мая 2020

Проблема в том, что вы не вводите name. Так что ваш if if(!empty($_POST['name'])) никогда ничего не сделает.

Если вы добавите name="name" к b-form-input, он должен работать.

Фрагмент, который я использовал для тестирования локально, который работает. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>

  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
</head>

<body>
  <?php
  if (!empty($_POST['name'])) {
    echo "Form submitted";
  }
  ?>

  <form method="POST">
    <div id="app">
      <b-container>
        <b-form-group horizontal :label-cols="4" description="Let us know your name." label="Enter your name">
          <b-form-input name="name" id="input-live" v-model="name" :state="nameState" aria-describedby="input-live-help input-live-feedback" placeholder="Enter your name" trim>
          </b-form-input>
          <b-form-invalid-feedback id="input-live-feedback">
            Enter at least 3 letters (english only)
          </b-form-invalid-feedback>
        </b-form-group>
      </b-container>
    </div>
    <input type="submit">
  </form>

  <!-- Required scripts -->
  <script src="//unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <script>
    window.app = new Vue({
      el: '#app',
      computed: {
        nameState() {
          return this.name.length > 3 ? true : false;
        }
      },
      data() {
        return {
          name: ''
        }
      }
    });
  </script>
</body>

</html>
0 голосов
/ 26 мая 2020

Это должно работать так, как вы ожидаете. Я создал jsfiddle с вашим кодом, но изменил две вещи:

  1. Вы определили данные два раза в разных формах, поэтому я удалил один из них
  2. Я разместил скрипт над тегом сценария vue, так как это вызвало ошибки. Вы проверили свою консоль js?
  3. Я поместил return true в функцию nameState

Теперь он просто отправляет форму на https://google.com

Я подозреваю, что что-то пошло не так с вашей функцией проверки, и после этого она не отправит форму, потому что что-то заблокировало ее.

Убедитесь, что вы проверили свою js консоль, поскольку я считаю, что что-то пошло не так с вашим проверочным вызовом.

https://jsfiddle.net/1tz9wb7e/2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...