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
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 want to make an open "other" field in an HTTP radio form like in the following picture. is it possible? i had in mind something like this:
class="text"><input type="radio" name="sex" id="sex" ="male" checked />male
<input type="radio" name="sex" id="sex" value="female" /> female
<input type="text" name="sex" id="sex" value=(Entered-Value)/>enter other:
A simple demo snippet. It add a change event to the radio buttons and checks the value and based on that shows or hides the textbox.
<div id="radiolist">
<div>
<input type="radio" name="sex" id="sex_1" value="M" />
<label for="sex_1">Male</label>
</div>
<div>
<input type="radio" name="sex" id="sex_2" value="F" />
<label for="sex_2">Female</label>
</div>
<div>
<input type="radio" name="sex" id="sex_3" value="A" />
<label for="sex_3">Apache Helicopter</label>
</div>
<div>
<input type="radio" name="sex" id="sex_4" value="O" />
<label for="sex_4">Other</label>
</div>
<div id="sex_other_container" style="display:none">
<input type="text" name="sex_other" id="sex_other" maxlength="25" />
</div>
</div>
<script>
var $othersex = $('#sex_other_container');
$('#radiolist input[type=radio]').bind('change', function () {
if ($(this).val() === 'O') {
$othersex.show();
} else {
$othersex.hide();
}
});
</script>
It really depends if you want to say hide/show the text box when they select other.
But, then again, they might change their mind, or not even enter anything into that text box - so you start to expand the complexity of the UI.
Sometimes its just better to drop in a radiobuttion list, edit the choices, and then drop in a div next to the rb list, float it, and you are done.
Say, like this:
<div style="float:left">
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
<asp:ListItem >Other</asp:ListItem>
<asp:ListItem>Prefer not to say</asp:ListItem>
</asp:RadioButtonList>
</div>
<div style="float:left;margin-left:-65px;margin-top:1px">
<br />
<br />
<br />
<asp:TextBox ID="txtOther" runat="server" Height="18px" Width="70px"></asp:TextBox><br />
</div>
<div style="clear:both;height:8px"></div>
<asp:Button ID="Button1" runat="server" Text="Button" cssclass="btn"/>
And you get this:
And you code behind say can be this for the button
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim sChoice As String = RadioButtonList1.SelectedItem.Value
If sChoice = "Other" Then
' get the text enter
sChoice = txtOther.Text
End If
Debug.Print("User choice = " & sChoice)
End Sub
So, keep it simple is often the easy approach here. If 20 things on your page are OH SO having to be customized with JavaScript and all kinds of specials markup, then your project gets in trouble real fast. 10-15 things on a page, each a few minutes of time now becomes say 10-20 minutes of time, and that translates into 100-200 minutes of development time. Then the project and efforts takes way too long to finish.
And if you can try to stick to standard controls, then as above shows, the resulting code behind becomes (and stays) rather simple.
I am aiming to create a form to handle disabled JavaScript experience for a small component on my website. Currently I have the following form:
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="radio" id="uid1" name="someParam" value="fruity" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" />
<label for="uid2">Vegetable</label>
...other radio options
<input type="submit" value="Submit" />
</form>
Clicking on either of the radio options and then on the submit button will result in:
option 1: https://mywebsite.com/somedirectory/?someParam=fruity
option 2: https://mywebsite.com/somedirectory/?someParam=veggie
How can I add another value for each of the radio options? Say I would like to pass someOtherParam which is unique for each option and I would like to get this as output for my options:
option 1: https://mywebsite.com/somedirectory/?someParam=fruity&someOtherParam=apple
option 2: https://mywebsite.com/somedirectory/?someParam=veggie&someOtherParam=pepper
What I have tried is:
<input type="radio" id="uid1" name="someParam" value="fruity&someOtherParam=apple" />
<input type="radio" id="uid2" name="someParam" value="veggie&someOtherParam=pepper" />
However, the & symbol is converted to %26 inside the link and feels too hacky. Is there a better way to achieve this? Also, is there a way to make sure the Submit button is only enabled once a radio option is selected?
P.S. I am aiming for pure HTML experience with no Javascript involved. Is that possible?
I'm pretty sure this is not posible in modern browsers without the use of JS. Maybe on old browsers you could do some tricks with CSS and display:none because it used to not send fields with display:none, but nowdays that is not an option.
If you can allow Javascript, you can add a data attribute to each radio option and use it to populate an extra hidden input on change.
document.querySelectorAll('input[type=radio][name="someParam"]')
.forEach(radio => radio.addEventListener('change', (event) =>
document.getElementById('someOtherParam').value = event.target.dataset.extraValue
));
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="radio" id="uid1" name="someParam" value="fruity" data-extra-value="apple" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" data-extra-value="pepper" />
<label for="uid2">Vegetable</label>
<input type="hidden" id="someOtherParam" name="someOtherParam">
<input type="submit" value="Submit" />
</form>
To add another radio group independent from others, use a distinct name property. For example, to add a second parameter called someOtherParam to the request, create a radio group with name="someOtherParam":
<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />
And add their correspondent labels.
Also, is there a way to make sure the Submit button is only enabled once a radio option is selected?
You can add the required attribute to prevent the browser to send the form before all the inputs have a value.
Without javascript, what you're describing cannot be done.
What you could do, as other posters have suggested is:
Create radio buttons for the list of options that are possible for each category (fruits / vegetables etc)
<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />
When processing the input on your server side code, check if you have received a value or not. If not, you can choose a default option (apple or whatever). On your page you can mention what the default option would be in case they don't make a selection.
You could make some of the input required as suggested, but you would still have to make check on the server side that the input has been received, since the required attribute is just a suggestion to users browsers - it won't stop a malicious persons from making a request without that parameter by running a script etc.
To submit extra information to the server, you can use a hidden input type and change value as per your needs using javascript.
HTML code
<form method="GET" action="">
<input type="radio" id="uid1" name="someParam" value="fruity" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" />
<label for="uid2">Vegetable</label>
<input type="hidden" id="uid3" name="someOtherParam" value="" readonly required />
<input type="submit" value="Submit" onclick="onSubmit()" />
</form>
Javascript code
function onSubmit () {
let fruityRadio = document.getElementById( 'uid1' );
let veggieRadio = document.getElementById( 'uid2' );
if ( fruityRadio.checked ) {
document.getElementById( 'uid3' ).value = 'apple';
} else if ( veggieRadio.checked ) {
document.getElementById( 'uid3' ).value = 'pepper';
}
}
Easy, double up the value with a deliminator between every extra value:
HTML
<div>
<label for="uid1">
<input id="uid1" name="fruit1" type="radio" value="apple:orange" />
Fruit, Apple + Orange
</label>
</div>
<div>
<label for="uid2">
<input id="uid2" name="fruit1" type="radio" value="apple:cherry:lime" />
Fruit, Apple + Cherry + Lime
</label>
</div>
node.js
I'm not sure how node.js handles what PHP refers simply as $_POST['name_attribute_value_here'] though I do know you simply want to use .split(':') to get the two or more values from that single form. If you want more options per radio button just append a deliminator (it doesn't have to be :) between each value.
Both of those radio options have the name "fruit1" so the user can't choose both.
No JavaScript is necessary.
A minor adaptation on the server.
Extra values will obviously not appear to the server if the user doesn't select that radio form field.
Arrays
If you want to set your own key/values then just add a second deliminator:
<input name="fruit1" value="fruit:apple,fruit:lime,color:purple,planet:Earth" />
Then at the server use [whatever].split(',') to get the pairs and iterate in a loop to get each key/value. You could create an entire crazy multi-dimensional array if you really wanted to.
I hope this helps, feel free to comment if you need any further clarification.
Generate form:
const data = [
{ name: 'apple', type:"fruity" },
{ name: 'pepper', type:"veggie"}
]
const form = document.querySelector('form');
const uid = document.querySelector('#uid')
createOptions(data);
function createOptions(data){
data.forEach((e, index) => {
const f = document.createDocumentFragment();
const l = document.createElement('label');
const i = document.createElement('input');
l.setAttribute('for', `uid${index+1}`);
l.textContent=e.name;
i.setAttribute('type', `radio`);
i.setAttribute('for', `uid${index+1}`);
i.setAttribute('name', 'someOtherParam');
i.setAttribute('value', e.name);
i.dataset.otype = e.type;
f.appendChild(l);
f.appendChild(i);
form.insertBefore(f, uid);
i.addEventListener('change', onselectChange, false);
})
}
function onselectChange(event) {
uid.value = event.target.dataset.otype;
}
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="text" id="uid" name="someParam"
style="width:0; visibility: hidden;">
<input type="submit" value="Submit" />
</form>
I can't think another way of doing this using less code, the following achieves your desired result:
<form name="form" method="GET" action="">
<input type="radio" id="uid1" name="someParam" required value="fruity" onchange="document.form.someOtherParam.value = 'apple'" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" required value="veggie" onchange="document.form.someOtherParam.value = 'pepper'" />
<label for="uid2">Vegetable</label>
<input type="hidden" name="someOtherParam" value=""/>
<input type="submit" value="Submit"/>
</form>
There's only 3 changes to your example:
Add a name to the form, then add inline attributes required and onchange to each radio, finally add an input[type=hidden] to include the extra param. The first change is meant so you'll not need document.getElementById later, the second so the form won't be empty submitted and also update the hidden desired value.
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
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);