javascript - 有条件地隐藏或显示保存按钮

Question

我试图让下面的工作没有运气

我有一个“ session ”文本框一个“cost_per_session”和“total_cost”

我调用函数“calculate()”来计算总成本并将其放入“total_cost”

我愿意

如果“ session ”为空

或者如果 total_cost 大于 50

要隐藏的保存按钮

有人可以帮忙吗？

<form method="post" action="#">
    <section>
        <label>Sessions: </label>
            <input type="text" name="sessions" id="sessions" autocomplete="off" placeholder="XX"
                oninput="
                    calculate();

                    if ($('#sessions').val() == '' || $('#total_cost').val() > 50)
                        {
                            $('#save_button_box').hide();
                        }
                    else
                        {
                            $('#save_button_box').show();
                        };
                " >
        </label>
    </section>

    <section>
        <label>Cost Per Session</label>
            <input type="text" name="cost_per_session" id="cost_per_session" readonly="" value="5">
        </label>
    </section>

    <section>
        <label class="label">Total Cost</label>
            <input type="text" name="total_cost" id="total_cost" readonly="">
        </label>
    </section>



    <div id="save_button_box" style="display:none;">
        <button type="submit" class="button">Save</button>
    </div>

</form>

	function calculate() {
	    var var_sessions = document.getElementById('sessions').value;	
	    var var_cost_per_session = document.getElementById('cost_per_session').value;
	
	    var result_total_cost = var_sessions * var_cost_per_session;
	
	  
	    total_cost.value = result_total_cost;
	
	
	}		

Answer 1

我想这就是你想要的。这是你的代码我只是将 if 从 html 移动到 javascript 并将 total_cost 更改为 result_total_cost

function calculate() {
    var var_sessions = document.getElementById('sessions').value;	
    var var_cost_per_session = document.getElementById('cost_per_session').value;
    var result_total_cost = var_sessions * var_cost_per_session;

    var total_cost = document.getElementById('total_cost').value;
    console.log(var_sessions);
    console.log(total_cost);
    if (var_sessions == '' || result_total_cost > 50)
    {
      $('#save_button_box button').hide();
    }
    else
    {
      $('#save_button_box button').show();
    }
    document.getElementById('total_cost').value = result_total_cost;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
    <section>
        <label>Sessions: </label>
            <input type="text" name="sessions" id="sessions" autocomplete="off" placeholder="XX" oninput="calculate();" >
        </label>
    </section>
    <section>
        <label>Cost Per Session</label>
            <input type="text" name="cost_per_session" id="cost_per_session" readonly="" value="5">
        </label>
    </section>
    <section>
        <label class="label">Total Cost</label>
            <input type="text" name="total_cost" id="total_cost" readonly="">
        </label>
    </section>
    <div id="save_button_box" style="">
        <button type="submit" class="button">Save</button>
    </div>
</form>