I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>
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 have two radio buttons on my HTML page for gender selection (M or F).
How to retrieve which button was clicked in my typescript file? Here's the code
<form>
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<br>
<button id="signup" class="btn btn-primary" type="submit">Signup</button>
</form>
On clicking the button, I want to assign M or F to a string in my typescript file.
You code is correct. No need to change anything.
This is your template code.
<form (ngSubmit)="onSubmit()">
<label>Gender</label>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<button id="signup" type="submit">Signup</button>
</form>
In your .ts file,
export class TestComponent implements OnInit {
gender: string = "Male";
onSubmit() {
console.log(gender);
}
}
This will give you the selected gender value.
Because you have used two way binding. It updates the ngModel whenever the input changes.
you can retrieve which button click by add ngModelChange method
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Female
<br>
</div>
<button id="signup" class="btn btn-primary" type="submit" >Signup</button> </form>
in your ts file
youMethodName(model) {
console.log("TCL: youMethodName -> model", model)
}
Although, answer is already accepted. I want to give solution of this problem if you do not want to use Two way data binding. this way is useful for breaking down two way data binding. So, there is no need for [(ngModel)] . Complete Working Demo found here in StackBlitz Link
Your HTML ...
<form>
<fieldset id="group1">
<input type="radio" (change)="handleChange($event)" name="group1" value="Male"/>Male
<input type="radio" (change)="handleChange($event)" name="group1" value ="Female"/> Female
</fieldset>
<div *ngIf="_prevSelected"> {{ _prevSelected}} </div>
<button (click)="click()">Show</button>
<div *ngIf="clicked"> <span> selected value is {{_prevSelected}} </span></div>
</form>
Your class file is..
private _prevSelected: any;
clicked:boolean;
handleChange(evt) {
let target = evt.target;
if (target.checked) this._prevSelected = target.value;
}
click(){
this.clicked =true;
}
We currently use the following syntax for radio buttons:
<input type="radio" id="opt1" name="option" value="opt1" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="opt2" required/>
<label for="opt2">Description of Option Two</label>
The query-processing script receives the string "opt1", which it then needs to convert to the full-text description of the option. In PHP-speak, I get:
$_POST['option'] => "opt1"
I'd like to save that step and have the full text of the description to be submitted as the value:
$_POST['option'] => "Description of Option One"
Can this be done with HTML alone -- without resorting to JavaScript-rewriting hacks and without duplicating the description text in the HTML? Thanks!
Unfortunately not.
If you have control over the form, the best solution is to use the description for the value:
<input type="radio" id="opt1" name="option" value="Description of Option One" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="Description of Option Two" required/>
<label for="opt2">Description of Option Two</label>
If you don't have control over the form, then javascript is your only solution, you could use a function like the below (either inside an onload event for the page or an onsubmit event on the form:
function radioUpdate() {
document.querySelectorAll('radio').forEach(function(input) {
input.value = document.querySelector('label[for="' + input.id + '"]').text();
});
};
No, it can't.
Consider generating the HTML from your server side code in the first place. You could write a PHP function that takes the label/value as a single argument.
In a page, for getting field values I didn't use form tag, instead used Anchor tag's click event to get the values and used AJAX call to pass it to server.
Later tried out the HTML 5 pattern validation, it didn't work out; after so much try added form tag and then modified "anchor" to "button", then it worked.
Old
<div id="div1">
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
<a id="add" onclick="addMessage();">Add</a>
</div>
New
<form id="addMessage">
<div id="div1">
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
<button id="add">Add</button>
</div>
</form>
Is using a form tag and form submission the only way to trigger Pattern validation or are there any workarounds?
There's a nice overview of constraint validation in HTML5 on HTML5Rocks.
You can manually validate fields by calling the checkValidity() method on the DOM element in JavaScript:
document.getElementById('add').addEventListener('click', function() {
if (document.getElementById('message').checkValidity()) {
window.alert('valid station name');
// addMessage();
} else {
window.alert('invalid station name!');
}
});
<div id="div1">
<label>
Station
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" maxlength="3">
</label>
<a id="add" role="button">Add</a>
</div>
And also for reference: HTMLInputElement