带有条件的JQuery提交按钮

时间:2014-11-09 04:14:58

标签: jquery ajax

我试图用jQuery提交按钮设置一个条件并且似乎无法使任何工作。如果medLength == 0则应该出现错误消息。没有错误消息,即使medLength有值,提交按钮也不起作用。提交按钮有一个图形,所以我无法将其更改为按钮。任何帮助,将不胜感激。

$("#submit").click(function get() {
    if (medLength == 0) {
        $(".errorStop").css().show;
    } else {

        $.ajax({
            url: "postnew1.php",
            type: "POST",
            data: {
                type: medType,
                time: medLength,
                length: counter
            },
        }).success(function (response) {
            location.href = "meditate.php";
        }).error(function (e) {});
    }
});

以下代码在没有if/else声明的情况下工作:

$("#submit").click(function get() {
    $.ajax({
        url: "postnew1.php",
        type: "POST",
        data: {
            type: medType,
            time: medLength,
            length: counter
        },
    }).success(function (response) {
        location.href = "meditate.php";
    }).error(function (e) {});
});

4 个答案:

答案 0 :(得分:1)

调试此方法的一种方法是将alert("Error")添加到if情况,这样您就可以验证是否确实触发了该代码,如下所示:

if  (medLength ==0){
    alert("Error");
    $(".errorStop").css().show;         
}

但我能够看到您的错误消息可能未显示的部分原因是因为您没有调用show()函数。

更改

$(".errorStop").css().show;  

$(".errorStop").show();  

答案 1 :(得分:1)

我认为应该是

   $(".errorStop").css().show;  

$(".errorStop").show();  

希望你得到medLength权利!

答案 2 :(得分:0)

"提交按钮有图形,因此我无法将其更改为按钮。"。你不需要"按钮"成为一个类型="按钮"或者输入="提交"。说你可以为元素设置一个id,比如id =" btn_sendInfo&#34 ;,我不明白medLength值来自哪里。所以这段代码应该有效:

NOte =类型。我设置了json,但是如果你不想要你可以根据自己的意愿改变,或者擦除并让jquery" gess"来处理它。 如果你不想使用jason从服务器发送数据,你可以擦除// JSON循环来检索信息。

//Your javaScript code
$(document).on("click", "#btn_sendInfo", function(){

if(medLength === 0){
    $( ".errorStop" ).show()
}
else{

    //Data you want to send to php evaluate
     var dt={ 
              ObjEvn:"btn_sendInfo", //You can use $ObjEvn=$_POST[ObjEvn] on server side php and test if($ObjEvn="btn_sendInfo"){do something ....}
              type: medType,
              time: medLength,
              length: counter,
              OtherDataJsToPHP: $("#txt_EmailLogin").val()

            };

    //Ajax      
     var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
                            url: "postnew1.php",
                            type: "POST",
                            data: dt,
                            dataType: "json ????????"
                        });

    //Ajax Done catch JSON from PHP 
        request.done(function(dataset){

            // Put your succes function here ===> location.href = "meditate.php";

            //JSON Or if want to use json you cand use this to retrieve information send from server through json
            for (var index in dataset){ 
                 dataPHPtoJsJS=dataset[index].dataPHPtoJs;
                 asManyasYouWantJS=dataset[index].asYouWant;
             }


             //JavaScript conditions. Here you can control the behaivior of your html object, based on your PHP response
             if(dataPHPtoJsJS){
                $( "#idYourHtmlElement" ).removeClass( "class1" )
                $( "#idYourHtmlElement" ).addClass( "class2" )
             }


     }); 

    //Ajax Fail 
        request.fail(function(jqXHR, textStatus) {
            //Put your function ---- function (e) {}
            alert("Request failed: " + textStatus);
        }); 
    }

}

但是,如果您只想解决问题,请执行此操作,尽管您的代码为:

$(document).on("click", "#sendInfo", function(){

if(medLength === 0){
    $( ".errorStop" ).show()
}
else{
        //your ajax code
    }

}

答案 3 :(得分:0)

如以下演示所示,图像按钮仅用作提交按钮,并提交父表单。

其次,演示还显示提交处理程序中的代码是有条件的;代码的不同部分以不同的点击次数执行,具体取决于变量的值。

因此,这个演示应该是一个很好的例子,可以帮助您完成最初的目标。

var medLength = 0;
  $('form').on('submit', function(e) {
    e.preventDefault();
    if( medLength === 0 ) {
      alert('medLength = 0');
    } else {
      alert('medLength != 0');
    }
    medLength++;
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  First name:
  <input type="text" name="fname">
  <br>
  <input type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnMxVaix7dQzuVgQa5rwGcrX6sdy5vlvel5djnQgcn926d1FgH" alt="Submit">
</form>