如何通过VueJSJavascript在php文件中提交表单？

问题描述

我有一个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

如何为新的Submit按钮（Vue）编写一种方法，使我的Vue值位于上方，并用它们填充屏幕顶部的PHP表单，然后提交PHP表单？

解决方法

这是可以提供帮助的概念证明。 假设这是您的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方法仅使用香草JS来更新和submit旧表单。