Как передать как идентификатор, так и значение ввода в функцию JS в HTML? - PullRequest
0 голосов
/ 02 августа 2020

Я очень старался исправить эту проблему, но я не JS программист, поэтому мне пока не удалось. Мне нужно написать правильный код в моем HTML, чтобы передать идентификатор и значение ввода в функцию JS. Вот мой JS код:

    <script>
    function live_update(id,str) {
      if (str.length==0) { 
        document.getElementById("live_update").innerHTML="";
        document.getElementById("live_update").style.border="0px";
        document.getElementById("live_update").style.display="none";
        return;
      }
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
        if (this.readyState==4 && this.status==200) {
          document.getElementById("live_update").innerHTML=this.responseText;
          document.getElementById("live_update").style.class="bg-light";
          document.getElementById("live_update").style.display="block";
        }
      }
      xmlhttp.open("GET","profiles.php?act=live_update&u_key={u_key}&id="+id+"&q="+str,true);
      xmlhttp.send();
    }
</script>

А вот мой HTML код

<input type="text" onfocusout="live_update(document.getElementById('{id}').value,document.getElementById('quantity').value)" name="quantity[]" id="9" value="{quantity}" class="sm-input-40"/>

Ответы [ 3 ]

0 голосов
/ 02 августа 2020

Это простой пример того, что вам не нужно слишком усложнять вещи, в этом случае вы можете просто передать элемент в обработчик onfocusout. Я прокомментировал ваш код блока logi c и сделал для вас пример для захвата значения и идентификатора этого элемента .. hth

function live_update( el ) {
  var str = el.value ;
  /*
  if (str.length == 0) {
    document.getElementById("live_update").innerHTML = "";
    document.getElementById("live_update").style.border = "0px";
    document.getElementById("live_update").style.display = "none";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("live_update").innerHTML = this.responseText;
      document.getElementById("live_update").style.class = "bg-light";
      document.getElementById("live_update").style.display = "block";
    }
  }
  */
  console.log( 'Value: ', el.value, ', ID: ', el.id )
//  xmlhttp.open("GET", "profiles.php?act=live_update&u_key={u_key}&id=" + id + "&q=" + str, true);
//  xmlhttp.send();
}
<input type="text" onfocusout="live_update( this )" name="quantity[]" id="9" value="{quantity}" class="sm-input-40" />
0 голосов
/ 02 августа 2020

Прежде всего, в JS вы не можете использовать селектор numeri c id. Это вызовет ошибку.

Как все уже упоминали, они не знают, откуда берется {id}. Очевидно, это происходит из какого-то PHP end template / html скрипта. Но это абсолютно barbari c. У вашего поля должен быть идентификатор, вы привязываете свое событие к идентификатору или используете классы, если у вас несколько полей. Затем вы обнаруживаете событие onfocusout в этом поле как прослушиватель и соответственно обрабатываете его содержимое. Если у вас есть какие-то требования к настраиваемой переменной, вы можете использовать атрибуты в поле ввода.

В вашем поле ввода также есть [], который указывает на то, что таких полей больше? Но у вас есть значение id .. Странно. Я думаю, что для полного ответа на этот вопрос вам необходимо предоставить более подробную информацию о том, где и как используется этот скрипт.

Javascript:

// NOTE: Numeric ids should be avoided imo.
const nine = document.querySelector('#nine')

// Detect onfocusout event on field #9
nine.onfocusout = (e) => {
    
    let
    
        // Get the value of the field:
        nine_value = nine.value,
        
        // Get the {id} attribute:
        nine_id = nine.getAttribute('data-id'),
        
        // Get the {u_key} value from somewhere??
        nine_ukey = nine.getAttribute('data-ukey')
    
    // Check if the value is empty:
    if (!nine_value) {
        document.getElementById("live_update").innerHTML="";
        document.getElementById("live_update").style.border="0px";
        document.getElementById("live_update").style.display="none";
        return;
    }
    
    // As it seams, that your error checking is done above only.. yes there should be more of it..
    // Then we can continue with the ajax call using fetch api:
    fetch('profiles.php?act=live_update&u_key=' + nine_ukey + '&id=' + id + '&q=' + nine_value).then(r => r.json().then(d => {
        
        // This is checking the backend readystate thingy:
        if (d.readyState == 4) {
            // The return payload comes as d variable. So if you send back JSON,
            // which is handled above, then your response text looks about like this: d.responseText
            document.getElementById("live_update").innerHTML=d.responseText;
            document.getElementById("live_update").style.class="bg-light";
            document.getElementById("live_update").style.display="block";
        }

    // Errors are however handled like this:
    })).catch(err => console.log('Error: ' + err))
}

HTML:

<!-- Numeric ids should be avoided, so we use #nine instead and you can put your {id} into an attribute.-->
<!-- Also since you didnt provide further context about the script, then I will be removing the [] from quantity. -->
<input type="text"  name="quantity" id="nine" data-id="{id}" data-ukey="{u_key}" value="{quantity}" class="sm-input-40"/>

Надеюсь, я ничего не пропустил, я закодировал это вслепую. Обратите внимание на Fetch API и настраиваемые атрибуты .

0 голосов
/ 02 августа 2020

Посмотрев ваш код, я вижу, что вы используете {id}. Я не знаю, что это такое, но есть способ сделать это по-другому. Вместо {id}, фактически вместо всего document.getElementById, вы можете просто передать this, который будет считаться элементом элемента, вызываемого кодом. Кроме того, я вижу здесь небольшую ошибку, которую вы допустили.

document.getElementById("live_update").innerHTML=this.responseText;
document.getElementById("live_update").style.class="bg-light";      // Here
document.getElementById("live_update").style.display="block";

Вы не можете изменить класс с помощью стиля. Вы должны использовать classList. Измените его на это: document.getElementById ("live_update"). ClassList.add ("bg-light");

Надеюсь, я помог вам решить вашу проблему :)

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