We Keep Coding

Concatenate select field value and text field value in to one text filed

I have following form fields
<input type="text" id="domain" name="domain">
<select id="sub" name="sub">
<option value="TEST.SITE">TEST.SITE</option>
</select>
<input type="hidden" id="full" name="full">
How can I concatenate user inputs of text field and select field and insert that into the 3rd hidden
field?
Ex:
text field: HELLO
select field : TEST.SITE
value of full field should be : HELLO.TEST.SITE

You can use jQuery for the same:
$(function(){
$("#formId").on("submit", function(){ // change your formId here
const domain = $("#domain").val(); //get domain value
const sub = $("#sub").val(); // get sub value
$("#full").val(domain + "." + sub); // join them with .
})
})

You can use this code, It will change the hidden field on Blur event of sub text field,
You can change event according to your requirement,
<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<input type="text" id="domain" name="domain">
<select id="sub" name="sub">
<option value="TEST.SITE">TEST.SITE</option>
</select>
<input type="hidden" id="full" name="full">
<script>
$(document).ready(function(){
$('#domain').on('blur', function(){
var domain = $('#domain').val();
var sub = $('#sub').val();
var full = domain + '.' + sub;
$('#full').val( full );
});
});
</script>
Working example: https://paiza.io/projects/P13ImGFxhiOfcEaEn4RxTA

assign individual value to text field with same class name using jquery

I want to get value from "data-val" input field which is hypen separated and after removimg hypen individual value should get assigned to separate text box which have same class name, but instead of separate value only last value is assigning to every text box.
for example if data-val class have value like this 3-4-5 then it should get separated by "-" and individual value get assigned to separated text filed.
<input type="text" class="form-control data-val" onblur="assign_val('data-val','input_val')"value=""/>
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<script>
function assign_val(data-val,input_val) {
var data-val = $(".data-val").val();
var count = $('.' + input_val).length;
var i;
var data-val= data-val.split("-");
for (i = 1; i <= data-val.length; i++)
{
$(".input_val").val(data-val[i]);
}
}
</script>

You can do this using JQuery .each https://api.jquery.com/each/
$( ".input_val" ).each(function( index ) {
$(this).val(data-val[index]);
});

How to grab all child inputs of a specifc div/form using just javascript?

I saw a similar post here, however I want to do something similar using javascript. Basically there a method to grab all user input in some container such as a div or form
<form>
<div>
<text>
</div>
<div>
<textarea>
</div>
<div>
<select>
</div>
</form>
An example would be to grab text, textarea, select, and other forms of user input. I saw something like
var elements = document.myform.getElementsByTagName("input")
But it wouldn't work for selects. I know I could possibly just have a duplicate method which attempts to find ("select") but what if the form must keep the order in which user put in information.
EDIT: Thank you for all the responses. Does all the methods mentioned so far only work if the inputs are direct descendants or is there some other method?

You can use a query selector.
document.querySelectorAll('#divID input, #divID select, #divID textarea');
//selects all elements contained by #divId that are input, textarea, or select elements
<div id="myDiv">
<form>
<input type="text">
<select>
<option>1</option>
</select>
<textarea>Text...</textarea>
<div>
<span>
<select id="nestedSelect"></select>
</span>
</div>
</form>
</div>
<script>
var inputs = document.querySelectorAll('#myDiv input, #myDiv select, #myDiv textarea');
for(let i = 0; i < inputs.length; i++){
console.log(inputs[i]);
}
</script>
You can also get the div or form first and then use querySelectorAll on it to get all the inputs, selects and textareas contained by it (not just direct children).
<div id="myDiv">
<form>
<input type="text">
<select>
<option>1</option>
</select>
<textarea>Text...</textarea>
<div>
<input type="text"/>
</div>
<div>
<span>
<select id="nestedSelect">
<option value="2">2</option>
</select>
</span>
</div>
</form>
</div>
<script>
var divElem = document.getElementById("myDiv");
var inputElements = divElem.querySelectorAll("input, select, textarea");
for(let i = 0; i < inputElements.length; i++){
console.log(inputElements[i]);
}
</script>

Use .querySelectorAll specifying each of the elements separated by a , to select from the form:
var elements = form.querySelectorAll('input, textarea, select');
var form = document.querySelector('form');
var elements = form.querySelectorAll('input, textarea, select');
elements.forEach(function(element) {
// access each element here
console.log(element);
});
input, textarea, select {
display: block;
}
<form>
<input type="text" value="name">
<textarea>text</textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>

[].forEach.call( document.getElementById('parentobject').querySelectorAll( 'input[type="text"], input[type="hidden"], input[type="radio"], input[type="checkbox"], select, textarea' ), function( elem ) {
console.log( elem.id);
} );
<div id="parentobject">
<input id="textinput" type="text" value="xyz" />
<input id="gobutton" type="button" value="go" />
<input id="acheckedbox" type="checkbox" checked />
</div>
For each element found within the specified element object (parentobject) of the types specified within the queryselectorAll filters, the specified inline function will be run with it as target, outputting the element's id to the console.
The above code applied to the following html would output the id of each matching element:
textinput
acheckedbox

How to check whether form data is changed or not, excluding few fields on form?

I want to check whether any field is changed or not excluding few field on form.For this I tried following one.
$('#FormId').not('#elementId').data("changed")
But it is not excluding the element with id 'elementId'.

You can do something like the following:
// this binds the following function on any inputs type=text under #FormId
$('#FormId input[type=text]')bind("change", function(){
// do something
});
// You can add more elements, or classes by adding commas to the selector
$('#FormId input[type=text], .anotherclass, .onemoreclass')bind("change", function(){
.
.
.
.

I think you want to check whether form data change it or not
here is one approach i have use.
Create one Variable like: oldForm save in ready with old value
Create on change event for all input any change it will trigger
below is code suggestion for same
var oldFormData = '';
$(function () {
oldFormData == $('#FormId').serialize();
$('form :input').on('change input', function () {
var isChange = $('#FormId').serialize() !== origForm
});
})

Here's a quick and dirty example.
Let's say you want to mark the inputs that you want to track with a data attribute (data-change-tracking in this example).
HTML
<form action="/echo/html/" method="post">
<p>
<label>A text input</label>
<input data-change-tracking="true" value="abc"/>
</p>
<p>
<label>A select</label>
<select data-change-tracking="true">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</p>
<p>
<label>A textarea</label>
<textarea data-change-tracking="true">old</textarea>
</p>
<p>
<label>Not tracked</label>
<input value="123" />
</p>
</form>
Then, let's just add a dirty class when the input has changed from the previous value:
Javascript
$(function() {
$('[data-change-tracking]').each(function(){
$(this).data('previousValue', this.value);
});
$('form').on('change', '[data-change-tracking]', function(ev) {
if (ev.target.value !== $(ev.target).data('previousValue')) {
$(ev.target).addClass('dirty');
} else {
$(ev.target).removeClass('dirty');
}
});
});

HTML/Javascript Input type="text" - How to shows text different from value?

Actually i have a datalist:
<datalist id='modelsList'>
<option value='1'>Dummy1</option>
<option value='2'>Dummy2</option>
</datalist>
This is used in an input:
<input type='text' name='dummy' autocomplete='off' list='modelsList' value=''/>
If i start typing Dummy2 and then i click on the dropdown list result the textbox shows 2. I need to find a way to have 2 as value but Dummy2 as text.
I cannot use a drop-down list (select tag)

Here, my solution as per you want check it out...
You can use input event for achieving such functionality,
HTML
<input type='text' id='dummy' list='modelsList'/>
<datalist id='modelsList'>
<option value='1'>Dummy1</option>
<option value='2'>Dummy2</option>
</datalist>
Jquery
$("#dummy").on('input', function () {
var val = this.value;
if($('#modelsList option').filter(function(){
return this.value === val;
}).length) {
var option = $('#modelsList').find('option[value="' + val + '"]');
$(this).val(option.text());
}
});
also check DEMO of the above code.

The format for a text input in HTML5 is as follows:
<input type="text" name="name" value="Value" placeholder="Placeholder Text">
As a user types in their content, the value changes.
You may be getting confused with textarea:
<textarea name="name">Value</textarea>

If you want to put a textarea tag, you have to know that the value attribute is invalid, but perhaps if you want to use it instead of input, and the format is similar as you put:
<textarea name="name">contentHere</textarea>