9

我将 javascript 注入 PHP 网站以避免弹出窗口，自动提交表单。此外，jquery 存在问题，因此我使用的是纯 javascript。

这是页面上的表格：

<form action='http://mywebsite.com/index.php?&act=MYFUNCTION&CODE=01&CookieDate=1' name='subscribe_check' method='POST'>
<input type='hidden' name='value1' value='dynamicallygenerated'>
<input type='hidden' name='Value2' value='BlogSection'>
<input type='hidden' name='Value3' value='BlogName'>
<select class='forminput' name='sub_id' onchange='this.form.submit()'>
<option value='------------' selected='selected'>To read this article, you must choose a subscription level</option>
<option value='1'>Subscribe to daily updates</option>
<option value='2'>Subscribe to promotional emails</option>
<option value='3'>No thanks, I'm not interested in being healthy</option>
</select>
</form>

这是我的 JavaScript：

  // unselect any selected item on the SELECT
  if( document.getElementsByName('subscribe_check').selectedIndex )
    document.getElementsByName('subscribe_check')[document.getElementsByName('subscribe_check').selectedIndex].selected = false;

  // select select the last option
  document.getElementsByName('subscribe_check')[1][3].selected = true;
  // submit the form
  document.forms[0].submit();

当我手动单击表单时，我知道这些值已设置

  value1: dynamicallygenerated
  value2: HealthyFoodSection
  value3: HealthyFoodFunBlog

但是当我的javascript提交表单时，这些值被提交

  value1: dynamicallygenerated
  value2: BlogSection
  value3: BlogName

我 100% 确定没有其他 javascript 正在触发以更改值 - 不能直接onchange调用submit()。

我不明白为什么我的 javascript 提交表单不会像手动单击它那样更改值？如果发生 PHP，我不明白它是如何检测到我的 javascript 提交表单而不是我点击提交，提交点击是提交点击，对吧？

4

5 回答 5

6

首先，这个问题只是关于 JS，不涉及 PHP，

关于您的原始问题，JS提交和用户点击之间没有区别，真正的区别只是触发提交操作的事件（事件click或change，evt.targetdom在哪里触发事件）。

作为建议，使用addEventListener而不是直接使用onchange属性绑定您的事件，它看起来像这样：

document.getElementsByName('sub_id')[0].addEventListener("onchange", function(evt) {
    document.forms[0].submit();
});

请尝试以下解决方案：

1.修复输入名称：

由此：

<input type='hidden' name='Value2' value='BlogSection'>
<input type='hidden' name='Value3' value='BlogName'>

对此，根据您的问题，它们都应该是小写：

<input type='hidden' name='value2' value='BlogSection'>
<input type='hidden' name='value3' value='BlogName'>

2. 修复你的 JS onclick 实现：

由此：

  // unselect any selected item on the SELECT
  if( document.getElementsByName('subscribe_check').selectedIndex )
    document.getElementsByName('subscribe_check')[document.getElementsByName('subscribe_check').selectedIndex].selected = false;
  // select select the last option
  document.getElementsByName('subscribe_check')[1][3].selected = true;

对此，根据您的问题，他们应该指向sub_id，还要注意最后一行索引（idx[1][3]不存在，应该是[0][3]）：

  // unselect any selected item on the SELECT
  if( document.getElementsByName('sub_id').selectedIndex )
    document.getElementsByName('sub_id')[document.getElementsByName('sub_id').selectedIndex].selected = false;
  // select select the last option
  document.getElementsByName('sub_id')[0][3].selected = true;

3.执行相同的提交功能

从此更改您的 HTML：

<select class='forminput' name='sub_id' onchange='this.form.submit()'>

对此：

<select class='forminput' name='sub_id' onchange='document.forms[0].submit()'>

还...

只是为了确保在触发 onchange 后没有其他任何东西修改您的输入值打印它们，就像这样......并且还延迟提交并再次打印它们，这应该可以很好地了解正在发生的事情：

document.getElementsByName('sub_id')[0].addEventListener("onchange", function(evt) {
    console.log(document.getElementsByName('value2'), document.getElementsByName('value3'));
    setTimeout(function() {
         console.log(document.getElementsByName('value2'), document.getElementsByName('value3'))
         document.forms[0].submit();
    },100);
});
于 2019-04-17T18:34:40.133 回答
3

更新Value2和Value3涉及一些事件驱动的功能，当您通过js提交表单时它不起作用。

为了解决这个问题，您需要自己触发事件

    function autoFormSubmit(){
        var selectElement = document.querySelector('form[name="subscribe_check"] select[name="sub_id"]');//get the element
        selectElement.addEventListener('change',onchangeEventListener) //attaching onchange  Listener, you can do this in document ready function, if you have any
        selectElement.selectedIndex = selectElement.length -1;//choose last item
        selectElement.dispatchEvent(new Event('change'))//trigger change event;

    }

    function onchangeEventListener(event){ //change event listener
        event.preventDefault();
        var form = this.form;
        setTimeout(function(){
            form.submit();
        },500)//wait few milliseconds before submitting form
    }

你可以删除 

 onchange='this.form.submit()'

表单html代码

完整代码

var selectElement;

function autoFormSubmit() {
    selectElement.selectedIndex = selectElement.length - 1; //choose last item
    selectElement.dispatchEvent(new Event('change')) //trigger change event;

}

function onchangeEventListener(event) { //change event listener
    event.preventDefault();
    var form = this.form;
    setTimeout(function () {
        form.submit();
    }, 500) //wait few milliseconds before submitting form
}

document.onreadystatechange = function () {
    if (document.readyState === "complete") { //page is loaded 
        selectElement = document.querySelector('form[name="subscribe_check"] select[name="sub_id"]'); //getting element
        selectElement.addEventListener('change', onchangeEventListener) //attaching listner
        autoFormSubmit();
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body>
  <form action='http://mywebsite.com/index.php?&act=MYFUNCTION&CODE=01&CookieDate=1' name='subscribe_check' method='POST'>
    <input type='hidden' name='value1' value='dynamicallygenerated'>
    <input type='hidden' name='Value2' value='BlogSection'>
    <input type='hidden' name='Value3' value='BlogName'>
    <select class='forminput' name='sub_id'>
      <option value='------------' selected='selected'>To read this article, you must choose a subscription level</option>
      <option value='1'>Subscribe to daily updates</option>
      <option value='2'>Subscribe to promotional emails</option>
      <option value='3'>No thanks, I'm not interested in being healthy</option>
    </select>
  </form>
</body>

</html>

于 2019-04-21T11:22:32.420 回答
3

PHP 只是服务器端，因此无法检测 DOM 中发生了什么，这意味着它不知道是哪个事件触发了表单提交。

您可能有一些 JS 正在更改发布的值。

于 2019-04-17T09:12:12.300 回答
0
  1. 首先，您需要引用正确的元素来取消选择任何选定的项目，在您的情况下，您正在引用表单（实际上甚至不是表单，而是包含表单的 nodeList）。document.getElementsByName('subscribe_check')返回一个没有selectedIndex属性的节点列表，所以document.getElementsByName('subscribe_check').selectedIndex总是返回一个未定义的。
  2. 我不确定您为什么要取消选择选择值，因为直接将值设置为所需值而不取消选择就足够了恕我直言。
  3. 无需获取option元素并通过.selected = true;更改选择元素的 selectedIndex 来设置它，即document.getElementsByName('sub_id')[0].selectedIndex = 3
  4. 隐藏字段允许 Web 开发人员包含用户无法查看或修改的数据，因此隐藏的输入值与其他脚本 100% 更改。
  5. 调度一个事件来触发选择框的所有处理程序（包括表单提交），即 document.getElementsByName('sub_id')[0].dispatchEvent(new Event('change')); 我猜这将使隐藏的输入也改变它们的值。
于 2019-04-23T19:57:44.847 回答
0

可能没有其他js在玩，但是html中的另一种形式呢？如图所示，此代码将提交这些值：

value1: dynamicallygenerated
value2: BlogSection
value3: BlogName

这document.getElementsByName('subscribe_check')[1][3].selected = true;1会报错，因为只有一个名为 'subscribe_check' 的元素，所以没有索引 1。

于 2019-04-12T12:06:58.833 回答