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
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/
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>
Use css:
<style>
input[name=btnsubmit]:active {
color: green;
}
</style>
Source: Stackoverflow.com