Question

我有一个表单有两个选项，提交和覆盖。

看起来像这样：

[ INPUT FIELD ]
[Submit] [Overwrite]

仅当值已在数据库中时，才会显示“覆盖”按钮。

HTML代码是：

<input type="text"  name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>

JS代码是：

    if(!problem){
        data = "submit=save";

        jQuery('#overwrite').click(function(){
        $(this).toggleClass('selected');

        if( $(this).hasClass('selected') ){
         data+="&overwrite=on";
         console.log( "overwrite=on" ); 
        }
       });

        sendToBean(href, data);

        jQuery.each(langs, function(i, lang){
             sendToBean(href, data);
        });
    }
}

如果我只有“提交”按钮，则可以使用。如果我只有覆盖按钮，它可以工作。但是，如果我同时拥有它们，则“覆盖”按钮将不再起作用。

有没有人能解决这个问题？

Answer 1

将retrun false放入匿名回调函数中就可以了。因为你声明该按钮是一个提交按钮

if(!problem){
    data = "submit=save";

    jQuery('#overwrite').click(function(){
    $(this).toggleClass('selected');

    if( $(this).hasClass('selected') ){
     data+="&overwrite=on";
     console.log( "overwrite=on" ); 
    }
    return false;
   });

    sendToBean(href, data);

    jQuery.each(langs, function(i, lang){
         sendToBean(href, data);
    });
}

}

Answer 2

单击提交按钮时，页面将刷新，overwrite将返回初始格式，所选内容将消失，尝试将输入类型更改为按钮：

<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>

希望这有帮助。

Answer 3

删除<input type="">覆盖按钮，您可以使用<button>

<a href="#" id="overwrite" class="btn btn-primary"> Overwrite </a>

Answer 4

<input type="text"  name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>


$(document).ready(function(){
    $("#btnOverwrite").unbind("click").bind("click",function(e){
    e.preventDefault();
    alert("overwrite called");    
  });
  $("#btnSubmit").unbind("click").bind("click",function(e){
    e.preventDefault();
    alert("submit called");
  })
});

回顾小提琴

https://jsfiddle.net/dipakchavda2912/rwdakvyg/

两个不同功能的两个Html按钮

4 个答案: