Question

所以基本上我在wordpress中制作了一个自定义页面模板，并添加了一些javascript和联系表单。在下面的代码中，唯一相关的代码是表单。和JavaScript。 javascript已经过测试，可以正常使用。 https://jsfiddle.net/607L7p3u/。每当我在wordpress页面上尝试它时它都不起作用。相反，唯一发生的事情是页面刷新，网址更改为/?product1=12&product1=13

代码在这里：

<?php /*Template Name: CutomPageT1*/

global $post,
$mk_options;
$page_layout = get_post_meta( $post->ID, '_layout', true );
$padding = get_post_meta( $post->ID, '_padding', true );


if ( empty( $page_layout ) ) {
    $page_layout = 'full';
}
$padding = ($padding == 'true') ? 'no-padding' : '';

get_header(); ?>
<div id="theme-page">
    <div class="mk-main-wrapper-holder">
        <div id="mk-page-id-<?php echo $post->ID; ?>" class="theme-page-wrapper mk-main-wrapper <?php echo $page_layout; ?>-layout <?php echo $padding; ?> mk-grid vc_row-fluid">
            <div class="theme-content <?php echo $padding; ?>" itemprop="mainContentOfPage">
                <?php if ( have_posts() ) while ( have_posts() ) : the_post();?>





                        <form>
                            <input type="checkbox" id="product1" name="product1" value="12">
                            <input type="checkbox" id="product2" name="product1" value="13">
                            <input type="checkbox" id="product3" name="product1" value="14">
                            <button type="submit">Subscribe</button>
                        </form>






                        <div class="clearboth"></div>
                        <?php wp_link_pages( 'before=<div id="mk-page-links">'.__( 'Pages:', 'mk_framework' ).'&after=</div>' ); ?>
                <?php endwhile; ?>
            </div>
            <?php
                if(isset($mk_options['pages_comments']) && $mk_options['pages_comments'] == 'true') {
                    comments_template( '', true );  
                }
            ?>
        <?php if ( $page_layout != 'full' ) get_sidebar(); ?>
        <div class="clearboth"></div>
        </div>
        <div class="clearboth"></div>
    </div>  
</div>
                        <script>
                            var form = document.querySelector('form');
                            form.addEventListener('submit', e => {
                            e.preventDefault();
                            const values = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
                            .map(item => item.value)
                            .join(',');
                             console.log('test.com/addtocart?${values}');
                            });

                            //test
                            console.log('Lekker spelen');
                        </script>

<?php get_footer(); ?>

Answer 1

我通过使用＆＃34; onsubmit＆＃34;

将函数链接到表单来解决它

<form onSubmit="return handleClick()">
                        <input type="checkbox" id="product1" name="product1" value="12">
                        <input type="checkbox" id="product2" name="product1" value="13">
                        <input type="checkbox" id="product3" name="product1" value="14">
                        <button type="submit">Subscribe</button>
                    </form>

然后将我现有的JS代码包装在一个javascript函数中：

function handleClick(){
                            const form = document.querySelector('form');
                            form.addEventListener('submit', e => {
                            e.preventDefault();
                            });
                            const values = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
                            .map(item => item.value)
                            .join(',');
                             console.log('test.com/addtocart?'+values);
                        }

JavaScript无法在Wordpress中运行

1 个答案: