on Focus not working when textbox selected - javascript

I have a form here which id like the users to be able to select the radio button to choose a pre-defined amount option, or press the textbox (focus) to select the custom amount. The purpose of the javascript below is to clear the textbox when a predefined amount has been selected. It also allows users to CLICK the textbox (onfocus) to enter a custom amount in the CP_otheramount field (also use the radio button as a fallback).
It all seems to be working except for the onfocus. It works perfectly on load...but try this scenario:
Load the page, click inside the textbox but then decide to change your mind by selecting the value 3 radio button (64)...and then decide to press inside the onfocus textbox amount again... it become disabled and stops you from clicking inside or writing a number in!
Can anyone see the problem here at all? Its strange because it works on Stackoverflow just not on the live site. ANy help would be really appreciated.
Here is what has been created so far:
function activate() {
$('#other').prop('checked', true);
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

The problem with your code is that you are checking every radio button without un-checking them.
function activate() {
// $('#other').prop('checked', true); Remove this line;
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
And also
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
UPDATE:
It was working for me but I don't know why it's not working for you, so I rewrote the functions..See if this works for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
<script>
function activate(){
$('#theamount').attr('disabled',false);
$('#theamount').focus();
$('#other').click();
}
function deactivate(){
$('#theamount').val('');
$('#theamount').attr('disabled',true);
}
$('#toggle').click(function(){
activate();
});
$('input[name="am_payment"]').change(function(){
if($(this).val() != ""){
deactivate();
}else{
activate();
}
});
</script>

Related

How to assign the input from two radio buttons to a single field?

I am new in coding. I have two radio buttons. If a “yes” is selected in either from them a certain field (here kouAP) must be AUTOMATICALLY set to a value (in this case 0.56). The problems are:
how to make both radio buttons to set the value to a single field?
How to keep the wished value if one of the is “yes” and the other is “no”? No matter of the order of clicking.
My JQuery makes no sense :(
Thanks you
HTML
<label for="Pre002">ccs</lable>
<br />
<input type="radio" id="Pre002o" name="css" value="0">
<label for="Pre002o">none</label>
<input type="radio" id="Pre002d" name="css" value="4">
<label for="Pre002d">yes</label>
<br />
<label for="Pre066">mi</lable>
<br />
<input type="radio" id="Pre066a" name="mi" value="0">
<label for="Pre066a">yes</label>
<input type="radio" id="Pre066b" name="mi" value="1">
<label for="Pre066b">no</label>
<br />
<input id="kouAP" type=“text” name="kouAP" readonly="true" placeholder="kouAP">
<label for="kouAP">at least one yes</label>
JQuery
$('input[type=radio].css; input[type=radio].mi').click(function(e){
if ($(this).attr("id") == "Pre002d" || $(this).attr("id") == "Pre066a" ){
$("#kouAP").val(0.5677075);
}
else {
$("#kouAP").val(0);
}
});
There is nothing wrong with code.
Just provide the name of the element you listen the click from.
Replace:
$('input[type=radio].css; input[type=radio].mi').click(...);
With:
$('input').click(...);
or:
$('input[type=radio]').click(...);
to avoid future errors.
I just advice you to go through the basics again :)
EDIT
For the second question, I guess it's just a work around with if..else. Hope it helps.
$('input').click(function(e){
if ($('#Pre002d').is(':checked') || $('#Pre066a').is(':checked')){
$("#kouAP").val(0.5677075);
}
else{
$("#kouAP").val(0);
}
});

Each radio button automatically redirect to the different pages on different selections through 'onclick' and not from 'submit'

I want to redirect different pages depending upon different selections from user, my code is working for one page only & when i select another pages--it hangs & shows the contents of first page only. I have to press back option in browser each time to view the contents of 2, 3, or 4 pages, otherwise it stuck. The Code is
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
function idForm(){
var selectvalue = $('input[name=choice]:checked', '#idForm').val();
if(selectvalue == "all"){
window.open('index.php','_self');
return true;
}
else if(selectvalue == "pc"){
window.open('pc.php','_self');
return true;
}
else if(selectvalue == "ps2"){
window.open('ps2.php','_self');
return true;
}else if(selectvalue == 'ps3'){
window.open('ps3.php','_self');
return true;
}else if(selectvalue == 'psp'){
window.open('psp.php','_self');
return true;
}
return false;
};
</script>
</head>
<body>
Games - This is the full List of Games, if you want to choose the games according to the Platform then select it <br /><br />
<form id="idForm">
<input type="radio" onClick="idForm()" name="choice" value="all" checked/>All
<input type="radio" onClick="idForm()" name="choice" value="pc"/>PC
<input type="radio" onclick="idForm()" name="choice" value="ps2"/>PS2
<input type="radio" onclick="idForm()" name="choice" value="ps3"/>PS3
<input type="radio" onclick="idForm()" name="choice" value="psp"/>PSP
</form>
</body>
</html>
Help me to solve this problem from pressing back option again & again in browser & view the contents for each page individually either select radio button all,pc, ps2, ps3 or psp normally, without hanging.
Thanks in advance.
Why not simplify
<form id="idForm">
<input type="radio" onClick="window.open('index.php','_self')" name="choice" value="all" checked/>All
<input type="radio" onClick="window.open('pc.php','_self')" name="choice" value="pc"/>PC
<input type="radio" onclick="window.open('ps2.php','_self')" name="choice" value="ps2"/>PS2
<input type="radio" onclick="window.open('ps3.php','_self')" name="choice" value="ps3"/>PS3
<input type="radio" onclick="window.open('psp.php','_self')" name="choice" value="psp"/>PSP
</form>

If radio box is checked go to link

I am doing a quote website and i want if a user want to see most recent quotes to press the radio button and the page will display most recent quotes . I can not figure it out how to make the radio box to send to a certain page.
<input type="radio" name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
<input type="radio" name="order" id="vechi" value="vechi" >
<label for="vechi">Most Old</label>
<input type="radio" name="order" id="aprec" value="aprec" >
<label for="aprec">Most Liked</label>
Fiddle
I want to make something like this but without be need to press the submit button, but when radio box is checked be sent automaticaly to a link.
Don`t know if this is right or not but i have seen to other websites this kind of sort.
Is this possible without javascript or jquery?
http://jsfiddle.net/ryBs6/47/ - Update jsfiddle
$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})
anyway this would work , because if i right click and open link in new tab it works , but single click doesnt work, i dont know if this is disabled for security reasons or what !
http://jsfiddle.net/prollygeek/6vCdX/
<input type="radio" name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
If you REALLY don't want to use Javascript, try wrapping the input and the label in an anchor
<input type="radio" />
If you want to use some javascript, do
<input onclick="window.open('http://google.com');" />
Or if you don't want to use the onclick attribute, use ProllyGeek's answer (I like his answer the best):
$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})
<script>
$(function(){
$("input").change(function() {
if(this.checked) {
window.location = this.value;
}
});
});
</script>
<input type="radio" name="order" id="noi" value="http://stackoverflow.com">
<label for="noi">Most Recent</label>
<input type="radio" name="order" id="vechi" value="http://stackoverflow.com" >
<label for="vechi">Most Old</label>
<input type="radio" name="order" id="aprec" value="http://stackoverflow.com" >
<label for="aprec">Most Liked</label>
FIDDLE DEMO
Without jquery:
var inputs = document.getElementsByTagName('input');
Array.prototype.forEach.call(inputs, function(item){
item.addEventListener('change', function(e){;
location.href = e.srcElement.value; // Redirect to value
});
});
<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="vechi" value="vechi" >
<label for="vechi">Most Old</label>
<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="aprec" value="aprec" >
<label for="aprec">Most Liked</label>
This should be your html
$('input[type='radio']').click(function()
{
window.location=$(this).attr('data-href')
});
You js here
Demo
Now without javascript or jquery
<input type="radio" name="order" id="vechi" value="vechi" >

javascript to jquery conversion for a code that is working fine for dynamic appearance and disappearance of a text field with radio buttons

guys I tried a lot for this code but nothing come up for conversion from javascript to jquery..
This code is irrelevant cuz u find this in working fiddle.. I added this chunk of code cuz stackoverflow dont allow me to post without a code..
<div class="rButtons">
<input type="radio" name="numbers" value="10" onclick="uncheck();" />10
<input type="radio" name="numbers" value="20" onclick="uncheck();" />20
<input type="radio" name="numbers" value="other" onclick="check(this);"/>other
<input type="text" id="other_field" name="other_field" onblur="checktext(this);"/>
</div>
Check this fiddle
http://jsfiddle.net/gDxqj/
It is working well. on clicking "other" radio button the text field comes up and on clicking any other radio button it disappears.. This is the function of this script and it is working well..
Now when i tried changing it to jquery code it died.. I can show what code i made in jquery but to no help..
Fiddle for the same will help a lot..
Thanks in advance..
This is what i did
<script>
var $radios = $('input:radio[name=numbers]');
if ($radios.is(':checked') === true) {
$("#other_field").show();
}
else
{
$("#other_field").hide();
}
</script>
I put it put that in a function and invoke it in "onchange" of radiobutton but not worked
$(':radio').on('change', function () {
$('#other_field')[$(this).val() === 'other' ? 'show' : 'hide']();
});
$('#other_field').on('blur', function () {
var val = $(this).val();
if(isNaN(val)) {
alert('only numbers are allowed..');
}
else if(parseInt(val, 10) % 10 > 0) {
alert('only multiples of 10..');
}
});
with:
<div class="rButtons">
<input type="radio" name="numbers" value="10" /> 10
<input type="radio" name="numbers" value="20" /> 20
<input type="radio" name="numbers" value="other" />other
<input type="text" id="other_field" name="other_field" />
</div>
demo: http://jsfiddle.net/BZGsw/
You just need to remove the onclick and onblur from your inputs and attach the events through jQuery:
$(function(){
$('.rButtons').on('click', 'input[type="radio"]', function(ev){
var val = $(this).val();
val == 'other' ? check(this) : uncheck();
});
$('.rButtons').on('blur', '#other_field', function(ev){
checktext(this);
});
});
See Demo
You can use .change() to bin the change event to check the state of the selected radio button then apply .toggle() on #other_field to show or hide it.
#other_field {
display: none;
}
<div class="rButtons">
<input type="radio" name="numbers" value="10">10
<input type="radio" name="numbers" value="20">20
<input type="radio" name="numbers" value="other">other
<input type="text" id="other_field" name="other_field">
</div>
$("[name=numbers]").change(function() {
$("#other_field").toggle(this.value === "other");
});
$("#other_field").change(checktext);
I modified your CSS to use display set to none instead of visibility.
See it here.

disable select form if radio is checked

How can I disable a select form dropdown if a radio button is selected?
I would like the #preference form to be disabled if the user selects the #no radio button and it to be enabled again if the user selects #yes or #maybe.
This is my form code -
<form name="xmas" id="xmas" action="send_mail.php" method="post">
<input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
<input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
<input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a call</label><br />
<div class="secondlineform">
<input type="text" name="name" class="textfield" value="Name" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<input type="text" name="email" class="textfield" value="Email" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<input type="text" name="company" class="textfield" value="Company" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<select class="dropselect" name="preference" label="Preference" id="preference">
<option selected="selected" disabled="disabled" value="Preference">Preference</option>
<option value="Alcohol Package">Alcohol Package</option>
<option value="Gift Card Package">Gift Card Package</option>
</select>
<input type="submit" value="" name="submit" id="submit" class="submit"/>
</div>
</form>
And this is my script code -
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
​
var update_select = function () {
if ($('#no').is(':checked')) {
$('#preference').attr('disabled', "disabled");
}
else {
$("#preference").removeAttr("disabled");
}
};
$(update_select);
$('#no').change(update_select);
</script>
Thanks very much for any answers! I've been researching this for ages and all the solutions I find don't seem to solve my issue.
you are adding change event for only No radio, change it to :
$("input[name='choice']").change(update_select);
Demo:: jsFiddle
$('input[type=radio]').change(update_select);​
You need to apply the update_select function to the rest of the radio button,like this
var update_select = function () {
$('#preference').attr('disabled', $('#no').is(':checked'));
};
$('#no').change(update_select);
$('#yes').change(update_select);
$('#maybe').change(update_select);
Here is the fiddle: http://jsfiddle.net/QXkhM/
Wrap your radio button list by an ul and give it an ID.
For example:
<ul id="offer">
<input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
<input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
<input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a cal
l</label><br />
</ul>
var update_select = function () {
if ($('#no').is(':checked')) {
$('#preference').attr('disabled', "disabled");
}
else {
$("#preference").removeAttr("disabled");
}
};
$(update_select);
$('#offer').change(update_select);
And it will work

Categories