I'd like to insert a block of HTML into the DOM when a checkbox or radio button or button is pressed.
For example, when a button is pressed, then another set of the labels and inputs below are added to the form.
<form class="details">
<div>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="job">Job:</label><br>
<input type="text" id="job" name="job"><br>
<label for="id">ID:</label><br>
<input type="text" id="id" name="id">
<label for="shoesize">Shoe size:</label><br>
<input type="text" id="shoesize" name="shoesize"><br>
<label for="helmetsize">Helmet size:</label><br>
<input type="text" id="helmetsize" name="helmetsize">
</div>
</form>
Every time a button is pressed I'd like another set of fields where someone else can add their details to the form.
I am aware of document.createElement(), but it seems like I can only create 1 element at a time using that. This form will probably grow and so would like something less verbose.
I've experimented with appendChild() e.g.
var details = document.getElementsByClassName('details')[0]
var newDetailsSection = '<div>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="job">Job:</label><br>
<input type="text" id="job" name="job"><br>
<label for="id">ID:</label><br>
<input type="text" id="id" name="id">
<label for="shoesize">Shoe size:</label><br>
<input type="text" id="shoesize" name="shoesize"><br>
<label for="helmetsize">Helmet size:</label><br>
<input type="text" id="helmetsize" name="helmetsize">
</div>'
details.appendChild(newDetailsSection)
But I am getting an error because newDetailsSection is not of type Node - it is a string and I understand that.
I am new to web development.
Is this a use case for a JS framework that handles components? Is this what a component is?
if u want to add html string; innerHTML is your friend.
to append use details.innerHtML = details.innerHtML + newSectionHTML;
ofcourse i would recommend using document.createElement and create a function that returns element that contain label:
example:
function creatInput(name, label){
const labelElm = document.createElement('label');
const inputElm = document.createElement('input');
labelElm.setAttribute('for', name);
labelElm.innerText = label+':';
inputElm.setAttribute('name', name);
inputElm.setAttribute('id', name);
inputElm.setAttribute('placeholder', label);
labelElm.appendChild(input);
return labelElm;
}
this way you can reuse it for all your input simply call:
var details = document.querySelector(".details");
details.appendChild( createInput('fname','First name') );
details.appendChild( createInput('lname','Last name') );
/// .. etc
Related
I have the following code for html:
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="ouput_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup',function(){
output_01.value = input_01.value
})
</script>
I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.
make sure you don't have typo in your code.
change from
<input type="text" name="" id="ouput_01">
to
<input type="text" name="" id="output_01">
your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="output_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup', function(event) {
output_01.value = event.target.value
})
</script>
<form id="myForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="mname">Middle name:</label><br>
<input type="text" id="mname" name="mname"><br><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
</form>
I want to run a piece of code only once when there is a focusin event in any one of these fields of form.
How can I do that?
You can make a JavaScript function that contains your code then loop through each of the form elements and as a focus event
Like
function hi (){
//Do stuff, then if you don't want it to go again
Array.from(myForm.children)
. forEach (c =>
c.removeEventListener("focus", hi)
)
}
Array.from(myForm.children)
. forEach (c =>
c.addEventListener("focus", hi)
)
<form name="myform">
<fieldset>
<legend>Delivery Information</legend>
<p>Country: <input pattern="^[A-Za-z]" type="text" name="textInput" size="25" placeholder="input country..."></p>
<p>Street: <input pattern="^[A-Za-z0-9]" type="text" name="street" size="30" placeholder="input street..."></p>
<p>City: <input pattern="^[A-Za-z ]" type="text" name="textInput" size="20" placeholder="input city..."></p>
<p>Zip: <input pattern="(\d{5}([\-]\d{4})?)" type="text" name="zip" size="5" placeholder="#####"></p>
</fieldset>
</form>
So, I have a form and I want to get all input elements by name "textInput"(I have other inputs so it ha) using Javascrip DOM, and add an attribute "oninvalid="please, only use letters".
Only Javascript, so no JQuery.
You can use this function:
function changeAttributes() {
var x = document.getElementsByName("textInput");
for(var i = 0; i < x.length, i++) {
x[i].setAttribute("oninvalid", "please, only use letters");
}
}
Try below:
$('input[name=textInput]').attr("oninvalid", "please, only use letters");
I'm using JQuery Steps and I'm trying to make the last step verify what the user has put in throughout the previous steps. But the problem is that its not populating the labels with the values of the previous text boxes.
This is really confusing me because i have seen many working examples on this, but mine doesn't work? Any ideas? Am i missing something?
HTML
<label for="firstName">First Name *</label>
<input id="firstName" name="firstName" type="text">
<label for="lastname">last Name *</label>
<input id="lastname" name="lastname" type="text">
<br/><br/>
<label for="shippingaddress">Shipping Address *</label>
<input id="shippingaddress" name="shippingaddress" type="text">
<br/><hr><br/>
<p>
Name: <label id="vname"></label>
</p>
<p>
Shipping Address: <label id="vsaddress"></label>
</p>
JAVASCRIPT
$("#firstName,#lastname").change(function () {
var firstnameLAstName = $("#firstName").val()+ " " + $("#lastname").val();
$("#vname").text(firstnameLAstName);
});
$("#shippingaddress").change(function () {
var shippingAddress = $("#shippingaddress").val();
$("#vsaddress").text(shippingAddress);
});
here is my jsfiddle:
https://jsfiddle.net/7say10d8/4/
i even tried adding something to OnChanging
Remember import Jquery
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
its working https://jsfiddle.net/cmedina/7say10d8/5/
When the user clicks on an input field and starts typing, I want the box to be red and show an error message about why the content is invalid until the input content is valid. I want to do this without reloading the page, which is what my code does right now:
if amount and price and first_name and last_name and email and (have_error == False):
do some stuff
else:
show error message
html:
<label class = "sell_label">amount</label>
<input type="text" class = "sell_input" name="amount" value="{{amount}}">
{{error_amount}}
<label class = "sell_label">price</label>
<input type="text" class = "sell_input" name="price" value="{{price}}">
{{error_price}}
<label class = "sell_label">first name</label>
<input type="text" class = "sell_input" name="first_name" value="{{first_name}}">
<label class = "sell_label">last name</label>
<input type="text" class = "sell_input" name="last_name" value="{{last_name}}">
<label class = "sell_label">email</label>
<input type="text" class = "sell_input" name="email" value="{{email}}">
{{error_email}}
<input type="submit" class = "sell_button" value = "okay">
<div class="error">{{error}}</div>
How would I incorporate Javascript into my html to detect when the input content is valid?