代码之家 › 专栏 › 技术社区 › Kevin.a

javascript在Wordpress中不起作用

wordpress javascript

Kevin.a · 技术社区 · 8 年前

因此,基本上我在wordpress中创建了一个自定义页面模板,并向其中添加了一些javascript和一个联系人表单。在下面的代码中,唯一相关的代码是表单。还有javascript。javascript已经过测试,可以正常工作。 https://jsfiddle.net/607L7p3u/ .每当我在wordpress页面上尝试时,它都不起作用。相反,唯一发生的事情是页面被刷新,url更改为 /?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(); ?>

1 回复 | 直到 8 年前

Kevin.a 8 年前

我通过使用“onsubmit”将函数链接到表单来解决这个问题

<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);
                        }