如何通过 VueJS (Javascript) 在 php 文件中提交表单？答案

【问题标题】：How can I submit a form in a php file through VueJS (Javascript)?如何通过 VueJS (Javascript) 在 php 文件中提交表单？
【发布时间】：2020-12-27 20:49:25
【问题描述】：

我有一个 PHP 文件，其中包含一个表单和一个表格，看起来像这样：

printf ("<form action=\"%s\" method=post>", $PHP_SELF); //this is the url
printf ("<input type=hidden name=user_id value=\"%s\">", $user_id);
printf ("<input type=hidden name=holiday_year_id value=\"%s\">", $holiday_year_id); 
printf ("<input type=\"text\" size=9 name=holiday_taken_from_date  value=\"%s\">", $from_date);
printf ("<input type=\"text\" size=9 name=holiday_taken_to_date  value=\"%s\">", $to_date);
printf ("<input type=submit name=submit_request_holiday_dates value=Submit>")
echo "</form>";

一个关键点是这一行：

printf ("<input type=submit name=submit_request_holiday_dates value=Submit>")

当前提交表单时，此行设置了一个名为$submit_request_holiday_dates 的变量。当页面重新加载时，该变量会在 IF 语句中被捕获，并且该过程中的下一个屏幕将呈现给用户。

我的问题

作为现代化应用程序的一部分，我在 Vue 中重建了这个表单。

我的意图是使用我注入到 php 页面中的新 Vue 表单，并隐藏通过“echo”显示的旧内联表。这将使我能够在对应用程序进行现代化改造的同时继续使用所有旧的 PHP 逻辑。

this.url,
this.userId,
this.holidayYear,
this.fromDate,
this.toDate

如何为我的新提交按钮 (Vue) 编写一个方法，该方法采用上面的 Vue 值并用它们填充屏幕顶部的 PHP 表单，然后提交 PHP 表单？

【问题讨论】：

标签： javascript php html vue.js

【解决方案1】：

这是一个可以提供帮助的概念证明。假设这是您的 Vue 表单应用程序：

var newForm = new Vue({
  el: '#new-form',
  data: {
    fromDate: null,
    toDate: null,
    oldForm: null
  },
  mounted:function(){
    /* when mounted, get old Php form */
    this.oldForm = document.forms[0]; // depends on how your html is structured
    /* hide old form */
    this.oldForm.style.display = "none";
    /* copy old form data */
    this.fromDate = this.oldForm.holiday_taken_from_date.value;
    this.toDate = this.oldForm.holiday_taken_to_date.value;
    /* etc... */
  },
  methods:{
    sendForm: function(){
      /* let's say this is the method invoked by the Vue form on submit */
      /* update old PHP form */
      this.oldForm.holiday_taken_from_date.value = this.fromDate;
      this.oldForm.holiday_taken_to_date.value = this.toDate;
      /* then submit the old form */
      this.oldForm.submit();
    }
  }
});

基本上，你的 Vue 方法只是使用 vanilla JS 来更新和submit 旧形式。

【讨论】：