在提交之前检查并更改表单字段中的值

时间:2014-08-19 02:32:10

标签: javascript jquery html css

我有一个表单和一个提交按钮。当我单击提交按钮时,我必须检查输入字段,如果它不是所需的字段,然后更改它,然后提交表单。下面是代码。如果用户输入小于25的数字并单击提交按钮,那么我必须首先检查输入值,因为它小于25,将该值乘以0.90,然后提交我怎样才能实现它?确保用户点击提交按钮一次,然后检查条件并自动提交表单,而无需用户再次单击提交按钮。

<section class="calculator-form">
    <form action="" id="calculator-form" method="post" >
    <div style="width: 23%; float: left; margin: 0 3% 0 0;">
                <input id="number" type="text" name="height"/>
           </div>
            <div style="position: absolute; margin: 0; left: 0; bottom: 0">
            <input id=" button1" type="submit"/>
        </div>

   </form>
</section>

2 个答案:

答案 0 :(得分:0)

创建一个函数来验证输入和计算。

<script>
function calculate(){

    var number = document.getElementById("number").value;

    if(number < 25){
        number = number * .90;
        document.write(number);
    }else{
        alert("Number should be less than 25");
        return false;
   }
}
</script>

然后在用户点击提交按钮时使用onClick调用该函数。

<input id=" button1" onClick="return calculate()" type="submit" value="Submit"/>

编辑:向表单添加操作。 $ _SERVER ['PHP_SEFL']会将其重定向到您当前的执行脚本。并在if-else语句中添加document.write(number);以查看结果。

<form action="<?php $_SERVER['PHP_SELF']?>" id="calculator-form" method="post" >

答案 1 :(得分:0)

请添加以下hidden元素:

<section class="calculator-form">
    <form action="" id="calculator-form" method="post" >
        <input id="hidden-number" type="hidden" name="hheight" value="">
        <div style="width: 23%; float: left; margin: 0 3% 0 0;">
                <input id="number" type="text" name="height"/>
           </div>
            <div style="position: absolute; margin: 0; left: 0; bottom: 0">
            <input id=" button1" type="submit"/>
        </div>

   </form>
</section>

并在脚本内部更新隐藏的输入

$(document).ready(function(){

    $("#calculator-form").submit(function(){ //bind to submit trigger
        var input=$("#number");
        if (input.val()<25){ // check if the value is less than 25
            $("#hidden-number").val((input.val)*0.90); // update the value with the new value and submit
        }
    });
});

然后在你的后端,而不是从height读取hheight

$height=$_POST['hheight'];