CODEWITHSUNDEEP
javascriptjquerybutton
Maurice
Maurice

Reputation: 1157

Button is overriding/conflicting with another button on the same webpage

I have 2 buttons on my page. Button 1 is executing a javascript function and another one is used for form processing. The problem is that button 1 is overriding the value and function of button 2.

Button 1 (not in a form) has the following html code:

<input id="show_hint" class="button" type="submit" value="Hint" onClick="location.href='#hint'" />

The javascript attached to it is:

// Button 1
$(function(){
  var count = 3,
      $btn = $('input[type="submit"]'); 
      $btn.val($btn.val()+' ('+count+')')

  $btn.click(function(){
      $btn.val($btn.val().replace(count,count-1));
      count--;
      $('#hintscore')
        .hide()
        .css({
            bottom: 30,
            left: 300,
            opacity: 1,
        })
        .show()
        .stop()
        .delay(200)  
        .animate({'bottom':75, opacity: 0},1000);

      if(count==0) {
            return !$btn.attr('disabled','disabled');
      }
  })
});

Button 2 (in a form) has this html code:

<input id="showmenu_win2" class="button" type="submit" value="Menu" />

The javascript attached to it is:

$('#form').submit(function() {
        $.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

So these two are conflicting with each other and it has something to do with the type="submit". But how can I fix this?

Many thanks

Upvotes: 0

Views: 1180

Answers (5)

user7046769
user7046769

Reputation: 1

I am not sure this is the solution you want.My answer is to set show/hide button to type="button" while submit is type="submit". Example

<button id="hide" type="button" >Hide</button>
<button id="show" type="button" >Show</button>

Upvotes: 0

Shyju
Shyju

Reputation: 218722

Change the button type to normal input button instead of submit. Change your script to bind your buttons to functions by selecting ID selector

In the below code $("#show_hint") will return an object of the input button with an id show_hint.

// Button 1

HTML

<input id="show_hint" class="button" type="button" value="Hint" onClick="location.href='#hint'" />

Script 

$(function(){
  var count = 3,
  $("#show_hint").val($(this).val()+' ('+count+')')

 $("#show_hint").click(function(){
  $("#show_hint").val($(this).val().replace(count,count-1));
  count--

 // Your remaining code...

For the second button

HTML

 <input id="showmenu_win2" class="button" type="input" value="Menu" />

Script

 $('#showmenu_win2').click(function() {
    $.ajax({   
        type: "POST",
        data: $("#form").serialize(), 
        cache: false,  
        url: "insert.php"  
    });   
    return false;
});

Upvotes: 1

Jasper
Jasper

Reputation: 76003

$btn = $('input[type="submit"]'); will select all the submit input elements in the DOM (so you are basically binding this event handler to both of your submit buttons when you call $btn.click(...).

Since you have IDs on each of your buttons you can change:

$btn = $('input[type="submit"]');

To:

$btn = $('#show_hint');

You can also find a root element to start your selector so that you are only selecting the button you want:

$btn = $('#ancestor-element').find('input[type="submit"]');

Or if you want to select all input[type="submit"] elements except the one in the form:

$btn = $('input[type="submit"]').not($('#form').find('input[type="submit"]'));

Upvotes: 1

jfriend00
jfriend00

Reputation: 707248

This part of your JS:

$btn = $('input[type="submit"]');

is selecting both buttons and thus will attach the same behavior to both buttons.

Since you have an id on each button, you can select exactly the button you want by id:

$btn = $("#show_hint");

Upvotes: 1

Rene Pot
Rene Pot

Reputation: 24815

You could replace the <input type="submit"> by a regular <button>. do achieve the same goal.

You could even create a <div> with an onclick event to mimic a button. You are not limited to input type="submit"

Upvotes: 0

Related Questions