This question already has answers here:
Stop word-wrap in html
(2 answers)
Closed 5 years ago.
I am designing an html form and I have to design a text field with multiple columns as below image,
Have an alternate solution like the below snippet but it's too long, I want solution in one line like other html elements are providing
<input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;>"<input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;">
what you want is a component. So you should consider using a framework like vue.js, react.js or webcomponents.
EDIT:
Okay try something like this with jquery. I f you also dont want to use jquery its a bit more complicated but the idea remains the same:
let $b = $("<form>");
for(let i = 0; i < 5; i++){
let $n = $("<input type='text'>");
$n.attr("name","inp"+i);
$n.attr("id","inp"+i);
$b.append($n);
}
$("#someplaceinyourapp").append($b)
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I want to use document.querySelectorAll to get all the elements having "required" attribute in them. For example:
<input autocomplete="off" name="des" required="">
Please find the code below to retrieve these elements:
const requiredFields = document.querySelectorAll('[required]');
console.log('all required fields', requiredFields);
I have tried the code mentioned above, but it returns nothing.
all required fields NodeList []
As per the requirement, required fields should be displayed on page load. All other elements should be hidden. How do I achieve this ? Also, how to get/hide all the elements not having the "required" attribute ?
Thanks
20/01/21
Edit:
you mistake was cominng from require="" check my code below.
as mentioned in the comments require is a boolean attr therefore it doesn't get any value (is rather required or not)
HTML:
<input autocomplete="off" name="des" required value="1">
<input autocomplete="off" name="des" value="2" >
<input autocomplete="off" name="des" required value="3">
<input autocomplete="off" name="des" value="4" >
<input autocomplete="off" name="des" required value="5">
<input autocomplete="off" name="des" required value="6">
<input autocomplete="off" name="des" required value="7">
JS:
const inputs = document.querySelectorAll("[required]")
console.log(inputs)
codepen:
https://codepen.io/Elnatan/pen/XWdJrez
This question already has answers here:
Find an element in DOM based on an attribute value
(11 answers)
Closed 3 years ago.
I´m trying to automate the filling of some information in a webpage with javascript.
All the fields have IDs, for example:
<div id="cc-container" class="field has-float-label">
<input placeholder="ccnumber" id="credit_card_number" maxlength="16" name="credit_card[ovv]" size="16" type="tel" value="">
</div>
And then I just insert the info with:
document.getElementById("credit_card_number").focus();
document.getElementById("credit_card_number").value = variable_ccnumber;
But the last one doesn´t have an ID:
<div id="cvv-container" class="visa has-float-label">
<input placeholder="cvv" maxlength="4" name="credit_card[meknk]" size="4" type="tel" value="">
</div>
How can I insert what I want in this case?
Thanks.
PD: I'm only starting to code so please don´t assume I will understand everything you throw at me
You can try with Document.querySelector() which allows any valid CSS as selector with name attribute:
document.querySelector('[name="credit_card[meknk]"]').value = 'variable_ccnumber';
<div id="cvv-container" class="visa has-float-label">
<input placeholder="cvv" maxlength="4" name="credit_card[meknk]" size="4" type="tel" value="">
</div>
This question already has answers here:
Phone: numeric keyboard for text input
(16 answers)
Closed 5 years ago.
Is there a way to trigger the numeric keyboard for a <input type="text" /> field for all mobile devices?
I've tried both:
<input type="text" pattern="\d*" />
<input type="text" pattern="[0-9]*" />
But this only seems to trigger the numeric keyboard for iOS. Android still displays the default keypad.
Note: I'm trying to do a duration input, ie. HH:MM, so <input type="number" /> is not a solution for this as I need a input field that will accept numbers and colons.
I also don't mind using javascript if that's the only solution.
I didn't try this but I did see some solutions in the past:
<input type="number" pattern="[0-9]*" inputmode="numeric">
Or:
<input type="number" pattern="[0-9]*" required>
I think type=tel is also supported but never tried it:
<input type="tel">
Here you have few examples.
Using javascript (preferably not jquery) I'm trying to change the line:
<input type="number" name="price" required="" id="id_price">
into
<input type="number" name="price" required="" id="id_price" step="any">
I know the solution's got to be easy but I just can't crack it. Help would be much appreciated!!
As torazaburo suggests in the comment you can do it in one step with setAttribute() method
document.getElementById("id_price").setAttribute("step","any");
<input type="number" name="price" required="" id="id_price">
OR
First create the attribute and set the value. Then add it to the element..
var attr = document.createAttribute('step');
attr.value="any";
document.getElementById("id_price").setAttributeNode(attr);
<input type="number" name="price" required="" id="id_price">
I am trying to create a form so that user can enter certain information and JavaScript will do the calculations for them. I've been trying to use http://demo.rsjoomla.com/calculation-form-example (the one on the left) to get the basics started and I can manipulate from there. So far though it's only working in IE.
Here's the basic layout of my code:
HTML
<input type="number" name="income1" value="0" onkeyup="update()">
<input type="number" name="income2" value="0" onkeyup="update()">
<input type="number" name="income3" value="0" onkeyup="update()">
JavaScript
var op1=document.getElementById('income1');
var op2=document.getElementById('income2');
var result=document.getElementById('income3');
if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0;
if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(op1.value) - parseInt(op2.value);
You wrote code that is looking for id
document.getElementById('income1');
Where is the id on the input?
<input type="number" name="income1" value="0" onkeyup="update()">
Name is not the same thing as id.
And your parseFloat check, you probably should look at isNaN(). And you are using parseInt() at the bottom, and you are using parseFloat() above!
If you're going to do getElementById, you need to have an ID in your element.
<input type="number" id="income1" value="0" onkeyup="update()">
var op1=document.getElementById('income1');
Or you could use jQuery (requires including jQuery source):
<input type="number" name="income1" value="0" onkeyup="update()">
var op1 = ${"input[name=income1]").val();
Alternatively, you could do this, assuming you only have one element named income1. This isn't a very good way to do this, but it should work.
<input type="number" name="income1" value="0" onkeyup="update()">
var op1=document.getElementsByName('income1')[0];