Php различие между JavaScript и щелчком пользователя? - PullRequest
10 голосов
/ 12 апреля 2019

Я внедряю 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 отправил форму, а я нажал кнопку "Отправить", щелчок "Отправить" - это щелчок "Отправить", верно?

Ответы [ 5 ]

6 голосов
/ 17 апреля 2019

Во-первых, этот вопрос касается только JS, PHP не задействован,

В исходном вопросе нет разницы между отправкой JS и щелчком пользователя, реальной разницей будет только событие, инициирующее действие submit(события click или change, где evt.target - это дом, инициирующий событие).

В качестве рекомендации привязайте ваши события, используя 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 * 1029)* не существует, оно должно быть [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);
});
3 голосов
/ 21 апреля 2019

существует некоторая управляемая событиями функциональность для обновления 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>
1 голос
/ 17 апреля 2019

Php не может обнаружить, что произошло в DOM, какое событие вызвало отправку формы.

Php находится на стороне сервера и может определять только то, что форма отправляет на сервер.

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

0 голосов
/ 23 апреля 2019
  1. Прежде всего вам нужно обратиться к нужному элементу, чтобы отменить выбор любого выбранного элемента, в вашем случае вы ссылаетесь на форму (фактически даже не на форму, а на nodeList, содержащий форму).document.getElementsByName('subscribe_check') возвращает nodeList, у которого нет свойства selectedIndex, поэтому document.getElementsByName('subscribe_check').selectedIndex всегда будет возвращать неопределенное значение.
  2. Я не уверен, почему вы отменяете выбор значения, потому что непосредственно устанавливаетеИМХО будет достаточно значения до нужного значения без отмены выбора.
  3. Нет необходимости получать элемент option и устанавливать его с помощью .selected = true;, просто измените selectedIndex элемента select, то есть document.getElementsByName('sub_id')[0].selectedIndex = 3
  4. Скрытое поле позволяет веб-разработчикам включать данные, которые пользователи не могут просматривать или изменять. , поэтому скрытые входные значения на 100% отличаются от других сценариев.
  5. Отправка события для запуска всехобработчики для поля выбора (включая отправку формы), т. е. document.getElementsByName('sub_id')[0].dispatchEvent(new Event('change')); Я полагаю, что скрытые входные данные также изменят свои значения.
0 голосов
/ 12 апреля 2019

Возможно, в игре нет других js, но как насчет другой формы в html?Как показано, этот код будет отправлять эти значения:

value1: dynamicallygenerated
value2: BlogSection
value3: BlogName 

И этот document.getElementsByName('subscribe_check')[1][3].selected = true;1 выдаст ошибку, потому что существует только один элемент с именем 'subscribe_check', поэтому индекс 1.

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