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".
Related
In my html page, I cant add two radio buttons, I get an error in free-code-camp and that is about to have two radio buttons in label element with attribute of same name value for both of them in input self-closing tag.
I tried the same value for name attribute in input tag within the label element. but I got error.
<label>
<input id="indoor" type="radio" name="indoor-outdoor" > Indoor
</label>
<label>
<input id="outdoor" type="radio" name="indoor-outdoor" > Outdoor
</label>
The following example shows three radio buttons with the same name, within a label, within a form.
This is a valid structure.
const handleSubmission = (form, event) => {
event.preventDefault();
console.log(`Choice: ${form.elements.foo.value}`);
};
<form onSubmit="handleSubmission(this, event)">
<label>
<strong>Choice:</strong>
<input type="radio" name="foo" value="a" /> A
<input type="radio" name="foo" value="b" /> B
<input type="radio" name="foo" value="c" /> C
</label>
<button type="submit">Submit</button>
</form>
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'm trying to come up with a form comprised of radio buttons group where a user must select one of the options and if he doesn't there's a custom validity message.
So the logic will be:
A user forgets to select an option and the validity message shows up.
He goes back and selects any option to go proceed.
The problem is, the way things are it only goes ahead if the selected option is the one with the onclick event as shown below. If it isn't then the message will keep showing up.
I have tried to juggle around with the required, oninvalid and onclick thingies but to no avail. Any ideas?
Thanks!
<form>
<input type="radio" name="test" value="0" required oninvalid="this.setCustomValidity('Click me')" onclick="setCustomValidity('')">Zero<br>
<input type="radio" name="test" value="1" class="wrapper">One<br>
<input type="radio" name="test" value="2" class="wrapper">Two<br>
<input type="submit">
</form>
<form>
<input type="radio" id="test" name="test" value="0" oninvalid="this.setCustomValidity('Click me')" onclick="clearValidity();" required >Zero<br>
<input type="radio" name="test" value="1" onclick="clearValidity()" class="wrapper">One<br>
<input type="radio" name="test" value="2" onclick="clearValidity()" class="wrapper">Two<br>
<input type="submit">
</form>
<script>
function clearValidity()
{
document.getElementById('test').setCustomValidity('');
}
</script>
This can be written as a function to make it work on any type of <input>:
document.querySelectorAll('form *[data-custom-validity]').forEach(el => {
const firstInput = el.querySelector('input:first-of-type')
// set custom validity if first input is invalid
firstInput.addEventListener('invalid', () => firstInput.setCustomValidity(el.dataset.customValidity))
// listen on all inputs for a change
el.querySelectorAll('input').forEach(input =>
input.addEventListener('change', () => firstInput.setCustomValidity('')))
})
<form>
<div data-custom-validity="Click me.">
<input type="radio">
<input type="radio">
</div>
</form>
This worked for me, I'm leaving it here in case it helps anyone.
<div class="genero">
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="M">Masculino
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="F">Femenino
</div>
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);
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 />