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!
This question is related to
jquery
html
css
button
dotnetnuke
Use css:
<style>
input[name=btnsubmit]:active {
color: green;
}
</style>
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.
Add this code to your page:
<script type="text/javascript">
$(document).ready(function() {
$("input[type='submit']").click(function(){
$(this).css('background-color','red');
});
});
</script>
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/
Source: Stackoverflow.com