I want to get a radio button to display an alert when it is selcted, so the user can check that they have chosen the correct value. This is the code I have for the radio buttons:
<tr>
<td><input type="radio" name="level" id="GCSE" value="GCSE">GCSE<br>
<input type="radio" name="level" id="AS" value="AS">AS<br>
<input type="radio" name="level" id="A2" value="A2">A2</td>
</tr>
How would I get so when any of these radio buttons are selected an alert is displayed to the user saying: "Are you sure you have chosen the correct entry level?"
Please keep answers simple, as I have only been learning HTML for 3 weeks
You can do:
<input type="radio" name="level" id="GCSE" value="GCSE" onclick="alert('test');" />
Good luck!
let's assume you have a form called # Myform
Then your code will be like this:
<form id="myForm">
<input type="radio" name="level" id="GCSE" value="GCSE" /> GCSE <br />
<input type="radio" name="level" id="AS" value="AS" /> AS <br />
<input type="radio" name="level" id="A2" value="A2" /> A2 <br />
</form>
Then, put in a tag script something like this:
<script>
$('#myForm input').on('change', function() {
alert("Are you sure you have chosen the correct entry level? +"$('input[name=level]:checked', '#myForm').val());
});
</scritp>
Hope this works for you!
Thx
Related
I am trying to use an HTML button to link to a new website given a provided text field input.
I have choices like this:
Option: <br />
One <input type="radio" value="Short"
name="option" <br />:
Two <input type="radio" value="Long"
name="option" <br />:
Three <input type="radio" value="Zero"
name="option" <br />:
And I want to have a button go to .../one if One is selected, .../two if Two is selected, etc...
<form> <input class="MyButton" type="button" value="Google"
onclick=window.location.href='www.google.com' /> </form>
I know this is how I go to a specified link, but I want to go to a link based on my option choice, not a static choice. Thanks
Af first you have to fix your HTML Error. No input element has end tag.
Wrap one, two, three with span
Option: <br />
<span>One</span> <input type="radio" value="Short" name="option" /> <br />
<span>Two</span> <input type="radio" value="Long" name="option" /> <br />
<span>Three</span> <input type="radio" value="Zero" name="option" /> <br />
<form> <input class="MyButton" type="button" value="Google" /> </form>
Then you can get your select value and set button onclick value
$(document).ready(function(){
$("input[type='radio']").click(function(){
var text = $(this).prev('span').text();
$('form > input').attr('onclick',
"javascript:window.location.href='https://www.google.com/" + text + "'");
});
});
After that you click on Google button, you will redired to https://www.google.com/yourSelectValue
Use javascript for this.
Make a function call when the button is clicked. something like this...
<input type="button" onclick="myfunction()"/>
and inside the function get the values from text input and use appropriate methods to go to the link.
I personally wouldn't use javascript for this, you can just use a normal button with the URL in the formaction attribute.
<form>
<button formaction="http://stackexchange.com">Stackexchange</button>
</form>
The form tags are required.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction
I'm trying to use Angular's $dirty flag to submit only the changed fields in a form.
When I ran into radio button groups, I was missing the changes in the list of changed fields. I have a fiddle that reproduces the problem I am seeing.
<div ng-app="form-example" ng-controller="MainCtrl">
<form name="form" novalidate>
<input type="radio" name="myRadio" ng-model="myRadio" value="one" required>One<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="two" required>Two<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="three" required>Three<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="four" required>Four<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="five" required>Five<br /><br />
Form $dirty: {{form.$dirty}}<br />
Field $dirty: {{form.myRadio.$dirty}}<br />
Value: {{myRadio}}
</form>
</div>
The field's $dirty flag will only change when the last radio button is clicked even though the form $dirty updates properly.
Am I missing something fundamental here? and is there a workaround for this behavior?
Each ng-model actually instantiates a controller.
When you click any radio button, the controller sets $dirty field to true and sets form.$dirty to true.
The problem is that form.myRadio holds the reference to the last radio button's model.
As a workaround you can use nested forms with ng-form. See here: http://jsfiddle.net/UM578/
I gave each radio input a unique name. Maybe you can give a broader view of what you are trying to do.
<div ng-app="form-example" ng-controller="MainCtrl">
<form name="form" novalidate>
<input type="radio" name="myRadio1" ng-model="myRadio" value="one" required>One<br />
<input type="radio" name="myRadio2" ng-model="myRadio" value="two" required>Two<br />
<input type="radio" name="myRadio3" ng-model="myRadio" value="three" required>Three<br />
<input type="radio" name="myRadio4" ng-model="myRadio" value="four" required>Four<br />
<input type="radio" name="myRadio5" ng-model="myRadio" value="five" required>Five<br /><br />
Form $dirty: {{form.$dirty}}<br />
Field 1 $dirty: {{form.myRadio1.$dirty}}<br />
Field 2 $dirty: {{form.myRadio2.$dirty}}<br />
Field 3 $dirty: {{form.myRadio3.$dirty}}<br />
Field 4 $dirty: {{form.myRadio4.$dirty}}<br />
Field 5 $dirty: {{form.myRadio5.$dirty}}<br />
Value: {{myRadio}}
</form>
I have 2 radio inputs. A,B
I an trying to make A as a selected radio by default.
And I want the following behavior: when A get hidden then B should get checked by default.
This is what I tried. Please take a look.
<div >
<input type="radio" checked="checked" value="0" name="a" />
<strong>A</strong>
</div>
<div>
<input type="radio" checked="" value="1" name="b" />
<strong>
B
</strong>
</div>
<input type="text" onfocus="Javascript:document.forms[1].opt_payment[1].checked=true;" maxlength="20" value=" " name="" />
Thanks
Use the attribute checked="checked" for A. Also, if you want only one of A and B to be checked at a time, give them the same name but different values.
checked="" means "Should be checked by default". There is no way to have the attribute present but indicate "not checked".
If you don't want a form control to be checked by default then do not include any checked attribute for it
<div >
<input id="radioA" type="radio" checked="checked" value="0" name="a" />
<strong>A</strong>
</div>
<div>
<input id="radioB" type="radio" value="1" name="b" />
<strong>
B
</strong>
</div>
Script:
if($("#radioA").is(":hidden")){
$("#radioB").attr("checked","checked");
}
you can also use
$("#radioB").attr("checked",true);
or use prop for jquery version > 1.6
$("#radioB").prop("checked",true);
My form is currently set up to gather all the input data to my autoresponder...however, I made the form with only one option - pay now. Users would like options, so Im thinking of giving them 2 choices, the old "pay now" COD method, and option#2 paypal. I think radio buttons are the best way for doing this. However I cant get them to work separately...when I choose option 2, option 1 remains selected. So I added the radio buttons myself after the ordernow button.
<p>mail: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__email" name="mail" class="mj" ></input>
</label>
</p>
<p>name: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__required" name="name" class="mj" ></input>
</label>
</p>
<p>
<input type="submit" value="ORDER NOW" class="butt">
<div class="selectpaymentradios">
<label class="radio" >select payment</label>
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
</div>
<input type="hidden" name="webform_id" value="12x45"/>
</p>
</form>
<script type="text/javascript" src="http://xyz.com/view_webform.js?wid=12x45&mg_param1=1"></script>
Im trying to figure out how can I make this work with my autoresponder, I think this form has to be able to tell me what kind of payment did the customer chose...but the autoresponders form creator doesnt have radio buttons at all so Im stuck, I dont know if its possible...
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
the problem you hit, is very simple - you have to use the same name for all radio-buttons, where only one item should be selected. like this:
<input class="radio" type="radio" name="payment" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="payment" value="ppal" /> <span>PaypaL</span>
The name attribute should be the same for both radio buttons:
<input class="radio" type="radio" name="method" value="cash" checked="checked" /> <span>Ca$h</span>
<input class="radio" type="radio" name="method" value="ppal" /> <span>PaypaL</span>
Also, if you are closing input tags, you are probably worried about XHTML validation. So instead of just checked you should type checked="checked".
I have two radio buttons. I want one of them to be shown as selected when the page loads. Which property I should use, and how?
Example:
<input type="radio" name="musictype2" value="rock" default> Rock<br>
<input type="radio" name="musictype2" value="alternative"> Alternative<br>
<input type="radio" name="test" value="2" checked="checked" />test
like this?
<input type="radio" name="genreselect" value="rock" checked="checked" />
<input type="radio" name="genreselect" value="alternative" />
In this case "rock" is preselected.
<form>
<input type="radio" name="genre" value="rock" checked /> Rock<br />
<input type="radio" name="genre" value="alternative" /> Alternative
</form>
This is the correct way. The name attribute needs to be the same in order for them to switch between.
Check it here.
This is how you use the checked attribute:
<input type=radio name="my_name" VALUE="my_value" checked />