We Keep Coding

Get value of input type=date as a string

I want to extract the value from date field, but it doesn't work. I add the input this way:
var question0 = "<div id='0'><p>Please, enter the date: </p><br>"
+ "<input type=\"date\" id=\'contractdate\'></input><br></div>";
Here is how I tried to receive the value:
var text_Contract_Date = document.getElementById('contractdate').value;
//tried the code below, but didn't work
// var text_Contract_Date = document.getElementById('contractdate').valueAsDate;
// var text_Contract_Date = new Date(document.getElementById('contractdate').valueAsDate);
So, I want to get the value from input as a string, using pure JavaScript, because then it will be used to fill in the document.

Try this
var dateEntered = new Date(text_Contract_Date);

There is not enough information to resolve the issue, so I can only guess that you are probably inserting your variable into the DOM the wrong way.
If I call document.body.append(question0), only text is shown and not the tags.
Try moving content of question0 variable to your html file, then add onchange handler to your input, and also modify your .js file like below
function handleChange(event){
// here you can do whatever you want with the value of the input
alert(event.target.value)
}
<input type="date" id='contractdate' onchange="handleChange(event)"></input>
If you desperately want to create your HTML inside of Javascript, you have to do this like this:
// create div and assign id to it
const myDiv = document.createElement("div")
myDiv.id = '0'
// create p and set its contents
const myP = document.createElement("p")
p.textContent = "Please, enter the date: "
// create input, assign id to it and set its type to date
const myInput = document.createElement("input")
myInput.id = 'contractdate'
myInput.type = "date"
// put everything in your document
myDiv.appendChild(myP)
myDiv.appendChild(myInput)
document.body.appendChild(myDiv)

How to affect the change in the original input box?

I have made an input box and i have cloned this input box to a div,let's name them ipbox1 and ipbox2, ipbox2 is the copy of ipbox1 now what i want to do is that when
i enter/change the value in either of them, the dom.value or $("#id").val() should return the updated the value. But now it's only functioning with the ipbox2.
What should i do?
fiddle
$("#ghj").click(function(){
$("#abc").val("Some text");
$("#abc").clone(true).appendTo("#pastehere");
})
$("#abc").on('change',function(){
alert();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" id = "abc">This is the first box
<div id = "pastehere">
</div>This is the cloned box
<br><button type = "button" id = "ghj">
Clone
</button>

I have update you fiddle: https://jsfiddle.net/gschambial/s6td1bof/7/
var initVal = $('#abc').val();
$("#ghj").click(function(){
$("#abc").val("Some text");
$("#abc").clone(true).appendTo("#pastehere");
})
$("#abc").on('change',function(){
alert();
initVal = $(this).val();
})
$("#get").click(function(){
alert(initVal);
})

You should not append a cloned element with an id as this creates invalid markup (two html elements with the same id).

If you want to be able to read the value of either of them independently, then check out this fiddle
If not, then I must be offtrack. Please add more details about what you need to achieve :)
HTML
<input type = "text" class = "abc">This is the first box
<div id = "pastehere">
</div>This is the cloned box
<br><button type = "button" id = "ghj">
Clone
</button>
JS
var initialInput = $(".abc");
$("#ghj").click(function(){
initialInput.val("Some text");
initialInput.clone(true).appendTo("#pastehere");
})
$(".abc").on('change',function(ev){
var targetInput = $(ev.target);
alert('myValueIs:' + targetInput.val())
});

Get ID of form when using onsubmit

Javascript:
function submitComment(e){
e.preventDefault();
var comment = $('#????').val(); // how do I get the ID?
// ajax
}
Comment form:
<form id="comment-form[id]" onsubmit="submitComment(event)">
<input id="comment-input[id]" type="text" placeholder="Comment...">
</form>
[id] is the variable ID of the specific form. The reason it has an ID is because I have a for loop that displays a whole list of posts, and each post has its own comment form (think Facebook).
What I want to know is how I can get the value (text) of the comment input box when they submit it based on the ID of the form that was submitted.

You can use event.target.
var comment = $('input[id^="comment-input"]',e.target).val()
This will give you input value.
e.target will give you the current form.
Then you can use [^=""] - attribute starts with selector to find the input element.
how I can get the value (text) of the comment input box based on the ID of the form that was submitted
var formID = e.target.id; //get form ID
var comment = $('#'+formID+' input[id^="comment-input"]').val()
//use $('#parent child') selector.

With your setup(HTML/javascript) you can do this with pure javascript like
function submitComment(e) {
var id = e.target.id;
id = id.match(/\[(.*?)\]/)[1];
console.log(id);
var comment = document.getElementById('comment-input['+id+']').value;
console.log(comment);
}
function submitComment(e){
var id = e.target.id;
id = id.match(/\[(.*?)\]/)[1];
console.log(id);
var comment = document.getElementById('comment-input['+id+']').value;
console.log(comment);
}
<form id="comment-form[0]" onsubmit="submitComment(event)">
<input id="comment-input[0]" type="text" placeholder="Comment...">
<input type="submit" placeholder="submit">
</form>

function submitComment(e){
e.preventDefault();
var comment = $('input[id^="comment-input"]').val();
// ajax
}
Use of jquery start-with selector can be helpful.

function submitComment(e){
e.preventDefault();
// e.currentTarget gives you the form element and then you can extract its id
var formElementId = $(e.currentTarget).attr("id");
// Then replace the form text with input which will be your comment input id
var commentElementId = formElementId.replace("form", "input");
var comment = $(commentElementId).val(); // how do I get the ID?
// ajax
}

Copy from textarea to anther textarea but the value of the second textarea should not change

I have two textareas. I am copying data from one to another but if I change data in the first textarea then data in the second textarea is also changed which is obvious.
My requirement is like this: Suppose I have written "country" and it has been pasted to the second textarea. Now if I replace "country" with "anyother" then in the second textarea "country" should not be replaced. If I write something in the first textarea which is new(not replacement) then only that data will be pasted.
Is it possible to do?
My code till now:
function showRelated(e) {
//$('src2').html($('src1').html());
$('#src2').val( $('#src1').val() );
}
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)"></textarea>
<textarea name="source2" id="src2" cols="150" rows="20"></textarea>
the second text area is hidden from user.whatever the user writes will be copied to second textarea and will be transliterate.The requirement is like this if the user replace some data then also it should not effect the data which he already entered.that is why i need to maintain a copy without using database.

ok it seems this is what you want:
HTML:
<textarea id="src1"></textarea>
<textarea id="src2"></textarea>
JS:
$("#src1").keyup(function() {
var src1_val = $(this).val();
var src2_val = $("#src2").val();
var new_string = src2_val + src1_val;
$("#src2").val(new_string);
});

$('#one').on('blur', function() {
$('#two').val($('#two').val() + '\n' + $('#one').val());
});

You need to do some thing like this
$("#one").blur(function() { // triggering event
var one = $(this).val(); // place values in variable to make them easier to work with
var two = $("#two").val();
var three = one + two;
$("#two").val(three); // set the new value when the event occurs
});

This question isn't the easiest to decipher, but perhaps you want to store translated text into a second textarea?
<textarea id="one"></textarea>
<textarea id="two"></textarea>
var translate = function(input) {
// TODO: actual translation
return 'translated "' + input + '"';
}
var $one = $("#one");
var $two = $("#two");
$one.on('blur', function() {
$two.val(translate($one.val()));
});

Dynamically creating a specific number of input form elements

I've read many blogs and posts on dynamically adding fieldsets, but they all give a very complicated answer. What I require is not that complicated.
My HTML Code:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
Fill Details
So, a user will enter an integer value (I'm checking the validation using javascript) in the input field. And on clicking the Fill Details link, corresponding number of input fields will appear for him to enter. I want to achieve this using javascript.
I'm not a pro in javascript. I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields.

You could use an onclick event handler in order to get the input value for the text field. Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById():
If you want to dynamically add elements, you should have a container where to place them. For instance, a <div id="container">. Create new elements by means of document.createElement(), and use appendChild() to append each of them to the container. You might be interested in outputting a meaningful name attribute (e.g. name="member"+i for each of the dynamically generated <input>s if they are to be submitted in a form.
Notice you could also create <br/> elements with document.createElement('br'). If you want to just output some text, you can use document.createTextNode() instead.
Also, if you want to clear the container every time it is about to be populated, you could use hasChildNodes() and removeChild() together.
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
Fill Details
<div id="container"/>
</body>
</html>
See a working sample in this JSFiddle.

Try this JQuery code to dynamically include form, field, and delete/remove behavior:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div><input type="text" name="mytext[]"></div>
</div>