在javascript中使用的已发布变量'如果'声明立即消失

时间:2015-07-21 15:56:19

标签: javascript php css forms

我在我的页面上运行了表单,这些表单将数据发布到php文件,导致已发布的项目显示在购物车中:

<form method="post"><fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-name" value="is716" />
<input type="hidden" name="my-item-price" value="10" />

<input id="716" type="submit" name="my-add-button" value="&nbsp" />is716</input>

</fieldset></form>

然后我在页面底部放置一个脚本,它基本上切换控件,以便根据以前的选择进一步选择:

if (name == 'is716') {
document.getElementById('716b').style.display = 'none';
document.getElementById('716c').style.display = 'inline';

}else{
document.getElementById('716b').style.display = 'none';
document.getElementById('716c').style.display = 'inline';}

问题是上面的脚本if语句,名称==&#39;是716&#39;显然只有在你点击提交时才变为真实。 css会改变并闪烁一秒钟,表明该语句确实有效,然后它就会消失。我可以通过添加&#39; return false&#39;来进行更改。但这会阻止提交表单和更新数据,这完全忽略了这一点。有没有办法提交数据,但也有价值&#39;坚持&#39;?

如果语句再次更改,我怎样才能进行此更改?

编辑: 这是页面的代码:          

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>jCart - Free Ajax/PHP shopping cart</title>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" media="screen, projection" href="jcart/css/jcart.css" />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'> </script>

    <style type="text/css"> 
        input.add {
        background-image: url('off.png');
        width: 12px;
        height: 12px;
        border: 0;
        cursor: pointer;
                }
                </style>
</head>
<body>
<div id="wrapper">
        <div id="sidebar">
        <div id="jcart"><?php $jcart->display_cart();?></div>
        </div>
        <div id="content">

            <form method="post"><fieldset>
                    <input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
                        <input type="hidden" name="my-item-id" value="1" />
                    <input type="hidden" name="my-item-name" value="is716" />
                    <input type="hidden" name="my-item-price" value="5000" />
                    <input type="hidden" name="my-item-partn" value="716" />
                    <input type="hidden" name="my-item-qty" value="1" size="3" />


        <input id="716a" type="submit" name="my-add-button" class="add" value="&nbsp" />
        <a id="716b" href="addtocart.php?jcartRemove[]=1" /><img src="on.png"></a> &nbsp Apples $5<br>
        <br></fieldset></form>

        <div class="clear"></div>

        <?php
        //echo '<pre>';
        //var_dump($_SESSION['jcart']);
        //echo '</pre>';
        ?>
    </div>
        <div class="clear"></div>
</div>



    <script type='text/javascript'>

        $(document).ready(function() { 
        $('input[name=my-add-button]').change(function(){
        $('form').submit();
        });
        });

    </script>
    <script type="text/javascript">
        $('#720').click(function() {
        $('#720click').click();
        });
    </script>
    <script type='text/javascript'>
window.onload = function() {
var myItemName = <?php echo (isset($_POST["my-item-name"])? $_POST["my-item-name"] : ""); ?>;
if (myItemName == "is716") {
    document.getElementById('716a').style.display = 'none';
    document.getElementById('716b').style.display = 'inline';
    }
}

                  

推送到另一页:jcart.php

2 个答案:

答案 0 :(得分:0)

您的表单已发布,因此页面正在重新加载。现在,当重新加载网页时,浏览器会忘记以前的状态,除非您使用某些持久性(如本地存储或其他内容)并检查已保存的数据并自行恢复页面上任何元素的上一阶段。

使用ajax发布数据并从服务器获取信息。这样就可以保留你的风格和状态。

在表单event.preventDefault()上执行submit button click,然后执行ajax call要执行的任何服务器发布活动。应该这样做。

答案 1 :(得分:0)

就像Suman说您的页面已经提交,因此样式会重新加载页面,因此页面会话中对您的样式所做的任何更改都将被重置。

您的问题的解决方案是在表单的php目标页面中设置会话标志。你可以这样做:

<?php
    if (isset($_POST["my-item-name"]) {
        session_start();
        $_SESSION["my-item-name"] = $_POST["my-item-name"];
    }
?>

然后在您的购物车页面上,您会将会话变量回显为JavaScript,以便根据需要切换页面样式:

<?php session_start(); ?>
window.onload = function() {
    var myItemName = <?php echo $_SESSION["my-item-name"]; ?>;
    if (myItemName == "is716") {
        document.getElementById('716b').style.display = 'none';
        document.getElementById('716c').style.display = 'inline';
    }
}

希望这就是你要找的东西。

编辑:如果您的目标网页是同一页面,您可以通过让您的javascript看起来像这样简化:

window.onload = function() {
    var myItemName = "<?php echo (isset($_POST["my-item-name"])? $_POST["my-item-name"] : ""); ?>";
    if (myItemName == "is716") {
        document.getElementById('716b').style.display = 'none';
        document.getElementById('716c').style.display = 'inline';
    }
}