将数组从JavaScript传递到Wordpress中的页面

Question

I have a page in wordpress, that uses an jquery and ajax to get information from an external api. The form sends the array generated in javascript back to the same page with another variable that the php in the page uses to determine which page to display. Outside of wordpress, the code works fine. Inside Wordpress the first portion runs, but then instead of loading the same page again it goes to a search page and says nothing found.

The url on the output is:

http://kltools.net/?s=&post_type%5B%5D=portfolio&post_type%5B%5D=post&post_type%5B%5D=page

Which seems odd considering I'm using post not get.

The javascript that generates the array and submits the form:

function submitchans(){
  for (var i=0;i<chans.length;i++)
  { var newHidInp = document.createElement('input');
        newHidInp.type  = 'hidden';
        newHidInp.name  = 'chans[]';
        newHidInp.value = chans[i];
    form.appendChild(newHidInp);
  }
}
function livearray(input){
    if (input != null) {
    chans.push(input);
    }
    if (Y === cSize){
        submitchans();
        document.forms[0].submit();
    }

}

Previously the array was outArray[] instead of chans[], I changed it thinking that may be triggering the result, but no luck.

This is the PHP portion of the code:

<?php
$page_to_load = $_POST[view];
switch($page_to_load) {
    case '':
        echo "<script src=\"../scripts/jquery-3.2.0.min.js\"></script>";
        echo "<script type=\"application/javascript\" src=\"../scripts/raid.js\"></script>";
        echo "<font size=\"+3\" color=\"#FFFFFF\">Who should I host?<br>Please wait while channel is selected<br></font>";
        echo "<font size=\"+2\">";
        echo "<br><br>";
        echo "<img src=\"../_images/ajax_loader_blue_350.gif\">";
        $servername = "localhost";
        $username = "username";
        $password = "password";
        $dbname = "database";
        $chanarray[] = null;
        $offline = 0;

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $sql = "SELECT `TwitchNames` FROM TK_Members WHERE Validated='1' AND RaidMe='1'";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
             // output data of each row
             while($row = $result->fetch_assoc()) {
                  array_push($chanarray, $row['TwitchNames']);
            }
        } else {
           echo "0 results";
        }
        array_splice($chanarray, 0, 1);
        $conn->close();
        echo "<script type=\"application/javascript\">";
        echo "var channels = ". json_encode($chanarray); 
        echo "</script>";
        echo "</font>";
        echo "<form id=\"form\" method=\"post\">";
        echo "<input type=\"hidden\" name=\"view\" value=\"page2\">";
        echo "</form>";
    break;

    case 'page2':
        echo "<font size=\"+3\" color=\"#FFFFFF\">Who should I host?<br>";
        echo "Your channel to host is:<br></font>";
        echo "<font size=\"+2\">";
        echo "<br><br>";
        $chans[] = null;
        $test = $_POST['chans'];
        foreach ($test as $chan) {
            $temparray = array(rand(),$chan);
            array_push($chans, $temparray);
        }
        array_splice($chans,0,1);
        sort($chans);
        echo "<a href=\"https://twitch.tv/".$chans[0][1]."\" target=\"_blank\">".$chans[0][1]."</a>";
        echo "<br><br><br>";
        echo "<a href=\"whoslive.htm\" target=\"_parent\">See All Live Channels</a>";
        echo "</font>";
    break;
}
?>

After working with what blokeish has suggested I've modified the javascript file working out where the problem is.

The new javascript file is:

// JavaScript Document

var chans = ["test1","test2","test3"];



function submitchans(){
  for (var i=0;i<chans.length;i++)
  { var newHidInp = document.createElement('input');
        newHidInp.type  = 'hidden';
        newHidInp.name  = 'chans[]';
        newHidInp.value = chans[i];
     document.getElementById('chansform').appendChild(newHidInp);
  }
}
jQuery(function ($) {
        submitchans();
        document.getElementById('chansform').submit();

});

Using only the javascript clicking submit, it passes to the next page. When adding in the array pass is when it fails. This is the page log that is returning during the execution. !!--CORRECTION--!! there was a typo in the code, after correcting ID to Id the code is working as intended.

Answer 1

document.forms[0].submit() is likely submitting the wp search form as that could be the first form in the DOM. I see " http://kltools.net/ ? s= " in the URL where "s" is the search term.

Using document.getElementById('idOfForm').submit() should get you around that problem if there are multiple forms in a page and you cant be sure of its index.