I am currently working on an html5 project in which there is a lot of input fields that I want to replace by textarea.
Example:
<input type="text" id="Questions" name="texte1"/>
<input type="text" id="Questions" name="texte2"/>
<input type="text" id="Questions" name="texte3"/>
There is 200 inputs that I want to change by:
<textarea id="Questions" name="texte1"></textarea>
<textarea id="Questions" name="texte2"></textarea>
<textarea id="Questions" name="texte3"></textarea>
but I can't really use the search and replace tool because the name is different for every input So I was wondering if anyone of you knows a quick way to replace all my inputs by text area without changing the names 1 by 1 on my code.
You need a criterion that tells you which inputs need to be replaced. What do they all have in common? Also note that you cannot have more than one element per page with the same value for id, so the HTML you show is invalid.
So for the example code I'm assuming that all inputs that need to be replaced have a CSS class replace-me:
document.getElementById('replace').addEventListener('click', (e) => {
const toReplace = [...document.querySelectorAll('.replace-me')]
for (const input of toReplace) {
const textarea = document.createElement('textarea')
const parent = input.parentNode
textarea.id = input.id
textarea.name = input.name
textarea.value = input.value
parent.removeChild(input)
parent.appendChild(textarea)
}
})
<div>
<input class="replace-me" type="text" value="1" id="i1" name="foo1" />
<input class="replace-me" type="text" value="2" id="i2" name="foo2" />
<input class="replace-me" type="text" value="3" id="i3" name="foo3" />
<input class="replace-me" type="text" value="4" id="i4" name="foo4" />
<input class="replace-me" type="text" value="5" id="i5" name="foo5" />
</div>
<button type="button" id="replace">Click to replace</button>
Related
I have a input <input type="text" value="1" readonly id='aaa'/>.
I would like to give it a function when user check the box then can edit the value of id=aaa.
Sample:
<input type="text" value="1" readonly/> <input type="checkbox" /> Checked this if you want to edit the value.
Thank you.
Add an onchange event to the checkbox that changes to readOnly attribute of its previous sibling (the textfield)
<input type="text" value="1" readonly id="aaa" />
<input type="checkbox" onchange="getElementById('aaa').readOnly = !this.checked" />
Checked this if you want to edit the value.
You want to use JavaScript to change the readOnly property. Set it to the opposite of whether the checkbox is checked.
document.getElementById('checksome').addEventListener('click', function() {
var changeThis = document.getElementById('readsome');
changeThis.readOnly = !this.checked;
});
<input id="readsome" type="text" value="1" readonly>
<label><input id="checksome" type="checkbox"> Click this to edit</label>
I am trying to assign a HTML text attribute's value to a hidden attribute's value.
The text code:
<input type="text" name="number" id="number" maxlength="4" onBlur="myno=this.value; concatno=myno.concat('0001')" />
I've used alert to try the output of the concatno value. For example, if user enter 1010, then the output will be 10100001.
Then my hidden code:
<input type="hidden" id="hide" name="hide" value=concatno>
I want my hidden value to be 1010001, but instead the value became "concatno". How should I assign the value in my hidden attribute?
The problem here is that you never updated your #hide element.
You need to use some javascript, for example:
document.getElementById('hide').value = concatno;
Working snippet:
<input type="text" name="number" id="number" maxlength="4" onkeyup="var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id="hide" name="hide" value=concatno disabled>
Note that even if the event is not the issue here, I suggest you to use another trigger, like onkeyup, so that the value is updated more often.
I've also changed your hidden element to disabled to make it visual.
Moreover, you should learn to avoid inline JavaScript.
Here is how I'll do it:
document.getElementById('number').addEventListener("keyup", function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input id="hide" name="hide" value=concatno disabled>
Documentation: getElementById
Hope it helps.
The issue is that you never actually update the value of your #hide element. You need to set its value inside of your event binding (just made the input visible for reference):
<input type="text" name="number" id="number" maxlength="4" onblur="var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.log(concatno)" />
<input type="text" id="hide" name="hide" value=concatno disabled />
It's also worth noting though, that you should generally avoid using obtrusive event handlers. Instead, delegate event handling to external Javascript. This way, your designer doesn't need to understand or even worry about the JS.
Here's an example using unobtrusive handlers:
document.getElementById('number').addEventListener('blur', function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input type="text" id="hide" name="hide" placeholder="concatno" disabled />
Try using name/id instead;
<input type="text" name="number" id="number" maxlength="4" oninput='hide.value=(this.value + "0001")' autofocus=''/>
<input type="hidden" id="hide" name="hide" />
without inline scripts:
document.addEventListener('DOMContentLoaded', function() {
let hide = document.querySelector('#hide');
document.querySelector('#number').addEventListener('input', function() {
hide.value = this.value + '0001';
});
});
<input type="text" name="number" id="number" maxlength="4" autofocus='' />
<input type="hidden" id="hide" name="hide" />
first post.. graphics person becoming a coder here. (Coding is more fun, but harder!)
2 radio groups each with 2 buttons. I have got it working where if either #client or #agent is selected from Radio 1, and #companyClient is selected from radio 2, the result is the text fields beneath the radio groups stay Readonly except #companyName. I also have it working where if #agent is selected from Radio 1, and #individualClient is selected from radio 2, the result is the text fields beneath the radio groups become editable to collect input except #companyName which stays Readonly.
What I need though is if #client is selected from Radio 1, and #individualClient is selected from radio 2, the text fields beneath the radio groups (except #companyName) stay Readonly; currently they are editable which I don't want. And I need to copy the text field values from #firstnameContact, #lastnameContact, and titleContact to them (ie to firstnameClient, lastnameClient and titleClient).
Thanks
JS
$(function(){
$("#companyClient, #individualClient").change(function(){
$("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").attr("readonly",true);
if($("#individualClient").is(":checked")){
$("#firstnameClient, #lastnameClient, #titleClient").removeAttr("readonly");
$("#companyName").attr("readonly");
$("#firstnameClient").focus();
}
else if($("#companyClient").is(":checked")){
$("#companyName").removeAttr("readonly");
$("#companyName").focus();
}
});
});
HTML
<label for="firstnameContact">First Name</label>
<input type="text" name="firstnameContact" id="firstnameContact" />
<label for="lastnameContact">Last Name</label>
<input type="text" name="lastnameContact" id="lastnameContact" />
<label for="titleContact">Title</label></div>
<input type="text" name="titleContact" id="titleContact" />
<!--Radio 1 -->
<label>Your Status</label>
<input type="radio" name="yourStatus" id="client" value="client" checked />
<label for="client">I am the Client</label>
<input type="radio" name="yourStatus" id="agent" value="agent" />
<label for="agent">I am an Agent</label></div>
<!--Radio 2 -->
<label>select one:</label>
<input type="radio" name="clientType" id="companyClient" value="companyClient" />
<label for="companyClient">Company</label>
<input type="radio" name="clientType" id="individualClient" value="individualClient" />
<label for="individualClient">Individual</label>
<label for="companyName">Company Name</label>
<input type="text" name="companyName" id="companyName" readonly />
<label for="firstnameClient">First Name</label></div>
<input type="text" name="firstnameClient" id="firstnameClient" readonly />
<label for="lastnameClient">Last Name</label>
<input type="text" name="lastnameClient" id="lastnameClient" readonly />
<label for="titleClient">Title</label></div>
<input type="text" name="titleClient" id="titleClient" readonly />
Just added a form around all elements and made the change on it, seems to works.
See this fiddle
$(function(){
$("form").change(function(){
$("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").attr("readonly",true);
if($("#individualClient").is(":checked")){
$("#firstnameClient, #lastnameClient, #titleClient").removeAttr("readonly");
$("#companyName").attr("readonly");
$("#firstnameClient").focus();
}
else if($("#companyClient").is(":checked")){
$("#companyName").removeAttr("readonly");
$("#companyName").focus();
}
});
});
EDIT
Or you can use disabled to make it more clear for users.
See this fiddle
$(function(){
$("form").change(function(){
$("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").prop("disabled",true);
if($("#individualClient").is(":checked")){
$("#firstnameClient, #lastnameClient, #titleClient").removeProp("disabled");
$("#companyName").prop("disabled",true);
$("#firstnameClient").focus();
}
else if($("#companyClient").is(":checked")){
$("#companyName").removeProp("disabled");
$("#companyName").focus();
}
});
});
Of course, you can add a PHP validation and test of all fields to make it safier and better.
How would i add the "value" that are selected from radio boxes in html forms? So when someone selects an option it would add the other "values" onto it and total that it at the bottom of the page. And does anyone know if it could add "names" total "values" onto it as well? thanks
My code looks like this:
<h3><u>Title</u></h3><br>
<form action="">
<input type="radio" name="num" value="0">Text<br>
<input type="radio" name="num" value="2">Text<br>
<input type="radio" name="num" value="80">Text<br>
<input type="radio" name="num" value="110">Text<br>
<input type="radio" name="num" value="85">Text<br>
<input type="radio" name="num" value="120">Text<br>
</form>
You cannot. By definition, a set of radio buttons with the same name attribute contributes at most one value to the data set, the one corresponding to the selected button.
If you want something else, you should handle that server side, or use other types of controls, or redesign the entire approach.
Working example :
(using a Javascript library, jQuery, but could be done in plain JavaScript)
You mainly have to change your inputs to type="checkbox" in the HTML
What code does : when a checkbox's state is modified, all checked checkboxes' value are summed up in the last input field I've added
The checkboxes are targetted by looking for "num" in their name, if you remove that the checkbox won't be taken into account by the script.
$(function() {
$("input[name*='num']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<u>Title</u>
</h3>
<br>
<form action="">
<input type="checkbox" name="num0" value="0">Add 0<br>
<input type="checkbox" name="num2" value="2">Add 2<br>
<input type="checkbox" name="num80" value="80">Add 80<br>
<input type="checkbox" name="num110" value="110">Add 110<br>
<input type="checkbox" name="num85" value="85">Add 85<br>
<input type="checkbox" name="numwhateveryoulike" value="120">Add 120<br>
Total <input type="text" value="0" id="total">
</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>