传递Check Checkbox的值，并在数组上显示第一个值

我在PHP程序上需要帮助。

我在我的testing.php

内有2个表格

主形式名为" Mainform"
另一种形式是名为"模量"的复选框

我的程序正常工作。如果单击禁用的文本框，将弹出包含复选框表格的模式。如果只有1个复选框，我将在残疾的文本框上显示其文本标签

简而

我尝试了很多条件，但我仍然没有得到它。任何人都帮我。

这是我的外观，就像代码

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

希望你们能帮助我。我想知道如何将复选框的价值传递给我的主角。非常感谢您。

我尝试了该代码，在模态表单的"提交"按钮和id =" test_modal []"复选框中设置ID =" submit"，我使用了我在标题<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <script type="text/javascript">
    $(document).ready(function(){
    $("#submit").click(function(e) {
      //  var checked = [];
        i=0;
        temp=""
$("input[name='test_modal[]']:checked").each(function ()
{   temp=$(this).val();
    i++;
   // checked.push($(this).val());
});
if (i==1)
      $("#test").val(temp);        
  else if (i>1)
      $("#test").val('multiple');
                 $("#modal").fadeOut();  
                // alert($("#do").val())
    e.preventDefault();
});
});</script>

这是几个情况下可能会发现对问题有用的样本。

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

javascript变量以形成变量：

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

javaScript：您只需使用JS解决这个问题。为此，您必须将action -Atibute替换为form -TAG中的action="#"。要了解有关那里的主题标签的更多信息，请查找此链接。

之后，您必须在提交表单时调用JS功能。您可以将onSubmit="countCheckboxes()"添加到<form> -Attribute中。这意味着，如果表格提交，则该JS功能将执行。现在，您只需要创建一个称为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库（查看本文以了解如何在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();
});

您还想计算所有检查的复选框。您可以将其与上面的功能结合在一起，因为您想在用户命中"提交"时对复选框进行计数。计算盒子的jQuery路将是：

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

使用此值，您现在可以使用if else设置<input> -Field的值（请记住现在删除disabled -Attribute）。

相关内容

最新更新

热门标签：