Develop Reference

How do i change the value of input field as another input field is being updated? [HTML / JS]

I have 3 inputs fields in my HTML form. One of my input fields is disabled and the other two are working as normal. The two fields that are not disabled are supposed to fill in "parts" of the disabled one (so to put it simply - the two input fields values get combined into the disabled one)
How do I achieve this? Is there a way the value updates live as the user is typing into the enabled fields?
I tried this:
`
$('#productNameInput').keyup(function(e) {
$("#productIDInput").html($(this).val());
}).keypress(function(e) {
return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});
`
but everything is depreciated and I'm not sure where to go from here. Any help is appreciated - thanks :)

Thank you #Rajesh for pointing out my mistake: The code should be with . val, not .html -
$('#productNameInput').keyup(function(e) {
$("#productIDInput").val($(this).val());
}).keypress(function(e) {
return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});

How can I force a user to fill in input fields successively?

I am looking to create an input form that will force a user to enter something in each field successively before moving onto the next input or submitting. This is something that would be filled out by someone on a phone who is asking questions that are attached to each input field and recording the answer in the inputs. Thus to prevent someone from skipping/missing a question while on the phone, I want to require that each input field is filled out successively. For this reason, the HTML 'required' attribute does not necessarily work as it will only prevent submission if a field is not filled out.
Previously I have given each required input its own submit button, but this looks horrible and can be confusing for those who use it. What is the best way to achieve what I am looking do to using a combination of html, js, node, and/or ejs?

Give each input a change event handler that makes the next input visible:
// Get all the labels into a node list
const labels = document.querySelectorAll("label");
// Get a reference to the last label
const lastLabel = labels[labels.length-1];
// Get a reference to a verification element
const output = document.querySelector("div.hidden");
// Use event delegation to handle all change events
document.addEventListener("change", function(event){
// Get reference to the parent label of the changed element
const lbl = event.target.closest("label");
// Check to see if it's an element we care to handle
if(lbl.classList.contains("response")){
// Hide the changed label (and it's child input)
lbl.classList.add("hidden");
// Unhide the next label (and it's input child)
lbl.nextElementSibling.classList.remove("hidden");
}
// If the current label was the last one
if(lbl === lastLabel){
// Show the verification field
output.classList.remove("hidden")
}
});
.hidden { display:none; }
<label class="response">#1<input ></label>
<label class="response hidden">#2<input ></label>
<label class="response hidden">#3<input ></label>
<div class="hidden">DONE!</div>

Live update multple input fields to multiple span tags

I have a form where I want the user to be able to enter data into the text field, but then I want this to be entered into the span tags live as they are typing each character.
I have managed to do this successfully with one input field going to one span tag using most of the javascript in this post. But changing it slightly to try and accomodate multiple input fields to multiple span tags.
But I can't seem to get this to work when I have multiple text fields that I want to live update to multiple span tags. For example:
I want this input to live update to the below span tag:
<input type="text" class="inst_name">
<span class="nametag"></span>
and I want this input to live update this span tag:
<input type="text" class="keypair_name">
<span class="keyname"></span>
But when I do, it works with the first one (the inst_name to nametag) but when I try it with the second one (keypair_name to keyname) it keeps showing up in my html as undefined where the text should be live updating to but the code doesn't actually produce any errors.
Below is the JavaScript code I have tried:
var inputKeyName = document.querySelector(".keypair_name"),
outputKeyName = document.querySelector(".keyname"),
inputInstName = document.querySelector(".inst_name"),
outputInstName = document.querySelector(".nametag");
function keydownHandler() {
outputKeyName.innerHTML = inputKeyName.value;
}
function keydownHandlerInstName() {
outputInstName.innerHTML = inputInstName.value;
}
inputKeyName.addEventListener("input", keydownHandler);
inputInstName.addEventListener("input", keydownHandlerInstName);
Any ideas on how I can get this to work would be much appreciated. Thanks

So I have found out the problem. A rookie mistake of using the same name twice in my html. I had used the same name for a class name of "inst_name" for my input field as well as a div elsewhere in my code that I didn't realise were named exactly the same. Thanks for commenting and confirming this was working.

Homemade "Captcha" System - One minor glitch in javascript, can't enable submit button

So basically what I'm trying to do as a measure of security (and a learning process) is to my own "Capthca" system. What happens is I have twenty "label's" (only one shown below for brevity), each with an ID between 1 and 20. My javascript randomly picks one of these ID's and makes that picture show up as the security code. Each label has its own value which corresponds to the text of the captcha image.
Also, I have the submit button initially disabled.
What I need help with is figuring out how to enable the submit button once someone types in the proper value that matches the value listed in the HTML label element.
I've posted the user input value and the ID's value and even when they match the javascript won't enable the submit button.
I feel like this is a really really simple addition/fix. Help would be much much appreciated!!!
HTML code
<div class="security">
<label class="captcha enabled" id="1" value="324n48nv"><img src="images/security/1.png"></label>
</div>
<div id="contact-div-captcha-input" class="contact-div" >
<input class="field" name="human" placeholder="Decrypt the image text here">
</div>
<input id="submit" type="submit" name="submit" value="Send the form" disabled>
Javascript code
//Picks random image
function pictureSelector() {
var number = (Math.round(Math.random() * 20));
//Prevents zero from being randomly selected which would return an error
if (number === 0) {
number = 1;
};
console.log(number);
//Set the ID variable to select which image gets enabled
pictureID = ("#" + number);
//If the siblings have a class of enabled, remove it
$(pictureID).siblings().removeClass("enabled");
//Add the disabled class to all of the sibling elements so that just the selected ID image is showing
$(pictureID).siblings().addClass("disabled");
//Remove the disabled class from the selected ID
$(pictureID).removeClass("disabled");
//Add the enabled class to the selected ID
$(pictureID).addClass("enabled");
};
//Calls the pictureSelector function
pictureSelector();
//Gets the value of the picture value
var pictureValue = $(pictureID).attr("value");
console.log(pictureValue);
//Gets the value of the security input box as the user presses the keys and stores it as the variable inputValue
$("#contact-div-captcha-input input").keyup(function(){
var inputValue = $("#contact-div-captcha-input input").val();
console.log(inputValue);
});
console.log($("#contact-div-captcha-input input").val());
//Checks to see if the two values match
function equalCheck() {
//If they match, remove the disabled attribute from the submit button
if ($(pictureValue) == $("#contact-div-captcha-input input").val()) {
$("#submit").removeAttr("disabled");
}
};
equalCheck();
UPDATE
Fiddle here
UPDATE #2
$("#contact-div-captcha-input input").keyup(function(){
var inputValue = $("#contact-div-captcha-input input").val();
console.log(inputValue);
if (pictureValue === inputValue) {
$("#inputsubmit").removeAttr("disabled");
}
});
So I got it working 99.9%, now the only problem is that if someone were to backspace or delete the correct value they have inputted, the submit button does not then change back to disabled. Any pointers?

Known issue.
Give your button a name OTHER THAN submit. That name interferes with the form's submit.
EDIT
A link was requested for this -- I don't have a link for pure JavaScript, but the jQuery docs do mention this issue:
http://api.jquery.com/submit/
Forms and their child elements should not use input names or ids that
conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see DOMLint.
EDIT 2
http://jsfiddle.net/m55asd0v/
You had the CSS and JavaScript sections reversed. That code never ran in JSFiddle.
You never re-called equalCheck. I added a call to your keyUp handler.
For some reason you wrapped pictureValue inside a jQuery object as $(pictureValue) which couldn't have possibly done what you wanted.
Basic debugging 101:
A console.log inside of your equalCheck would have shown you that function was only called once.
A console log checking the values you were comparing would have shown
that you had the wrong value.
Basic attention to the weird highlighting inside of JSFiddle would have shown you had the code sections in the wrong categories.

Click function in Django form

I have no idea how can I solve my problem. I have Django template with two models. I put these models in inlineformset_factory.
Example
DhcpConfigFormSet = inlineformset_factory(Dhcp, IPRange, extra=1)
and I displayed this form in template like this pictures
form http://sphotos-h.ak.fbcdn.net/hphotos-ak-prn1/601592_10151469446139596_1335258068_n.jpg
I want implement event, when I click on plus stick (marked field on pictures), show one more row (ip initial field, ip final field and delete check box).
I tried to do it on this way :
$(document).ready(function() {
$(".plusthick-left").click( function() {
var tr= $(".sort-table").find("tbody tr:last").length;
$(".sort-table").find("tbody tr:last").after($(".sort- table").find("tbody tr:last").clone())
});
but I have problem, because I just made copy of last row and took same attributes values?
My question is : How can I make new row, and set all attributes with values of last row increased by one.
For example:
<input type="text" id="id_ip_initial_0_ip_range">
This is field that generated form in template, and I want make field with id value like this:
<input type="text" id="id_ip_initial_1_ip_range">
How can I do it? :)