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

Question

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

我有一个"会话"文本框一个"cost_per_session"和"total_cost">

我调用函数"calculate(("来计算总成本并将其放在"total_cost"中

我想要

如果"会话"为空

或者如果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 并用result_total_cost更改了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>

Answer 2

你做的一切都很好像我一样安排好它们...

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;
    if ($('#sessions').val() == '' || $('#total_cost').val() > 50)
    {
        $('#save_button_box').hide();
    }
    else
    {
        $('#save_button_box').show();
    };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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="display:none;">
        <button type="submit" class="button">Save</button>
    </div>
</form>