Onclick On Radio Button Not Working - javascript

So I have this radio button and text field in a form. When the page loads, the disable field method gets called and disables the text field. What I am trying to do next is to re enable the text field by activating the radio button. Hence I have an onclick event on the radio button that calls the enablefield method. But its refusing to reactivate the textfield. Is it the syntax you reckon?
<form>
<input type="radio" name="asiinternship" value="Tadween Publishing" onclick="enableField(applyingforother)" />Other <input type="text" name="applyingforother" maxlength="56" style="width:143px;margin-bottom:20px;" />
</form>
<script>
function enableField(myField)
{
myField.disabled = false
return true
}
function disableField(myField)
{
myField.disabled = true
return true
}
disableField(document.forms["contact_form"].applyingforother)
</script>

You're missing quotes:
onclick="enableField(applyingforother)
should be:
onclick="enableField('applyingforother')

Related

Checked radio button

I need to know if a radio button has been selected to hide / show other options.
<input #r4 type="radio" name="x">
<span>Group</span>
<div class="subOption" *ngIf="r4.checked"></div>
div.subOption must be displayed when it has been selected.
it's correct?¿
I would just create a new boolean variable in the component, that you set as true when radio button has been checked. With that boolean you then display the div. So for example:
isChecked: boolean = false; // our new variable
<input type="radio" name="x" (click)="isChecked = true">
<div *ngIf="isChecked">
<!-- Your code here -->
</div>
EDIT: As to multiple radiobuttons... as mentioned in a comment, radio buttons seems at this point be kind of buggy with Angular. I have found the easiest way to deal with radio buttons seems to be using a form. So wrap your radio buttons in a form, like so:
<form #radioForm="ngForm">
<div *ngFor="let val of values">
<input (change)="changeValue(radioForm.value)" type="radio" [value]="val.id" name="name" ngModel />{{val.name}}
</div>
</form>
whereas on radio button would look like the following in this example:
{
id: 1,
name: 'value1'
}
In the form there is a change event, from which we pick up the chosen radio button value.
(change)="changeValue(radioForm.value)"
Then I would just play with boolean and the value chosen:
changeValue(val) {
this.valueChosen = true; // shows div
this.chosenVal = val.name; // here we have the value chosen
}
A plunker to play with: here

form with js, html, not hidden fields at first

I have a problem with a field,
code
HTML
<span id="sudaner">
<input type="radio" name="traveledis" checked value="0" >No
<input type="radio" name="traveledis" value="1" />Yes
</span>
<div id="sudandetails">`
and this is the js code
$("#sudaner input[type='radio']").click(function(){
if($(this).attr("value")=="1"){
$("#sudandetails").css("display","block");
$("#countries").prop('required',true);
$("#bcfrom").prop('required',true);
$("#bcto").prop('required',true);
$("#country_reason").prop('required',true);
}
else {
$("#countries").prop('required',false);
$("#countries").val("");
$("#bcfrom").prop('required',false);
$("#bcfrom").val("");
$("#bcto").prop('required',false);
$("#bcto").val("");
$("#country_reason").prop('required',false);
$("#country_reason").val("");
$("#sudandetails").css("display","none");
}
});
I have 'checked' active in 'NO' but when I go to the form, I see the 'No' in default but the fields aren't hidden at first. I need to move the selection by 'Yes' and again 'No' and the fields are hidden or click 2 times in 'No' and the fields are hidden. so I don't understand why the field aren't hidden at first.
Thanks for your help
I made a fiddle for you and combined the ready function with the click function in an own handler. You can't only check the value on click because there is no click if the document gets loaded, so nothing happens.
https://jsfiddle.net/ww582Lj9/
function myHandler(e) {
if($(this).attr("value")=="1"){
$("#sudandetails").css("display","block");
$("#countries").prop('required',true);
$("#bcfrom").prop('required',true);
$("#bcto").prop('required',true);
$("#country_reason").prop('required',true);
}
else {
$("#countries").prop('required',false);
$("#countries").val("");
$("#bcfrom").prop('required',false);
$("#bcfrom").val("");
$("#bcto").prop('required',false);
$("#bcto").val("");
$("#country_reason").prop('required',false);
$("#country_reason").val("");
$("#sudandetails").css("display","none");
}
}
$(document).ready(myHandler);
$("#sudaner input[type='radio']").on("click", myHandler);
You need to hide this div initially. add this line in you script
$("#sudandetails").hide();
You bind an event on click and when page load click event not trigger.

How to enable/disable a text box on clicking a button

For example my page has a text box which already has some value and the readonly option for it is "true" , when the edit button is clicked next to the text box , the editing option in text box is enabled. How do I implement enabling the textbox when i click on a button.
function func() {
$("input:button[name='button1']").click(function() {
$("#text11").val($(this).val()).attr("disabled", "disabled");
if($(this).val() != "") {
$("#text11").attr("disabled", "").focus();
}
});
}
<input type="text" name="text11" readonly="readonly" value="Editing is disabled">
<input type="button" value="edit" name="button1">
which is when I click this button , the readonly option in textbox should be disabled.How do I do that ?
basically you just want to add the attribute disabled to your element to stop users using it.
$('#disablebutton').click(function(){
$('#textfieldToClose').attr('disable');
});
<input type="text" name="text11" readonly="readonly" id="textfieldToClose">
<input type="button" value="edit" name="button1" id="disablebutton">
i believe this should work, haven't tested it mind.
You need to use HTML DOM objects...
http://www.w3schools.com/jsref/default.asp

javascript function to uncheck input checkbox before sending

I have difficulty to solve this and would ask your help !
I'm trying to make a javascript but i had no success
i have inside a form below, two input checkbox, when the user press the submit
i want to verify if the two checkbox is checked, if they are checked i want to
disable the two before sending it to another page,
and if only one of then is checked, i want to do nothing.
<form action="{$GLOBALS.site_url}/search/">
<input type="checkbox" checked = "checked" name="new[equal]" value="1" /> New <br>
<input type="checkbox" checked = "checked" name="used[equal]" value="1" /> Used <br>
<input type="submit" class="button" value="[[Find:raw]]" />
</form>
thank you friends
Have a look here : http://api.jquery.com/checked-selector/
It explains to you how you can use jquery to check if a checkbox is checked or not.
You can try this.
var new = document.forms[0]["new[equal]"],
used = document.forms[0]["used[equal]"]
if(new.checked && used.checked){
new.disabled = true;
used.disabled = true;
}
If you have multiple forms on the page then you should provide a name to the form and use the form name to select the required form.
Something like this will do.
document.formName.elementName or document.formName['elementName']
Update:
If you want to validate this on submit button click then you can create a JS function with above code and call it on submit button click
HTML
<input type="submit" onclick="ValidateForm()" value="Submit" />
JS
function ValidateForm(){
var new = document.forms[0]["new[equal]"],
used = document.forms[0]["used[equal]"]
if(new.checked && used.checked){
new.disabled = true;
used.disabled = true;
}
}

problem with jquery for add cart button

hi i have a problem with displaying amount.i have the page called make payment in this page i made three radio buttons, if i click the button that amount must add with addcart like a product.
<form method="post" form name="make_payment_frm" action="module/make-payment-module.php" onsubmit="return show_make_payment_validation();" >
<form id='theForm'>
<input type="hidden" name="totalamount" id="totalamount" value="1" />
input type="radio" name="rmr" id="payment1" value="3" onclick="updatepayment(this.value)" />
input type="radio" name="rmr" id="payment2" value="5.5" onclick="updatepayment(this.value)"/>
input type="radio" name="rmr" id="payment4" value="10" onclick="updatepayment(this.value)"/>
div id="finalamount">
/div>
i think that problem is my js script. if i click that button there is no response. how do i solve that problem
you guys can give me any idea
$(document).ready(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).click(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).attr("checked", false);
});
$(this).attr("checked", true);
});
});
})
function updatePayment(val) {
$("<p/>").html("updatePayment(" + val + ")").appendTo(document.body);
}
thanks.have a nice day
I have no idea why you seem to be implementing the selecting and un-selecting of radio buttons in jQuery, surely HTML will handle that correctly for you.
However if you are using jQuery, do away with those onclick attributes since that is the benefit of jQuery and achieve the same result as follows:
$(function() {
$('.cart :radio[name="rmr"]').change(function() {
if ($(this).is(':checked'))
updatePayment(this.value);
});
});
This will attach a change event to every radio button input with the attribute name="rmr". Thus when the client clicks a new radio button, the value of two radio buttons will change, and the one that is then selected will call the updatePayment function with its value.

Categories