提交激活PHP功能的按钮

时间:2012-04-16 12:21:18

标签: php javascript ajax wordpress onclick

好的,我正在网站上创建一个挑战系统。我将在每个步骤中列出将要提交到提交按钮的位置,这有助于使其更容易理解...

网站页面的每个用户旁边都有一个挑战按钮。

当您单击挑战按钮时,会弹出一个MODAL窗口,显示每个用户角色。模态窗口中列出的每个字符在字符详细信息下方都有自己的挑战按钮,每个字符的左侧是一个列出字符的下拉菜单。 (正在查看页面的当前登录用户)

现在我想要的是登录用户必须在挑战按钮激活服务器端代码/功能/无论需要什么之前从下拉列表中选择一个角色。

登录用户从下拉菜单中选择了其中一个字符。他们可以单击挑战按钮,它将激活我已经创建的将创建custom_post_type的功能,然后上传一个通用的特色图像,特色图像将显示在主页滑块上。

之后,屏幕上会出现另一个POP-UP,表示Challenge Successful or Not。请记住,这已经在一个MODAL窗口中了,所以它可以是弹出窗口弹出窗口。

我知道关于javascript的几乎zip,我希望这可以用PHP严格完成。我已经读过使用isset使它成为可能但我还没弄明白如何成功地做到这一点。

像......那样的东西。

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

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

}

我目前的按钮代码是......

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

下拉列表的示例代码:

选择你的冠军

<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">  
    <?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>

然后................

如果代码在模态窗口上成功运行弹出窗口。我不希望页面刷新或转到另一页。只是一个弹出窗口说挑战成功或不成功,如果不满足某些变量。

找到一种不那么酷的替代解决方案。即使在这种方法中,颜色框也不起作用。

javascript:

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

变量:

                                            $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'];

表格:

                                                    <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>

4 个答案:

答案 0 :(得分:2)

如果您希望它只是没有Javascript的PHP,则必须牺牲“必须不刷新”约束,因为提交表单的唯一方法是按下按钮,然后提交内容。

然而,通过一些Javascript,您可以使用AJAX之类的东西使挑战按钮工作。工作流程可能是这样的:

页面加载, MODAL(?)弹出窗口打开, 用户点击“挑战”, 表单提交给服务器(使用XMLHTTPRequest或其他类似AJAX的机制),

同时: 页面定期检查服务器是否有质询请求(再次是AJAX),并相应地显示消息。

希望这有帮助

答案 1 :(得分:1)

首先,您的代码中存在错误,如下所示:<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">将始终返回<form action="" method="post">,因为$_SERVER是必须回显的数组:use这个<?php echo $_SERVER['PHP_SELF'];?>

然后,作为你的php的代码,这很好用:它从POST接收两个变量,如果contender(这是select)包含一个不同于0的值,它将把它放在{{ 1}}变量。此时,您可以在函数中使用此变量。

$contender

现在,如果您希望在没有重新加载页面的情况下返回OK或错误,则必须使用AJAX。例如,您可以使用这样的JS函数:

<?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...
}

与此按钮一起:

<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>

它的作用是获取选择和输入的当前值(这是为了彻底,你可以删除它),并将它们传递给<input type="button" id="challenge" name="challenge" value="Challenge" onclick="loadXMLDoc(document.getElementById('challenge').value, document.getElementById('contender').options[document.getElementById('contender').selectedIndex].value)"> 函数,它将它们直接传递给PHP使用GET方法(没有理由使用POST)。 PHP将使用select值执行任何操作,并最终返回OK或错误。例如:

loadXMLDoc()

您可以将该输出定向到灯箱/弹出窗口以创建第二个模态窗口。

另外,我建议用jQuery制作所有AJAX的东西,这样会更容易。

答案 2 :(得分:0)

我想你想要这样的东西

<script>
$("#challenge").click(function(){
$.post("page",{"name":"value"},function(response){})
});
</script>
<div class="challenge_button">                                                       
        <input type="button" id="challenge" name="challenge" value="Challenge">                                                         
</div>

答案 3 :(得分:0)

你不能像这样使用PHP,如果你想做类似的事情,你必须使用PHP Ajax。在这里,您可以找到帮助您了解Ajax的链接。

http://www.w3schools.com/php/php_ajax_database.asp