防止页面刷新在PHP表单提交？

Question

我有一个页面（http://qccr.dyndns.org:82/on-air-schedule），访客可以在其中单击一周中的某一天，并显示我们电台当天的时间表。 唯一的问题是发生这种情况时页面会完全刷新； 如果只更改页面中心的日程表，而不更改整个页面，那会更好。 我对javascript不太了解...有没有简单的方法可以做到这一点？

相关的代码在这里（我认为）：

    <?php



    <div class="date-input-form">
        <form action="" method="post" id="ddateform" >
            <input type="hidden" name="ddate" id="ddate" size="11" maxlength="10" value="" />
            <?php echo JHTML::_( 'form.token' ); ?>
        </form>
    </div>


    <div id="navcontainer">

    <ul id="navlist">
    <?php if($currentday=="Monday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('monday')); ?>'; document.getElementById('ddateform').submit();">Monday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Tuesday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('tuesday')); ?>'; document.getElementById('ddateform').submit();">Tuesday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Wednesday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('wednesday')); ?>'; document.getElementById('ddateform').submit();">Wednesday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Thursday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('thursday')); ?>'; document.getElementById('ddateform').submit();">Thursday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Friday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('friday')); ?>'; document.getElementById('ddateform').submit();">Friday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Saturday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('saturday')); ?>'; document.getElementById('ddateform').submit();">Saturday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Sunday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('sunday')); ?>'; document.getElementById('ddateform').submit();">Sunday</a></li>
    <?php endif; ?>

    </ul>
</div>

Answer 1

我对PHP不太了解，因此请多加考虑。

HTML表单默认不会在提交时刷新页面。 某种原因（我猜是PHP）导致生成HTML表单，从而导致表单提交时刷新页面。

我不确定Barry的答案是否会起作用，但是如果您想尝试一下，请使用以下代码替换Monday li的代码：

用你的格式

<?php if($currentday=="Monday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('monday')); ?>'; document.getElementById('ddateform').submit(); return false;">Monday</a></li>
<?php endif; ?>

具有理智的格式化

<script type="text/javascript">
    function onMondayClick(event) {
        document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('monday')); ?>';
        document.getElementById('ddateform').submit();
        return false;
    }
</script>

<?php if($currentday=="Monday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick=onMondayClick>Monday</a></li>
<?php endif; ?>

Answer 2

在您调用的任何javascript函数中，都return false; 以防止默认行为。

<a onclick="dothis(); return false;" href="#">Click Me</a>

-要么-

<a onclick="dothis();" href="#">Click Me</a>
<script type="text/javascript">
  function dothis() { /* stuff here */ return false; }
</script>

了解一些javascript基础知识，将为您服务:)

Answer 3

您可以使用jquery post函数和/或通过ajax调用来发布formdata来执行此操作