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

git rebase --abort

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

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>

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

2 个答案: