Question

Okay, I’m creating a challenge system on a website. I will list out in each step what happens to get to where the submit button will be in hopes this helps make it easier to understand..

There is a challenge button listed beside each user of the website page.

When you click the challenge button a MODAL window pops up displaying each of that users characters. Each character listed in the modal window has its own challenge button underneath the character details and to the left of each character is a drop-down menu that lists your characters. (The current logged in user that is viewing the page)

Now what I want is the logged in user has to select one of their characters from the dropdown before the challenge button activates the server side code/function/whatever it needs to be.

Once the logged in user has selected one of their characters from the drop down menu. They can click the challenge button and it will activate a function that I have already made that will create a custom_post_type and then upload a generic featured image which the featured image will be displayed on the homepage slider.

After that, another POP-UP happens on screen saying Challenge Successful or Not. Keep in mind this is already in a MODAL window so it would be a popup over a popup so to speak.

I know virtually zip about javascript and I’m hoping this can be done strictly with PHP. I’ve read that using isset makes it possible but I’ve not figured out how to successfully do it yet.

Something like….

if(isset($_POST['challenge']))
{

  all of the code that happens after successful click goes here.

}

My current code for the button is this…

<div class="challenge_button">                           
    <form action="<?php $_SERVER['PHP_SELF'];?>" method="post">                                         
        <input type="button" name="challenge" value="Challenge">        
    </form>                                                   
</div>

Example code for the drop down:

Choose Your Champion

<select name="contender">                                                            
   <option value="0"> ----- </option>                                                        
   <option value="1">1</option>                                                            
   <option value="2">2</option>         
   <option value="3">3</option>                                                      
   <option value="4">4</option>                                         
   <option value="5">5</option>                                             
   <option value="6">6</option>                                             
   <option value="7">7</option>                                             
   <option value="8">8</option>                                         
</select>

Now how would I tie all of this together if at all possible?

Something like…………..

<div class="challenge_button">  
    <?php                        
        if (((((drop-down is set return true & grab which option was set and save as variable)))))
        {
            <form action="<?php $_SERVER['PHP_SELF'];?>" method="post">                                         
                <input type="button" name="challenge" value="Challenge">        
            </form>
        }
        else
        {
            echo 'You must setup a champion before you can challenge someone.';
            echo 'div class="setup">';
            echo 'You can setup your champion <a href="#">here<a>';
            echo '</div>';
        }
    ?>
</div>

then…………….

if the code runs successfully a popup over the modal window. I dont want the page to refresh or go to another page. Just a popup saying Challenge Successful or unsuccessful if certain variables aren’t met.

Went with an alternative solution that isn’t as cool. Even in this method the colorbox don’t work blah.

The javascript:

<script language="JavaScript">
    function loadPage(list) 
    {
        location.href=list.options[list.selectedIndex].value  
    }
</script>

The Variables:

                                            $cuser  =   wp_get_current_user();
                                            $v1     =   get_cimyFieldValue($cuser->ID, 'character_name');
                                            $v2     =   get_cimyFieldValue($cuser->ID, 'character_name2');
                                            $v3     =   get_cimyFieldValue($cuser->ID, 'character_name3');
                                            $v4     =   get_cimyFieldValue($cuser->ID, 'character_name4');
                                            $v5     =   get_cimyFieldValue($cuser->ID, 'character_name5');
                                            $v6     =   get_cimyFieldValue($cuser->ID, 'character_name6');
                                            $v7     =   get_cimyFieldValue($cuser->ID, 'character_name7');
                                            $v8     =   get_cimyFieldValue($cuser->ID, 'character_name8');
                                            $add    =   'http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/single-challenge.php?';
                                            $metak  =   'class="zoom cboxelement"';
$challenged =   $v['toon_name'];

The Form:

                                                    <form>
                                                        Choose Your Champion:
                                                        <select name="contender"
                                                            size="1"
                                                            onchange="loadPage(this.form.elements[0])"
                                                            target="_parent._top"
                                                            onmouseclick="this.focus()">
                                                                <option value="0"></option>
                                                                <?php if ($v1){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v1.'"'.$metak.'>'.$v1.'</option>';}?>
                                                                <?php if ($v2){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v2.'"'.$metak.'>'.$v2.'</option>';}?>
                                                                <?php if ($v3){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v3.'"'.$metak.'>'.$v3.'</option>';}?>
                                                                <?php if ($v4){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v4.'"'.$metak.'>'.$v4.'</option>';}?>
                                                                <?php if ($v5){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v5.'"'.$metak.'>'.$v5.'</option>';}?>
                                                                <?php if ($v6){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v6.'"'.$metak.'>'.$v6.'</option>';}?>
                                                                <?php if ($v7){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v7.'"'.$metak.'>'.$v7.'</option>';}?>
                                                                <?php if ($v8){echo '<option value="'.$add.'challenged='.$challenged.'&challenger='.$v8.'"'.$metak.'>'.$v8.'</option>';}?>
                                                        </select>
                                                    </form>

Answer 1

First of all, there is an error in your code, which is the following: <form action="<?php $_SERVER['PHP_SELF'];?>" method="post"> will always return <form action="" method="post">, as $_SERVER is an array which have to be echoed: use this <?php echo $_SERVER['PHP_SELF'];?>

Then, as code for your php this works well: it receives two vars from POST, and if the contender (which is the select) contains a value different from 0, it will put it inside the $contender variable. At this point, you can use this variable in your function.

<?php if(!isset($_GET['challenge'])): ?>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Choose Your Champion:

<select name="contender">                                                            
   <option value="0"> ----- </option>                                                        
   <option value="1">1</option>                                                            
   <option value="2">2</option>         
   <option value="3">3</option>                                                      
   <option value="4">4</option>                                         
   <option value="5">5</option>                                             
   <option value="6">6</option>                                             
   <option value="7">7</option>                                             
   <option value="8">8</option>                                         
</select>
<div class="challenge_button">                           
        <input type="submit" name="challenge" value="Challenge">                                                  
</div>
    </form>
<div id="result">
</div><?php endif; ?>
<?php

if ($_POST['contender']!=="0" &&        // So, the select has to be selected
    isset($_POST['challenge'])) {       // And so does the button (however you can drop this condition)
    // |    This variable contains the user's choice (from 1 to 8)
    // v
    $contender = $_POST['contender'];
    // Here goes your code or function...
}

Now, if you want this to return an OK or an error whithout reloading the page, you have to use AJAX. For example, you could use a JS function like this:

<script type="text/javascript">
function loadXMLDoc(btn, contender) {
var ajax;

// Code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
    ajax=new XMLHttpRequest();
} else { // code for IE6, IE5
    ajax=new ActiveXObject("Microsoft.XMLHTTP");
}

ajax.onreadystatechange=function() {
if (ajax.readyState==4 && ajax.status==200) {
    document.getElementById("result").innerHTML=ajax.responseText;
}
}
ajax.open("GET","<?php echo $_SERVER['PHP_SELF'];?>?challenge=" + btn + "&contender=" + contender, true);
ajax.send();

}
</script>

Together with this button:

<input type="button" id="challenge" name="challenge" value="Challenge" onclick="loadXMLDoc(document.getElementById('challenge').value, document.getElementById('contender').options[document.getElementById('contender').selectedIndex].value)">

What it does is getting the current values of the select and of the input (this is rather for thoroughness, you could remove it), and passing them to the loadXMLDoc() function, which will transfer them directly to the PHP using GET method (there’s no reason to use POST). The PHP will do whatever you want with the select value, and eventually return an OK or an error. For instance:

<?php    
if ($_GET['contender']!=="0" && isset($_GET['challenge'])) {
    $contender = $_GET['contender'];
    // Here goes your code...
    echo "All done.";
} else
    echo "Something went wrong.";

You could possibly direct that output to your lightbox/popup to create your second modal window.

Also, I would suggest making all that AJAX stuff with jQuery, it makes it way easier.