CODEWITHSUNDEEP
javascriptjqueryhtml
J.Doe
J.Doe

Reputation: 596

Two Html buttons for two different functions

I have a form which has two Options, Submit and Overwrite.

It looks like this:

[ INPUT FIELD ]
[Submit] [Overwrite]

The Overwrite Button only appears when the value already is in the Database.

The HTML Code is:

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

The JS Code is:

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

If I only have the Submit button, it works. If I only have the Overwrite button, it works. But if I have both, the Overwrite button wont work anymore.

Does anyone have a solution to this problem?

Upvotes: 0

Views: 78

Answers (4)

Dipak
Dipak

Reputation: 2308

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

Review fiddle

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

Upvotes: 0

Uday Kumar
Uday Kumar

Reputation: 131

Remove <input type=""> for Overwrite button you may use <button>

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

Upvotes: 0

John Michael Villegas
John Michael Villegas

Reputation: 336

put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button 

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

}

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :

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

Hope this helps.

Upvotes: 0

Related Questions