I need help with this code. I keep getting the error changeBG is not defined.
The way the code should work is when I select a radio button the background changes. If I change the function to an inline function inside the onclick event then it works but if I move the funtion to script section it doesn't work for example:
<input type="radio" id="red" name="change1" value=1 onclick="document.body.style.backgroundColor='red'" /><label for="red">Red</label><br />
WORKS at changing the background red
but when I make a function in the script section and call the function in the onlick event it doesn't work,
Example of code that is not working:
Script:
<script type="text/javascript">
function changeBG(n)
{
if (n==1)
document.body.style.backgroundColor='red'";
if (n==2)
document.body.style.backgroundColor='yellow'";
if (n==3)
document.body.style.backgroundColor='green'";
if (n==4)
document.body.style.backgroundColor='orange'";
}
</script>
HTML:
<form id="jp2" name="jp2" method="get">
<input type="radio" id="red" name="change1" value=1 onclick="changeBG(1)" />
<label for="red">Red</label><br />
<input type="radio" id="Yellow" name="change1" value=2 onclick="changeBG(2)" />
<label for="yellow">Yellow</label><br />
<input type="radio" id="Green" name="change1" value=3 onclick="changeBG(3)" />
<label for="green">Green</label><br />
<input type="radio" id="Orange" name="change1" value=4 onclick="changeBG(4)" />
<label for="orange">Orange</label><br />
</form>
backgroundColor='red'"
backgroundColor='yellow'"
backgroundColor='green'"
backgroundColor='orange'"
You see those extra " quotemarks? Get rid of them.
Your working code
In Firefox this gives the following console error. You should learn how to do some simple debugging so you can catch these errors early.
SyntaxError: unterminated string literal
Use proper quotes. You had used wrong extra quotes. like ''". Since these extra quote made JS error, you are error i.e. function not defined.
Change js to following.
function changeBG(n) {
if (n == 1)
document.body.style.backgroundColor = 'red';
if (n == 2)
document.body.style.backgroundColor = 'yellow';
if (n == 3)
document.body.style.backgroundColor = 'green';
if (n == 4)
document.body.style.backgroundColor = 'orange';
}
<form id="jp2" name="jp2" method="get">
<input type="radio" id="red" name="change1" value=1 onclick="changeBG(1)" />
<label for="red">Red</label>
<br />
<input type="radio" id="Yellow" name="change1" value=2 onclick="changeBG(2)" />
<label for="yellow">Yellow</label>
<br />
<input type="radio" id="Green" name="change1" value=3 onclick="changeBG(3)" />
<label for="green">Green</label>
<br />
<input type="radio" id="Orange" name="change1" value=4 onclick="changeBG(4)" />
<label for="orange">Orange</label>
<br />
</form>
Related
I'm trying to find a simple way to check a radio option using jQuery based on its initial value at render time.
<form>
<input type="radio" name="myRadio" value="weekly" />Weekly <br />
<input type="radio" name="myRadio" value="monthly" />Monthly <br />
<input type="radio" name="myRadio" value="yearly" />Yearly <br />
</form>
And the Javascript:
$('input [value="weekly"]').prop("checked", true);
I have a JS fiddle set up here:
http://jsfiddle.net/xpvt214o/448712/
The interesting thing is that it works using the native browser document.querySelector but it doesn't seem to work using jQuery. I'd like to stick with jQuery's way of doing this to ensure consistency in the code.
Also, the reason I want to select by value is that the JSON API I'm calling returns an enumerated string type. It would be really annoying if I had to add a unique ID attribute to each radio option and then use a switch case to select the appropriate button based on the enumerated string type.
Simple remove the space between your selector and the attribute:
$('input[value="weekly"]').prop("checked", true);
$('input[value="weekly"]').prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="myRadio" value="weekly" />Weekly <br />
<input type="radio" name="myRadio" value="monthly" />Monthly <br />
<input type="radio" name="myRadio" value="yearly" />Yearly <br />
</form>
With space, you are telling jQuery to select elements that have [value="weekly"] but are descendants of an input element
$(function(){
$('input[type="radio"][value="weekly"]').prop('checked', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="myRadio" value="weekly" />Weekly <br />
<input type="radio" name="myRadio" value="monthly" />Monthly <br />
<input type="radio" name="myRadio" value="yearly" />Yearly <br />
</form>
This code works on online compilers as well as stackoverflow but why not on my web host as well as localhost.
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});</script></head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" /></body>
</html>
Your head and body tags are intermingled. I've updated it to correctly show the head and body sections.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
</body>
</html>
Your Javascript is running too early, before any HTML elements (your radio buttons) are present. Your selector $('.radiogroup') then does not find anything, and nothing happens when you click the radio buttons.
Either move your Javascript at the end before the </body> closing tag or wrap your code in jQuery's .ready like so:
$(document).ready(function(){
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
})
Your head and body tags are intermingled and if u want to use html5 you don't need to define the script-type, and you don't have to declare not-closed-tags with trailing backslash.
If you want to use an earlier version of html use the type.
If you want to use xhtml you have to use trailing backslashes for not-closed-tags.
Edit: I figured out, that your code is triggered before the Elements are rendered, so you try to add a event-handler to Elements that are not present at that time. Adding $(function() {}); around your code will force jQuery to run the code after document-ready event is triggered.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('.radiogroup').on('change', function() {
$('#amount').val(this.value);
});
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5">
<input type="radio" name="radiogroup" class="radiogroup" value="10">
<input type="radio" name="radiogroup" class="radiogroup" value="15">
<input type="radio" name="radiogroup" class="radiogroup" value="20">
<br><br>
<input type="text" name="amount" id="amount">
</body>
</html>
So I have a slight problem, and by slight I mean I've spent the entire day fiddling with this code and not going anywhere. What the problem is that I have these groups of radio buttons, and I want to get their value so that I can implement the chosen colour on the canvas element. I've figured out the part where I'm supposed to extract the value from the currently selected button, but the problem is that I cant get the value out of the function.
Here's the code. This part is the index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style_settings.css">
</head>
<body>
<div id="settings"><h1>Customise your game</h1>
<form id="colorformsnake" name="colorformsnake" onchange="getRadioValSnake()"><label>Choose the snake color: <br/><br/>
Green: <input type="radio" id="green" value="green" name="snakecolor"><br /><br />
Red: <input type="radio" id="red" value="red" name="snakecolor" /><br /><br />
Blue: <input type="radio" value="blue" id="blue" name="snakecolor"></label><br /><br/><br /></form>
<form id="colorformbg" onchange="getRadioValBg()" name="colorformbg">
<label>Choose the background color: <br /><br/>
Gray: <input type="radio" id="gray" value="gray" name="bgcolor" checked><br /><br />
White: <input type="radio" id="white" value="white" name="bgcolor"/><br /><br />
Black: <input type="radio" value="black" id="black" name="bgcolor"></label><br /><br><br /></form>
</div>
<script src="javascript/jquery-3.0.0.min.js"></script>
<script src="javascript/colorsettings.js"></script>
<script src="javascript/initial_config.js"></script>
<script src="javascript/draw.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/ajax.js"></script>
</body>
</html>
This part is the initial part where the user chooses the wanted colours. I have the first group which is the snake colour and the second which is the background. Everything in this should be fine.
Here's the second part. This is colorsettings.js
var snakecolor=" ";
var bgcolor="";
function getRadioValSnake()
{
window.snakecolor=($('input[name="snakecolor"]:checked', '#colorformsnake').val());
return snakecolor;
}
function getRadioValBg()
{
window.bgcolor=($('input[name="bgcolor"]:checked', '#colorformbg').val());
return bgcolor;
}
var snakecolorCurrent=getRadioValSnake();
console.log(snakecolorCurrent);
Now what I want to do is to take the selected colour and insert it into a variable, which will be passed to an another .js file. That part I think I can solve by myself. The thing that I've been struggling with is that when i try to call any of those 2 functions it just returns unidentified.
I'm pretty sure that the problem is in the scope of the function. I've been trying to find a problem similar to mine in order to not bother anyone on here but nothing seems to work.
Any help is greatly appreciated and I thank you in advance.
Re-Edit: Running snake color & bg :)
var snakecolorCurrent = "";
var bgcolorCurrent = "";
$("input[name='snakecolor']").change(function() {
var snakecolor = $('input[name="snakecolor"]:checked');
snakecolorCurrent = snakecolor.val();
snakecolor = snakecolorCurrent;
console.log(snakecolor);
console.log(snakecolorCurrent);
return snakecolor;
});
$("input[name='bgcolor']").change(function() {
var bgcolor = $('input[name="bgcolor"]:checked');
bgcolorCurrent = bgcolor.val();
bgcolor = bgcolorCurrent;
console.log(bgcolor);
console.log(bgcolorCurrent);
return bgcolor;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="colorformsnake" name="colorformsnake">
<label>Choose the snake color:
<br/>
<br/> Green:
<input type="radio" id="green" value="green" name="snakecolor">
<br />
<br /> Red:
<input type="radio" id="red" value="red" name="snakecolor" />
<br />
<br /> Blue:
<input type="radio" value="blue" id="blue" name="snakecolor">
</label>
<br />
<br/>
<br />
</form>
<form id="colorformbg" name="colorformbg">
<label>Choose the background color:
<br />
<br/> Gray:
<input type="radio" id="gray" value="gray" name="bgcolor" checked>
<br />
<br /> White:
<input type="radio" id="white" value="white" name="bgcolor" />
<br />
<br /> Black:
<input type="radio" value="black" id="black" name="bgcolor">
</label>
<br />
<br>
<br />
</form>
so if declared variable in global scope then you do need to call it with window
demo
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style_settings.css">
<script src="javascript/jquery-3.0.0.min.js"></script>
<script src="javascript/colorsettings.js"></script>
<script src="javascript/initial_config.js"></script>
<script src="javascript/draw.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/ajax.js"></script>
</head>
<body>
<div id="settings"><h1>Customise your game</h1>
<form id="colorformsnake" name="colorformsnake" onchange="getRadioValSnake()"><label>Choose the snake color: <br/><br/>
Green: <input type="radio" id="green" value="green" checked="checked" name="snakecolor"><br /><br />
Red: <input type="radio" id="red" value="red" name="snakecolor" /><br /><br />
Blue: <input type="radio" value="blue" id="blue" name="snakecolor"></label><br /><br/><br /></form>
<form id="colorformbg" onchange="getRadioValBg()" name="colorformbg">
<label>Choose the background color: <br /><br/>
Gray: <input type="radio" id="gray" value="gray" name="bgcolor" checked="checked"><br /><br />
White: <input type="radio" id="white" value="white" name="bgcolor"/><br /><br />
Black: <input type="radio" value="black" id="black" name="bgcolor"></label><br /><br><br /></form>
</div>
</body>
</html>
js:
function getRadioValSnake()
{
snakecolor=($('input[name="snakecolor"]:checked').val());
return snakecolor;
}
function getRadioValBg()
{
bgcolor=($('input[name="bgcolor"]:checked').val());
return bgcolor;
}
var snakecolorCurrent=getRadioValSnake();
alert(snakecolorCurrent)
one way is to pass the variable in function to other.js file and do whatever you want in other.js For example,
---------ColorSettings.js-----------
function getRadioValSnake(){
snakecolor = $('input:radio[name="snakecolor"]:checked').val();
fromcolorsettings(snakecolor);
}
----------other.js----------------
function fromcolorsettings(scolor)
{
alert(scolor);--do whatever you want here
}
I am trying to append values from a checked checkbox to a url that later would be used for an ajax call. As mentioned I would only like to have the values appended to the url if checkbox is checked. If a user checks and then unchecks, this would indicate not to add the value to the url. Below I have some basic foundation code. How can I append multiple items to the url ?
<form>
<input type="checkbox" value="1" id="item1" />
<input type="checkbox" value="2" id="item2" />
<input type="checkbox" value="3" id="item3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
<script>
$('#submitForm').click(function() {
$('checkbox').click(function() {
$.getJSON('www.mysite.com/mypage.php?id='+item1+item2+item3)
});
});
</script>
First give your checkboxes a specific name like;
<form name="checkbox_form" id="checkbox_form">
<input type="checkbox" value="1" id="item1" name="val1" />
<input type="checkbox" value="2" id="item2" name="val2" />
<input type="checkbox" value="3" id="item3" name="val3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
And your js will be;
$('#submitForm').click(function() {
var url = "'www.mysite.com/mypage.php";
if ($("#checkbox_form").serialize().length > 0) {
url += "?" + $("#checkbox_form").serialize();
}
alert("Your ajax url will be: " + url);
$.getJSON(url)
});
Here is a working fiddle: http://jsfiddle.net/cubuzoa/UKV3r/2/
You can use JQuery method serialize() as follows:
var query = $('form').serialize()
and after:
$.getJSON('www.mysite.com/mypage.php?'+query );
Only necessary to provide the input field attribute "name":
<form>
<input type="checkbox" value="1" id="item1" name="item1"/>
<input type="checkbox" value="2" id="item2" name="item2"/>
<input type="checkbox" value="3" id="item3" name="item3"/>
<input type="submit" id="submitForm" value="Submit Form" />
<form>
and you get:
www.mysite.com/mypage.php?item1=1&item2=2&item3=3
if all checkboxes are selected.
In my html form, I have a group of radio buttons
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="submit" value="submit" />
</form>
I have a scenario where no radio button is checked. In such case, my server-side php receives input value as false. What I want to do is change false to null or undefined. Is that possible? Any help is greatly appreciated.
You can do something like this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="hidden" name="rad" value="null" />
<input type="submit" value="submit" />
</form>
Now if you haven't checked any radio button, you will get "null" input value, but remember "null" is not same as NULL in PHP.
Radio buttons, by definition, do not have a null value.
You could however add a radio button such as this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="radio" name="rad" value="null" /> null <br />
<input type="submit" value="submit" />
</form>
And use it as the null that you need.
That might be done with an if/else statement within the .php:
$radioInput = false;
if (!isset($_POST['rad'])){
$radioInput = NULL;
}
else {
$radioInput = $_POST['rad'];
}
http://php.net/manual/en/function.isset.php
Use javascript to return null in case if no radio button is selected ,on "submit" click :
var radioChecked=0;
var radios=document.getElementsByName("rad");
for(var i=0;i<radios.length;i++)
{ if(radios[i].checked){
radioChecked=radioChecked+1;
} }
if(radioChecked==0)
return null;
Hope it solves your problem.