I have looked all over the place and have tried all kind of scripts but i keep running into the same problem.
I am trying to disable or hide a submit button until a checkbox is checked.
The problem I am having is that nothing is working in IE10 unless I have the compatibility turned on, and they do not work in FF 20.0.1 most of the time.
Here is what I have tried so far.
<input type="checkbox" name="agree" value="yes" onclick="agreed.disabled = !this.checked" />Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
<script type="text/javascript">
function checkSubmit(ele, id) {
x = document.getElementById(id);
if (ele.checked == true) x.disabled = false;
else x.disabled = true;
}
</script>
<input type="checkbox" name="myCheck" onclick="checkSubmit(this, 'agreed')" value="y" />Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#terms").click(function() {
if ($(this).is(':checked')) {
$('#agreed').removeAttr('disabled');
} else {
$('#agreed').attr('disabled', 'disabled');
}
});
});//]]>
</script>
<input type="checkbox" class="required" id="terms"/>Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
I have tried many many other ways to do it but still running into problems with either IE10 or FF.
What I need is help with getting something to work in all browsers.
The first example is more likely to work some browsers and not others depending on if they put elements on the window or document objects via their ID.
To fix it, use document.getElementById().
<input type="checkbox" name="agree" value="yes" onclick="document.getElementById('agreed').disabled = !this.checked" />Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
The second one should work in any browser as long as the function is global, though you can shorten it.
function checkSubmit(ele, id) {
document.getElementById(id).disabled = !ele.checked;
}
Related
How to change submit button text based on which radio-button is active?
Here is my code, but it does not work. It changes text only once.
I have two radio-buttons:
<input type="radio" name="build-team" class="choose" value="build" /> Yes
<input type="radio" name="build-team" class="choose" value="show" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
And I have script:
$(document).on('click', '.choose', function() {
var target = $('.show-result');
if ($(this).attr('checked') == 'checked') {
target.html(target.data('chooseyes'));
}
else {
target.html(target.data('chooseno'));
}
})
JSFiddle example
$(document).on('click', '.choose', function() {
var target = $('.show-result');
target.html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="build-team" class="choose" value="Yes" /> Yes
<input type="radio" name="build-team" class="choose" value="No" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
$('.opt').click(function(){
$('#button').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="opt" name="opt" type="radio" value="Yes" checked="checked">Yes
<input class="opt" name="opt" type="radio" value="No">No
<button id="button" type="submit">Yes</button>
This is the easiest answer, no added attributes, only clean HTML + jQuery, it is also important to realize that there must always be a radio selected/checked by default, if not, you would have to validate the field and validating a radio is not cool haha :) have a nice day!
Cant get my function to work and add the value of the button to the text field when clicked by user.
HTML
<form name="testing" action="test.php" method="get">Chords:
<textarea name="field"></textarea>
<input type="button" value="G" onClick="addToField('G');">
<input type="button" value="C" onClick="addToField('C');">
<input type="button" value="Am" onClick="addToField('Am');">
<input type="button" value="F" onClick="addToField('F');">
JavaScript
<script language="javascript" type="text/javascript">
function addToField(crd){
document.testing.field.value += crd;
}
</script>
Really stuck trying to understand whats wrong here.
Hope this shows what I am trying to achieve: https://jsfiddle.net/034hyjo2/6/
You're accessing the object incorrectly
<script language="javascript" type="text/javascript">
function addToField(crd){
document.getElementByName("testing").value += crd;
}
</script>
Or, give the element an ID and use getElementByID("testing").value.
I usually find that works better anyway...
If you're just getting it in the fiddle, it works by putting the script tag above your HTML:
<script>
var addToField = function(c) {
document.testing.field.value += c;
};
</script>
<form name="testing" action="test.php" method="get">Chords:
<textarea name="field"> </textarea>
<input type="button" value="G" onClick="addToField('G');">
<input type="button" value="C" onClick="addToField('C');">
<input type="button" value="Am" onClick="addToField('Am');">
<input type="button" value="F" onClick="addToField('F');">
</form>
Your JSFiddle is way wrong. You're question here is better. You want to be using document.getElementById('field').value += crd; instead of document.testing.field.value += crd;
try this:
<form name="testing" action="test.php" method="get">Chords:
<textarea id="field" name="field"> </textarea> ---note the addition of the ID parameter
<input type="button" value="G" onClick="AddToField('G');">
<input type="button" value="C" onClick="AddToField('C');">
<input type="button" value="Am" onClick="AddToField('Am');">
<input type="button" value="F" onClick="AddToField('F');">
</form>
<script>
function AddToField(c) {
document.getElementById('field').value += c;
};
</script>
Also functions shouldn't be camelCase but Pascal case ;)
I am new to html
I am trying to add a onclick event with radio button but it is not working. I am unable to figure out the reason. Please help.
Example code
<script>
function select(btn)
{
var1=document.getElementById("radio1");
var2=document.getElementById("radio2");
var3=document.getElementById("radio3");
if(var1.checked==true)
{
document.myform.action="A.html";
}
elseif(var2.checked==true)
{
document.myform.action="B.html";
}
else
{
document.myform.action="C.html";
}
}
</script>
function test()
{
alert('Testing')
}
{% block radio_buttons %}
<br><br><br>
<!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
<input type="radio" id="radio1" name="project_type" value=0 checked onclick="select('this')"><label>Projects I own</label>
<br>
<input type="radio" id="radio2" name="project_type" value=1 onclick="test()"><label>Projects I manage</label>
<br>
<input type="radio" id="radio3" name="project_type" value=1 onclick="select()"><label>Projects I can edit</label>
<br>
{% endblock %}
This code I have added in templates. I tried adding alerts. Alert get exceuted but not onclick event
The select function contains a syntax error and is therefore never executed.
Write:
else if (var2.checked==true)
instead of
elseif (var2.checked==true)
To avoid these kind of errors open the developer console of your browser and check if syntax errors are shown.
Second the choice of select for the function name is unfortunate, since input elements have a select function which is called instead of your function.
To avoid this rename your function (e.g. radioSelect) and call it accordingly (onclick="radioSelect(this);").
Also your test function is placed outside of a script element which is not a good idea.
You have quite a few syntax errors in your code. And you don't need the (btn) after your select in your function. You have omitted a few semi-colons, not least the one after the testing alert.
This code works
<head>
<script>
function select() {
var1 = document.getElementById("radio1");
var2 = document.getElementById("radio2");
var3 = document.getElementById("radio3");
if (var1.selected === true) {
document.myform.action = "A.html";
}
else if(var2.selected === true) {
document.myform.action = "B.html";
} else {
document.myform.action = "C.html";
}
}
function test() {
alert('Testing');
}
</script>
</head>
<body>
<br>
<br>
<br>
<!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
<input type="radio" id="radio1" name="project_type" value=0 checked onclick="select();">
<label>Projects I own</label>
<br>
<input type="radio" id="radio2" name="project_type" value=1 onclick="test();">
<label>Projects I manage</label>
<br>
<input type="radio" id="radio3" name="project_type" value=1 onclick="select();">
<label>Projects I can edit</label>
</body>
Here is a fiddle
if(document.getElementById('3w').checked) {
alert('3w');
}else if(document.getElementById('6w').checked) {
alert('6w');
}
<input type="radio" name="pnltype" id="3w" value="3w" /> 3W
<input type="radio" name="pnltype" id="6w" value="6w" checked /> 6W
My problem:
this will run perfectly in firefox. For example, if I tick 3w and than choose "reload", I get alert '3w'
But not in Chrome.
In Chrome although I check 3W, and then manually "reload" the page, 'the alert will be '6w'.
What is the reason?
In previous versions I used the onClick option in the radio buttons and this function:
function radioClick() { window.location.reload(); }
And again - in firefox it behave as expected, not in chrome
Thanks for any help.
remove the checked attribute in the second input.
I feel using jquery will be easy for this kind of things. give it a try
http://code.jquery.com/jquery-1.11.1.min.js
<input type="radio" class="any-name" name="pnltype" id="3w" value="3w" /> 3W
<input type="radio" class="any-name" name="pnltype" id="6w" value="6w"/> 6W
$('.any-name').on('click', function(){
alert($(this).val());
});
http://jsfiddle.net/yasithao3/j1ujhetd/1/
try this without reload it should work:
<script>
function check(){
if(document.getElementById('3w').checked) {
alert('3w');
}else if(document.getElementById('6w').checked) {
alert('6w');
}
}
</script>
<body onload="check()">
<input type="radio" name="pnltype" id="3w" value="3w" onclick="check()"/> 3W
<input type="radio" name="pnltype" id="6w" value="6w" checked onclick="check()"/> 6W
</body>
Please refer following code
<title>Test</title>
<script>
function ClickEvent()
{
if(document.getElementById('3w').checked) {
alert('3w');
}
if(document.getElementById('6w').checked) {
alert('6w');
}
}
</script>
<body>
<input type="radio" name="pnltype" id="3w" value="3w" onclick=" ClickEvent()" /> 3W
<input type="radio" name="pnltype" id="6w" value="6w" checked onclick="ClickEvent()" /> 6W
</body>
I've got a series of radio buttons and a submit button:
<input type="radio" name="selectme_resubmit" id="selectme_resubmit1" value="first" /> <label for="selectme_resubmit1">Resubmit with the original submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit2" value="without" checked /> <label for="selectme_resubmit2">Resubmit without any submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit3" value="custom" /> <label for="selectme_resubmit3">Resubmit with a custom submitter:</label> <input type="text" name="selectme_custom_submitter" id="selectme_custom_submitter" /><br>
<input type="button" id="selectme_resubmit_button" name="selectme_resubmit2_button" value="Place a submit template" onclick="selectme_act(\'resubmit\')" />
I also have the following javascript (with jquery):
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
However, I get "undefined" in the console, even when I select something... what am I doing wrong?
I tested your code and the selector does work. The only issue I found was that you were escaping the ' character when it was not needed in the onclick event
you miss ready function
$().ready(function(){
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
});
please use ready function before your declaration
and check this link http://jsfiddle.net/FQGuu/