myModal 表单在一页上打开，但是当使用相同的 id 时，它不会从主页打开

Question

我正在尝试制作一个在公益页面上运行良好的捐赠表格，当用户单击 header 中的按钮时也会显示。从原因页面，当我使用 data-target '#CausemyModal2' 它工作正常，但是当我将 '#CausemyModal2' ID 添加到主页按钮上的 data-target 时，它不会打开任何东西。但是，在主页按钮上，如果我将 data-target 设置为“#myModal”，它将打开一个不是我想要的表单。文件的相关部分将在下面。非常感谢，如果我没有包括需要的东西，请告诉我，我会提供。

Functions-theme.php(没有的形式)

<div class="right-header">
<?php if(isset($cs_theme_option['header_donation_button']) &&                       $cs_theme_option['header_donation_button'] == 'on'){?>
<a href="#" class="btn cs-bgcolr" data-toggle="modal" data-target="#myModal"><?  php if($cs_theme_option['trans_switcher'] == "on"){     _e('Support us','WeStand');}else{ echo $cs_theme_option['donation_btn_title']; }     ?></a>

page_cause.php（有效的形式）

<span class="progress-box-left"><?php if($cs_theme_option['trans_switcher'] == "on"){ _e('Raised','WeStand');}else{ echo $cs_theme_option['cause_raised'];  }?> <?php echo $cs_theme_option['paypal_currency_sign'];?><?php echo number_format($payment_gross);?></span>
            </div>
            <?php if( isset($cs_node->cause_view) && $cs_node->cause_view == "small" ){?>
                <?php if(isset($cause_status) && $cause_status <> ''){
                            echo '<span class="btn cs-btn-donate cs-bgcolrhvr">'.$cause_status.' </span>';

} else {?>
                    <a href="#" class="btn cs-btn-donate cs-bgcolrhvr" data-toggle="modal" data-target="#CausemyModal2<?php echo $post->ID;?>"><?php if($cs_theme_option['trans_switcher'] == "on"){ $trans_featured = _e('Donate Now','WeStand');}else{ echo $cs_theme_option['cause_donate']; }?></a>
                 <?php }?>

functions.php

if($cs_theme_option['trans_switcher'] == "on"){ $cause_donate = __('Donate Now','WeStand');}else{ $cause_donate = $cs_theme_option['cause_donate']; }
CausemyModal
?>

    <div class="modal fade cs-donation-form" id="CausemyModal2<?php echo $cause_id;?>" tabindex="-1" role="dialog">

      <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="fa fa-times-circle"></i> </button>

                <i class="fa fa-money"></i>

                <h2><?php echo $cause_donate;?></h2>

            </div>

            <div class="modal-body">

                <h4><?php if($cs_theme_option['trans_switcher'] == "on"){ _e('Donation via authorise.net from your visitors','WeStand');}else{ echo $cs_theme_option['header_support_button_text_heading3']; }?></h4>

                <ul>

                   <?php 

                    if(isset($cs_theme_option['paypal_payments']) && $cs_theme_option['paypal_payments'] <> ''){

                        $paypal_payments = $cs_theme_option['paypal_payments'];

                        $paypal_payments = explode(',',$cs_theme_option['paypal_payments']);

                    } else {

                        $paypal_payments = array('50','100','200','500','1000');

                    }

                        foreach($paypal_payments as $paypal_payments_value){

                    ?>

                        <li><label class="cs-bgcolrhvr"><?php echo $cs_theme_option['paypal_currency_sign'].$paypal_payments_value;?> <input type="radio" name="donate" value="<?php echo trim($paypal_payments_value);?>"></label></li>

                     <?php }?>

                </ul>

                <script>

                jQuery(document).ready(function($) {

                    jQuery(".cs-donation-form ul li label") .click(function(event) {

                        /* Act on the event */

                        var a = jQuery(this).text().substring(1);

                          jQuery(".cs-donation-form .modal-footer label .cause-amount") .val(a);

                         jQuery(".cs-donation-form ul li label").removeClass("cs-active");

                         jQuery(this).addClass('cs-active');

                         return false;

                    });

                });

                </script>

                <div class="other-options">

                    <span class="opt-or">or</span>

                </div>

            </div>

Answer 1

我不会将 id 属性赋予表单，正是出于这个问题的原因。表单片段可以包含在不同的页面上，这些页面可能已经包含具有相同 ID 的元素。如果遵循 JavaScript 代码：

，我建议为您的表单提供名称属性和参考

var formName = "myDonationForm";
var form = document.forms[formName];

myModal 表单在一页上打开，但是当使用相同的 id 时，它不会从主页打开

myModal form opens on one page but when using the same id it won't open from the homepage

html

javascript

php

forms

wordpress