Question

我正在将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提交了表单而不是单击提交，提交单击就是提交单击，对吗？

Answer 1

首先，这个问题仅涉及JS，不涉及PHP，

关于您的原始问题，JS提交和用户单击之间没有区别，真正的区别仅在于触发提交操作的事件（事件click或change，其中{{1} }是触发事件的dom。）

建议使用evt.target绑定事件，而不是直接使用addEventListener属性，它将看起来像这样：

onchange

请尝试以下解决方案：

1。修正输入名称：

从此：

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

为此，根据您的问题，它们都应为小写：

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

2。修复您的JS onclick实现：

从此：

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

为此，根据您的问题，他们应该指向// 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;，还要注意最后一行的索引（idx sub_id不存在，应该是[1][3]）：< / p>

[0][3]

3。执行相同的提交功能

从此更改HTML：

  // 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;

对此：

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

还...

只需确保没有其他修改输入值的操作，就可以在触发onchange之后立即打印它们，就像这样...并且还可以延迟提交并再次打印它们，这应该可以使正在发生的事情好看： / p>

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

Answer 2

存在一些事件驱动功能来更新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>

Answer 3

Php无法检测到DOM中发生了什么，哪个事件触发了表单提交。

Php是服务器端，只能检测表单发送到服务器的内容。

您可能有一些js更改了发布的值。

Answer 4

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

document.getElementsByName('subscribe_check')[1][3].selected = true;1

此"editor.suggestFontSize": 16将产生错误，因为只有一个名为“ subscribe_check”的元素，因此没有索引1。

Answer 5

首先，您需要引用正确的元素以取消选择任何选定的项目，在这种情况下，您要引用表单（实际上甚至不是表单，而是包含表单的nodeList）。 document.getElementsByName('subscribe_check')返回一个没有selectedIndex属性的nodeList，因此document.getElementsByName('subscribe_check').selectedIndex将始终返回未定义的值。
我不确定您为什么要取消选择选择值，而无需取消选择就直接将其设置为所需值就足够了。
无需获取option元素并通过.selected = true;进行设置，只需更改选择元素的selectedIndex，即document.getElementsByName('sub_id')[0].selectedIndex = 3
A hidden field let web developers include data that cannot be seen or modified by users，因此与其他脚本相比，隐藏的输入值发生了100％的变化。
发送一个事件以触发所有用于选择框（包括表单提交）的处理程序，即 document.getElementsByName('sub_id')[0].dispatchEvent(new Event('change')); 我想这也会使隐藏的输入也更改其值。

php区分javascript和用户点击？

5 个答案:

1。修正输入名称：

2。修复您的JS onclick实现：

3。执行相同的提交功能

还...