Как передать идентификатор в JavaScript (getElementByID), если идентификатор в моем входном теге генерируется выводом php / mysql? - PullRequest
Новая
       7

Как передать идентификатор в JavaScript (getElementByID), если идентификатор в моем входном теге генерируется выводом php / mysql?

0 голосов
/ 28 ноября 2018

Заранее спасибо за помощь.

Я пытаюсь выполнить поиск по всем идентификаторам в следующем, чтобы увидеть, были ли данные выбраны пользователем.

<input id=\"".$row['childName']."\" type=\"checkbox\" name=\"foodData[]\"  value=\""$row['foodCalories']"\"><label> If this is selected </label>

<label><input id=\"".$row['careHome']."\" type=\"checkbox\" name=\"lifestyle\"  value=\"".$row['sportActivities']."\"\>this should be checked too.. </label>

<script> function lastResort(){
    var x = document.getElementById(\"".$row['childName']."\).value; \\this is unrecognised

    var y = document.getElementById(\"".$row['careHome']."\"); \\ unrecognised

    (... function to checkboxes..) <-- this part works
} </script>;

Я также обнаружил, что если я скомпрометирую и оставлю идентификатор одинаковым (например, word = \"eat\") для всех значений, он запускает функцию только для первой строки результатов.

1 Ответ

0 голосов
/ 28 ноября 2018

Прежде всего, я бы посоветовал вам не выводить строки.Попробуйте использовать простой метод представления для рендеринга вещей.Это облегчает вам редактирование HTML и предотвращает все ошибки символов без кавычек и т. Д., Что вы можете получить. 

class Controller 
{
    public function makePartial($file, $vars = []) 
    {
        extract($vars);
        ob_start();
           include($file);
        $output = ob_get_clean();
        return $output;
    }
    public function render() 
    {
        return '';
    }
}

Тогда, по вашему мнению, вы получите что-то вроде этого

view.html 

<input id="<?= $row['childName'] ?>" type="checkbox" name="foodData[]"  value="<?= $row['foodCalories'] ?>"\><label> If this is selected </label>

<label><input id="<?= $row['careHome'] ?>" type="checkbox" name="lifestyle"  value="<?= $row['sportActivities'] ?>"\>this should be checked too.. </label>

<script>
    function lastResort(){
        var x = document.getElementById("<?= $row['childName']?> ").value; \\this is unrecognised

    var y = document.getElementById("<?= $row['careHome']?>").value; \\ unrecognised

    (... function to checkboxes..) <-- this part works
};
</script>

То, что вы можете отрендерить, расширяя контроллер 

class foodController extends Controller 
{
    protected function getRows() 
    {
       // magic to get rows
       return $rows;
    }
    public function render() 
    {
       $output = [];
       $rows = $this->getRows();
       foreach($rows as $row) {
          $output[] = $this->makePartial('view.html', ['row' => $row]);
       }
       return implode('', $output);
    }
}

, что в итоге приведет к выводу типа 

<input id="childName" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<button id="clickme">Click me</button>
<script>
    function lastResort(){
        var x = document.getElementById("childName").value; //this is unrecognised

        var y = document.getElementById("careHome").value; //unrecognised
        console.log(x, y);
    };
    document.getElementById('clickme').addEventListener('click', lastResort);
</script>

Разделив поток рендеринга на отдельные идентификаторы или сохранив их в отдельном массиве, вы можете выполнить то, что вы хотите.

Я бы посоветовал сохранитьидентификаторы в отдельном массиве и рендеринг javascript в отдельном представлении.

row.html 

<input id="<?= $childName ?>" type="checkbox" name="foodData[]"  value="<?= $foodCalories ?>"\><label> If this is selected </label>

<label><input id="<?= $careHome ?>" type="checkbox" name="lifestyle"  value="<?= $sportActivities ?>"\>this should be checked too.. </label>

javascript.html 

<script>
    function lastResort(){
         <?php foreach($rows as $row): ?>
             if(document.getElementById('<?=$row['childName']?>').checked) {
                   document.getElementById('<?=$row['careHome']?>').checked = true;
             }
             else {
                   document.getElementById('<?=$row['careHome']?>').checked = false;
             }
         <?php endforeach; ?>
    }
};
</script>

Который вы можете визуализировать с помощью 

class foodController extends Controller 
{
    protected function getRows() 
    {
       // magic to get rows
       return $rows;
    }
    public function render() 
    {
       $output = [];
       $rows = $this->getRows();
       foreach($rows as $row) {
          $output[] = $this->makePartial('row.html', $row);
       }
       $output[] = $this->makePartial('javascript.html', $rows);
       return implode('', $output);
    }
}

Что бы вывести как 

<input id="childName1" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome1" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<input id="childName2" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome2" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<input id="childName3" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome3" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<input id="childName4" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome4" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<button id="clickme">Click me</button>
<script>
    function lastResort(){
        if(document.getElementById('childName1').checked) {
            document.getElementById('careHome1').checked = true;
        }
        else {
            document.getElementById('careHome1').checked = false;
        }
        if(document.getElementById('childName2').checked) {
            document.getElementById('careHome2').checked = true;
        }
        else {
            document.getElementById('careHome2').checked = false;
        }
        if(document.getElementById('childName3').checked) {
            document.getElementById('careHome3').checked = true;
        }
        else {
            document.getElementById('careHome3').checked = false;
        }
        if(document.getElementById('childName4').checked) {
            document.getElementById('careHome4').checked = true;
        }
        else {
            document.getElementById('careHome4').checked = false;
        }
    };
    document.getElementById('clickme').addEventListener('click', lastResort);
</script>
...