I've got a checkbox, which is default "checked" - Its "POST" enable=true
Second, I've got a checkbox, which is hidden. - This must "POST" enable=false
<td>
<input style="margin-left: -100px" id='checked' type='checkbox' value='true' name='enable'>
<input id='not_checked' type='hidden' value='false' name='enable'>
</td>
So, if the checkbox have an attribute "checked" - my script is working and send enable=true.
But if, I doesn't check the box, my script stop working and doesn't send everything.
JS:
if(document.getElementById("checked").checked) {
document.getElementById('not_checked').disabled = true;
}
I have taken the example from here:
Post the checkboxes that are unchecked
try this code .. i think this will do the job
<td>
<input id='checked' type='checkbox' value='true' name='checked' style="margin-left: -100px">
<input id='not_checked' type='hidden' value='false' name='checked'>
</td>
Related
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 code in the HTML file that looks like this
<tr *ngFor="#tradeSource of tradeSources">
<td>
<label>
<input type="checkbox" ngControl="tradeSource" [(ngModel)]="tradeSource['checked']"/>
</label>
</td>
<td>{{tradeSource.blah}}</td>
<td>{{tradeSource.blah}}</td>
<td>{{tradeSource.blah}}</td>
</tr>
A user can check the check box then click a "Process" button that will run some code, after this code has run I would like to uncheck this checkbox. Ive tried code like
this.tradeSources[i]['checked'] = false
But this isnt working
The code you should rather try is:
this.tradeSources[i]['checked'] = false
Edit
I think that your problem is because you have the same name for each control of checkboxes:
<input type="checkbox" ngControl="tradeSource"
[(ngModel)]="tradeSource.checked"/>
If you remove the ngControl attribute, it works:
<input type="checkbox" [(ngModel)]="tradeSource.checked"/>
See this plunkr: https://plnkr.co/edit/FdPHpOTSySkg2gLWjo7a?p=preview.
If you really want an ngControl you could define it this way:
<tr *ngFor="#tradeSource of tradeSources;#i=index">
<td>
<label>
<input type="checkbox" [ngControl]="'trade'+i"
[(ngModel)]="tradeSource.checked"/>
</label>
</td>
(...)
</tr>
I believe the reason this is not working, and which should probably also throw an error in your console, is the usage of unbinded ngControl. It should be enough to just do:
<input type="checkbox" [(ngModel)]="tradeSource['checked']">
I have a couple of inputs outside of a form that won't submit when submitting the form for some reason.
<td>
<input type='text' form='editform' name='id' value='LIT'>
</td>
<td>
<input type='text' form='editform' name='name' value='Lituanie'>
</td>
<td>
<form action="datamanager" method="POST" id="editform" class="editform">
<input required readonly type="hidden" name="target" value="Country"/>
<input required readonly type="hidden" name="idEdit" value="LIT"/>
<input required readonly type="hidden" id="status" name="status" value="validate"/>
<input type="submit" name="submitEdit" class="validate-submit" value="" title="Validate"/>
</form>
The 3 inputs that are in the form submit properly (target, idEdit and status) but the id and name inputs just won't submit.
The weirdest part is that if I change the form attributes of the inputs and the id of the form from chrome's developer tools it then works. It's as if the browser doesn't recognize that they're linked to the form unless I change it in the developer tools...
Any ideas of what might cause that ? I've been stuck with this all afternoon when it should have been a 2 minutes thing...
Only inputs that are inside at form can be submited.so you must surround with form tag or you should put theme into existing form.
Only input elements within the form will submit, unless you have specified a form attribute.
Option 1 - Put everything in the <form>
<form action="datamanager" method="POST" id="editform" class="editform">
<td>
<input type='text' form='editform' name='id' value='LIT'>
</td>
<td>
<input type='text' form='editform' name='name' value='Lituanie'>
</td>
<td>
<input required readonly type="hidden" name="target" value="Country"/>
<input required readonly type="hidden" name="idEdit" value="LIT"/>
<input required readonly type="hidden" id="status" name="status" value="validate"/>
<input type="submit" name="submitEdit" class="validate-submit" value="" title="Validate"/>
</td>
</form>
Option 2 - Add the form attribute
If you wanted to keep your original code, add the form attribute to the inputs outside of the <form> tag.
<input type="text" name="lname" form="form1">
Important note: Option 2 will not work in IE. Be sure to read http://www.w3schools.com/tags/att_input_form.asp for more info on the form attribute.
In Html only those inputs which are in form tag are submitted.
If you have multiple form tags in an HTML only those which are in "submitted" form are submitted
I have this input:
<input name="giftwrap" type="checkbox"/>
However, when the form is submitted and the checkbox has not been checked, I get a null rather than a false. I want a false to be submitted.
I'm feeling if I give the input a default value of unchecked it'll return false rather than null as if I tick and then untick the input I get false.
So how do I set the input as checked, and how do I set the input as unchecked?
$(function() {
$('input[name=giftwrap]').on('change', function() {
$(this).next().text(this.value = this.checked);//<-- note its assignment
}).trigger('change');//<-- trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="giftwrap" type="checkbox" /><span></span>
You can add a checked attribute:
<input name="giftwrap" type="checkbox" checked/>
Or maybe you want something like this:
<form>
<input type='hidden' value='0' name='selfdestruct'>
<input type='checkbox' value='1' name='selfdestruct'>
</form>
Details: Post the checkboxes that are unchecked
(Read the comments as well.)
I have done something like this.
<html>
<head>
<script type="text/javascript">
<!--
function toggleTB(what){
if(what.checked){document.theForm.theTB.disabled=1}
else{document.theForm.theTB.disabled=0}}
//-->
</script>
</head>
<body>
<form name="theForm">
<input type="checkbox" name="theCB" onClick="toggleTB(this)">Toggle The Text Box<br>
<input type="text" name="theTB" value="asdf">
</form>
</body>
</html>
But this is only used for one time.i need this function repeatedly in another rows also so how can i used this function for multiple times.
My form goes like this:
<tr>
<td style="border-top:none; text-decoration:underline;" >Specific operations/procedures</td>
<td>
<input type="checkbox" name="sd3[]" value="mfi_nam9" />Other(please specify):
<input type="text" name="mfi_nam9" class="text required" id="mfi_name"
</td>
</tr>
<tr>
<td style="border-top:none; text-decoration:underline;" >General principles/strategies</td>
<td>
<input type="checkbox" name="sd2[]" value="mfi_nam8" />Other(please specify):
<input type="text" name="mfi_nam8" class="text required" id="mfi_name"
</td>
</tr>
i will be waiting for ur response and i am very thankful to u guys for helping me previously and hope u will help me this time too.
Read this article
i would prefer jQuery
Here is DEMO
Another DEMO
We can take the code and do the modifications like
1. Javascript modifications :
function toggleTB(what,elid)
{
if(what.checked)
{
document.getElementById(elid).disabled=1
}
else
{
document.getElementById(elid).disabled=0
}
}
2. Checkbox HTML code modifications
<input type="checkbox" name="sd3[]" value="mfi_nam9" onClick="toggleTB(this,'mfi_name1')" />Other(please specify):
<input type="text" name="mfi_nam9" class="text required" id="mfi_name1" />
Note that we have used the ID's to be varying for each of the textboxes which can be generated even when you are generating these textboxes from the php codes.
Add onclick to each of the checkbox
<input type="checkbox" name="sd2[]" value="mfi_nam8" onClick="toggleTB(this)" />Other(please specify):
and declare toggleTB as
function toggleTB(what){
what.form.elements[what.value].disabled = what.checked;
}
Java Script modification :
function toggleTB(what){
var theTB = document.getElementById(what.value);
if(what.checked){theTB.disabled=1}
else{theTB.disabled=0}
}
HTML Modification :
<table>
<tr>
<td style="border-top:none; text-decoration:underline;" >Specific operations/procedures</td>
<td>
<input type="checkbox" name="sd3[]" onClick="toggleTB(this)" value="mfi_nam9" />Other(please specify):
<input type="text" name="mfi_nam9" id="mfi_nam9" class="text required" />
</td>
</tr>
<tr>
<td style="border-top:none; text-decoration:underline;" >General principles/strategies</td>
<td>
<input type="checkbox" name="sd2[]" onClick="toggleTB(this)" value="mfi_nam8" />Other(please specify):
<input type="text" name="mfi_nam8" id="mfi_nam8" class="text required" />
</td>
</tr>
</table>
Note: Here I have used ID rather than NAME to verify the form input box element.
I think this doesn't make sense to disable the TEXT BOX on checked event of the related CHECK BOX. You maybe want to enable the TEXT BOX whenever some one checked the check box to specify some other thing, I am not sure what you want to do with this.
If you want to do like what I guess, just change the JAVA SCRIPT lines as bellow -
if(what.checked){theTB.disabled=0} // have placed 0 in place of 1
else{theTB.disabled=1} // have placed 1 in place of 0
}
HTML INPUT-BOX as bellow -
OR if you think to toggle (enable/disable) the checkbox, this is not possible cause you know after disable an element the click event will not do action on the element so how it will be disable :)