Question

我的php程序需要帮助。

我的testing.php中有2个表单

名为“mainform”的主要表单
另一个表格带有名为“modalForm”的复选框

我的程序就像这样。如果单击禁用的文本框，将弹出一个包含带复选框的表单的模式。如果只有一个复选框被检查我将在我的禁用文本框上显示它的文本标签，否则如果检查超过2，我将在禁用的文本框上显示值“多个”。

简而言之，我只在UI上显示textlabel，同时将其值插入/更新到系统数据库中。

我尝试了很多条件但仍然没有得到它。有人帮我请。

这是我看起来像代码

testing.php

<form method="post" name="mainform" action="">
        <label>TestLabel</label>
        <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
            <input disabled type="text" name="test" placeholder="test" value="">
        </a>
    </form>

    <form method="post" name="modalForm" id="modalForm" action="testing.php">
        <div class="modalwrapper" id="modal">   <!-- modal -->
                <div class="modalcontainer">    
                    <div class="modalcol1">
                        <label>Test 1</label>
                        <input type="checkbox" name="test_modal[]" value="mark">
                        <div class="clear"></div>
                        <label>Test 2</label>
                        <input type="checkbox" name="test_modal[]" value="joe">
                        <div class="clear"></div>
                        <label>Test 3</label>
                        <input type="checkbox" name="test_modal[]" value="kevin">
                        <div class="clear"></div>
                        <label>Test 4</label>
                        <input type="checkbox" name="test_modal[]" value="michael">
                        <div class="clear"></div>
                        <label>Test 5</label>
                        <input type="checkbox" name="test_modal[]" value="jordan">
                        <div class="clear"></div>

                        <div class="savebutton">
                            <input class="btn1" type="submit" value="Submit"/>
                        </div>
                    </div>
                </div>
            <div class="overlay"></div>
        </div>      
    </form>

styles.css的

/* modal layout */
    .modalwrapper {
        top: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        visibility: hidden;
        box-shadow: 0 3px 7px rgba(0,0,0,.25);
        box-sizing: border-box;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
    }

    .modalwrapper:target {
        opacity: 1;
        visibility: visible
    }

    .overlay {
        background-color: #000;
        background: rgba(0,0,0,.8);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .modalcontainer {
        display: table;
        background-color: #777;
        position: relative;
        z-index: 100;
        color: #fff;
        padding: 5px;
    }

    .modalcol1 { display: table-cell; }

    .clear { clear: both; }

    .modalwrapper input[type=checkbox] {
        float: right;
        margin-right: 20px;
    }

    .savebutton input[type=submit] {
        float: right;
        background-color: maroon;
        color: #fff;
        border: none;
        padding: 5px 10px;
        margin-top: 5px;
        margin-right: 20px;
    }
    /* modal layout ends here */

希望你们能帮助我。我想知道如何传递mainform上复选框的值。非常感谢你。

Answer 1

以下是您可能会发现对您的问题有用的几个案例的示例。

PHP变量到Javascript变量：

<?php   $myvar=10;   ?>

<script type="text/javascript">
    jsvar = <?php echo $myvar; ?>;
    document.write(jsvar);  // Test to see if its prints 10:
</script>

表单变量为Javascript变量：

<form name="myform4">    <input type="hidden" name="formvar" value="100">     </form>

<script type="text/javascript">
    jsvar = document.myform4.formvar.value;
    document.write(jsvar) // test
</script>

PHP变量到Form变量：

<form name="myform4">
    <input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>"> // PHP code inside HTML!!
</form>

Javascript变量到Form变量：

<form name="myform3">
    <!-- It needn't be a "hidden" type, but anything from radio buttons to check boxes -->
    <input type="hidden" name="formvar" value="">
</form>

<script type="text/javascript">
    jsvar=10;
    document.myform3.formvar.value = jsvar;
</script>

Answer 2

<强> JavaScript的：你可以用JS解决这个问题。为此，您必须将action - form - 标记中的属性替换为action="#"。要详细了解该标签，请查看this链接。

之后，您必须在提交表单时调用JS函数。你可以通过向onSubmit="countCheckboxes()" - 属性添加<form>来做到这一点。这意味着，如果表单被提交，则执行此JS-Function。现在，您只需要创建一个名为countCheckboxes()的新JS函数。在那里，您可以使用以下行计算所选复选框：

alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

立即检查，如果只选中一个或多个复选框，并设置<input>的值。

提示：

获取唯一复选框的值，您必须重新构建HTML，如下所示：

<label>
    Step 1
    <input type="checkbox" ... />
</label>
<label>
    Step 2

...

然后使用复选框获取标签中的（第一个也是唯一一个）文本，如下所示：

document.querySelectorAll('input[type="checkbox"]:checked')[0].parentElement.textContent

<强> jQuery的：要打开和关闭你的模态，你应该使用JS。我建议你使用jQuery库（查看this文章，了解如何在JS中使用jQuery）。有了它，您只需使用.fadeIn()和.fadeOut()打开和关闭模态。事实上，这里我们有另一个问题：通常在jQuery中，你可以检查是否有点击这个代码：

$("#idOfYouElement").click(function() {
    // this code gets executed if the element got clicked
});

但是在你的情况下，input被禁用并且不会触发clickevent，这导致.click() - 函数也没有被执行。要解决此问题，我们在输入上放置<div>，这是透明的，因此用户看不到它。然后我们将.click() - 函数添加到此div而不是input。这看起来像这样：

HTML：

<form method="post" name="mainform" action="">
    <label>TestLabel</label>
    <input type="text" id="inpCheckboxes" name="test" placeholder="test" value="" disabled >
</form>

JavaScript的：

$("#inpCheckboxes").click(function(){
    $("#idOfYourModal").fadeIn();
});

在此之后，我们必须在单击提交按钮后关闭模式。有多种解决方案，对我来说，使用.submit()的这个是最干净的：

$("#idOfYourForm").submit(function() {
    $("#idOfyourModal").fadeOut();      // Since your Modal is also your Form, you could also use here $(this).fadeOut();
});

您还需要计算所有选中的复选框。您可以将此功能与上述功能结合使用，因为您希望在用户点击“提交”时计算复选框。计算theboxes的jQuery方法是：

var l = $("input[type='checkbox']:checked").length;

使用此值，您现在可以使用if else设置<input> - 字段的值（请记住立即删除disabled - 属性）。

Answer 3

我尝试了代码，在模态窗体的提交按钮设置了id =“submit”，在复选框设置了id =“test_modal []”，我使用了jquery的一些函数，我在标题cookies <设置了/ p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

传递check复选框的值并显示数组上的第一个值

3 个答案: