13

I have multiple buttons that I use when people answer a question. How would I get the buttons to change colors when a person clicks on the button? I do not know jQuery, I have been told that it is the best thing to use for this.

Here is the code I have for the HTML part:

<div style="text-align: center;"><span style="line-height: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 24px;">In the past three months, how often have you used marijuana?<br />
<p><input type="submit" value=" Never " name="btnsubmit" id="answer" style="width: 200px;" /></p>
<p><input type="submit" value=" Once or Twice " name="btnsubmit" id="answer" style="width: 200px;" /></p>
<p><input type="submit" value=" Monthly " name="btnsubmit" id="answer" style="width: 200px;" /></p>
<p><input type="submit" value=" Daily or Almost Daily " name="btnsubmit" id="answer" style="width: 200px;" /></p>
</span></div>
<div>
<p style="text-align: right;"><a onclick="window.open(this.href,'_parent');return false;" href="/mobile/Static2.aspx"><input type="submit" value=" Next " name="btnsubmit" style="width: 100px;" /></a></p>
</div>

I am really new at coding so any kind of help would be appreciated!

Syscall
  • 19,327
  • 10
  • 37
  • 52
Sean6971
  • 133
  • 1
  • 1
  • 5
  • $('#answer').click( function() { $(this).css({ 'background' : '#00ff00' }); }); Please, refer jQuery documentation for more details about it's functions and API – Mikhus Apr 26 '13 at 16:21
  • I hope this isn't homework. And what's with all these duplicate IDs. This is 4 times in a row today. Please note that IDs are suppose to be unique. – Terry Young Apr 26 '13 at 16:22
  • No this is not homework. One of my jobs is updating a website and I am trying to move into a new direction with how the site functions. I am not much of a coder! – Sean6971 Apr 26 '13 at 16:30

6 Answers6

28
$('input[type="submit"]').click(function(){
$(this).css('color','red');
});

Use class, Demo:- https://jsfiddle.net/BX6Df/

   $('input[type="submit"]').click(function(){
          $(this).addClass('red');
});

if you want to toggle the color each click, you can try this:- https://jsfiddle.net/SMNks/

$('input[type="submit"]').click(function(){
  $(this).toggleClass('red');
});


.red
{
    background-color:red;
}

Updated answer for your comment.

https://jsfiddle.net/H2Xhw/

$('input[type="submit"]').click(function(){
    $('input[type="submit"].red').removeClass('red')
        $(this).addClass('red');
});
Syscall
  • 19,327
  • 10
  • 37
  • 52
PSL
  • 123,204
  • 21
  • 253
  • 243
  • Is there a way if they choose one then choose another the first one would go back to it's original color? – Sean6971 Apr 26 '13 at 16:53
  • 1
    This is what I was looking for, sorry it took so long to accept it, but had to play around just a tad bit with it to get it to work within my Dnn installation! – Sean6971 May 02 '13 at 18:34
5

I would just create a separate CSS class:

.ButtonClicked {
    background-color:red;
}

And then add the class on click:

$('#ButtonId').on('click',function(){
    !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : '';
});

This should do what you're looking for, showing by this jsFiddle. If you're curious about the logic with the ? and such, its called ternary (or conditional) operators, and its just a concise way to do the simple if logic to check if the class has already been added.

You can also create the ability to have an "on/off" switch feel by toggling the class:

$('#ButtonId').on('click',function(){
    $(this).toggleClass('ButtonClicked');
});

Shown by this jsFiddle. Just food for thought.

PlantTheIdea
  • 16,061
  • 5
  • 35
  • 40
  • 1
    this is exactly why i deleted my original comment, because it was inevitably going to lead to a bickerfest. didnt expect it to be this passive aggressive, but nonetheless i wanted to avoid it. ive updated my answer, lets just shake hands and call it square. – PlantTheIdea Apr 26 '13 at 16:35
3

Use CSS:

<style>
input[name=btnsubmit]:active {
color: green;
}
</style>
Syscall
  • 19,327
  • 10
  • 37
  • 52
nick
  • 610
  • 5
  • 12
2

Add this code to your page:

<script type="text/javascript">
$(document).ready(function() {
   $("input[type='submit']").click(function(){
      $(this).css('background-color','red');
    });
});
</script>
Nelson
  • 49,283
  • 8
  • 68
  • 81
  • When using this, how would I make the button stay read? After clicking it then moving off of it, it changes back to the original color – Sean6971 Apr 26 '13 at 16:26
  • A javascript only runs on the site where it is included. If you want to save information you need to store it somewhere. Like a cookie for example. – Wipster Apr 26 '13 at 16:33
1

You have to include the jquery framework in your document head from a cdn for example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Then you have to include a own script for example:

(function( $ ) {

  $(document).ready(function(){
      $('input').click(function() {
          $(this).css('background-color', 'green');
      }
  });


  $(window).load(function() { 
  });

})( jQuery );

This part is a mapping of the $ to jQuery, so actually it is jQuery('selector').function();

(function( $ ) {

})( jQuery );

Here you can find die api of jquery where all functions are listed with examples and explanation: http://api.jquery.com/

Wipster
  • 1,510
  • 1
  • 15
  • 32
0

Using jquery, try this. if your button id is say id= clickme

$("clickme").on('çlick', function(){

$(this).css('background-color', 'grey'); .......

Ashar Siddiqui
  • 71
  • 4