您的位置: 首页 > 技术问答 > javascript'if'语句中使用的已发布变量立即消失

javascript'if'语句中使用的已发布变量立即消失

分类: 技术问答 • 2022-03-16 20:22:26

问题描述：

I have forms running on my page which post data to a php file which causes the posted item to appear in a cart:

<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>

I then put a script running at the bottom of my page which essentially toggles controls so that further selections become clear based on previous selections:

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

The problem is that the above script's if statement, that name == 'is716' apparently only becomes true for a moment when you click submit. The css will change and flash for just a second, showing that the statement is indeed working and then it will disappear. I can make the changes stay by adding 'return false' but this stops the form from being submitted and the data updated, which completely misses the point. Is there a way to both submit the data but also have the value 'stick'?

How can I make this change last until the statement changes again?

edit: Here is the page's code:

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

That pushes to another page: jcart.php

答

Like Suman said your page is getting submitted, therefore the style reloads with the page so any changes made in the page session to your style will be reset.

A solution to your problem would be to set session flags in your form's php target page. You could do this like:

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

And then on your cart page you would echo the session variable into a JavaScript that will toggle the styling of your page as necessary:

<?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';
    }
}

Hopefully this is what you are looking for.

EDIT: For if your target page is the same page you could simplify this by having your javascript look like this:

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

答

Your form is getting posted and hence the page is getting reloaded. Now, when a webpage is reloaded previous states are forgotten by the browser until and unless you use some persistence (like local storage or something) and check saved data and restore previous stage of any element on page reload by yourself.

Use ajax to post your data and to get information back from server. This way your styles and states will be retained.

Do an event.preventDefault() on your form submit button click and then do whatever server post activity you want to do by ajax call. That should do.

javascript'if'语句中使用的已发布变量立即消失

相关推荐