We Keep Coding

text blinking in textarea

I have the following code :
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding-left:70px;}
h1{padding:50px; color:blue}
#body {border:5px solid black;}
<form name="form1">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10>
</textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>
I need to copy the text entered in textbox and paste in the textarea. But the text is displayed and erased immediately like blinking. I want that to be displayed permanently.
Please guide me!

<button>s, by default are type="submit", so clicking is submitting your form. Add type="button" to your button.

Here's a working version. I think your issue was that buttons within a form will default to type submit if no type is specified.
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
function formSubmitted(e) {
// Handle form submit, if needed
return false;
}
function next_task() {
// Not yet implemented
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding: 1rem;
}
h1{
padding: 1rem;
margin: 0;
color: blue;
}
#body {
border: 5px solid black;
}
<header>
<h1>To Do list</h1>
</header>
<form name="form1" onsubmit="return formSubmitted(event)">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10></textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>

Unable to retrieve the value from a form with jQuery/Javascript

I'm trying to validate my form, but I can't seem to capture my form values! At a loss as to where to go now. I've tried a combination of jQuery and Javascript. Here's a snippet of my code.
HTML:
<form action="#" name="application-form" method="post" enctype="multipart/form-data">
<ul>
<li class="input-row">
<label for="app-resume">Resume</label>
<input type="file" id="app-resume" name="resume" />
</li>
<li class="input-row">
<label for="app-name">Full Name</label>
<input type="text" id="app-name" name="fname" />
</li>
<li class="input-row">
<label for="app-pnum">Phone Number</label>
<input type="number" id="app-pnum" name="pnum" />
</li>
<li class="input-row">
<label for="app-email">Email</label>
<input type="email" id="app-email" name="email" />
</li>
<li class="input-row">
<label for="app-info">Additional Information</label>
<textarea type="text" id="app-info" name="info"></textarea>
</li>
</ul>
<div class="btn-mssg-container">
<button type="submit" name="sbt-btn" id="sbt-btn">apply</button>
<p id="sbt-mssg" class="hidden">Thank you for applying.</p>
</div>
</form>
JS:
var myForm = document.forms["application-form"];
myForm.onsubmit = processForm;
function processForm(){
console.log(myForm.fname.value);
}
I've also tried:
function processForm(){
var inName = $("#app-name").val();
console.log(inName);
}
I'm getting nothing! Someone please put me out of my misery.

The first attempt at getting form values is called HTMLFormControlsCollection
1. Reference the form:
var FoRm = document.forms.FormID_or_NAME
OR
var FoRm = document.forms["FormID_or_NAME"]
OR
var FoRm = document.forms[0]
The last one using index number zero in bracket notation will work if the target <form> is the first on the page or the only <form> on the page.
2. Collect all of the form's form controls into an array-like object:
var formControlS = FoRm.elements
Step 2. was the crucial step that you were missing.
3. Now you can reference and get values from any form control under that specific <form>:
var foRmC = formControlS.FormControlID_or_NAME.value
OR
var foRmC = formControlS["FormControlID_or_NAME"].value
OR
var foRmC = formControlS[0].value
Details are commented in Demo
This localStorage feature cannot work in a Stack Snippet due to security measures. If you want to review a fully functional demo, then visit Plunk
Demo
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
}
iframe {
display: inline-table;
max-width: 40%;
height: 100vh
}
#app0 {
max-width: 60%;
margin: 0 0 5px 15px;
}
label {
display: inline-block
}
/* Area code - Central Office code */
[type=number] {
width: 5ch
}
/* The last 4 digits - Station code */
label [type=number]:last-of-type {
width: 6ch
}
[type=email] {
width: 26ch
}
.hidden {
opacity: 0
}
#msg {
height: 60px;
overflow-x: hidden;
overflow-y: scroll;
border: 3px inset grey;
padding: 10px;
display: block;
}
</style>
</head>
<body>
<main id='main'>
<!-- On submit, form sends to a real test server
|| The target attribute value is the name of
|| iframe#display. Whenver data is tested thru
|| this server, it will send a response later.
-->
<form action="https://httpbin.org/post" id="app0" method="post" enctype="multipart/form-data" target='display'>
<fieldset id='set0'>
<label for="file0">Resume</label>
<input type="file" id="file0" name="resume">
<br>
<br>
<label for="name0">Full Name</label>
<input type="text" id="name0" name="name">
<br>
<br>
<label>Phone Number
<input type="number" id="area0" name="phone" min='100' max='999'>
<input type="number" id="cent0" name="phone" min='100' max='999'>
<input type="number" id="stat0" name="phone" min='0000' max='9999'>
</label>
<br>
<br>
<label for="mail0">Email</label>
<input type="email" id="mail0" name="mail">
<br>
<br>
<label for="info0">Additional Information</label>
<br>
<textarea id="info0" name="info" cols='28'></textarea>
<br>
</fieldset>
<fieldset id="set1">
<button id='btn' type="button" class=''>Process</button>
<button id='sub' type='submit' class='hidden'>Transfer</button>
</fieldset>
<output id="msg"></output>
</form>
<iframe name='display' src='about:blank' width='60%'></iframe>
</main>
<script>
/* The interface used to refer to form controls
|| is called HTMLFormControlsCollection
*/ // Reference the form
var xApp = document.forms.app0;
/*\\\\\\\\\\/IMPORTANT\//////////
This is the part that was in error
In order to refer to any form controls
of the referenced form, you must
collect them in an array-like object
using the .elements proerty //////*/
var xCon = xApp.elements;
// Then from the .elements reference by id
// A click event on a button--processForm
// is called
xCon.btn.onclick = processForm;
/* This function will gather all form values
|| into an array.
|| Then it stores that array in localStorage
|| Displays the data then hides the "Process"
|| button and reveals the "Transfer" button
*/
function processForm(e) {
var qty = xCon.length;
var data = [];
for (let i = 0; i < qty; i++) {
var formControl = xCon[i].value;
if (formControl !== null || formControl !== undefined || formControl !== "") {
data.push(formControl);
}
}
localStorage.setItem("data", JSON.stringify(data));
var stored = JSON.parse(localStorage.getItem("data"));
appX();
xApp.onsubmit = appX;
function appX(e) {
xCon.msg.value = stored;
xCon.btn.classList.toggle('hidden');
xCon.sub.classList.toggle('hidden');
}
}
/* Once the "Transfer" button is clicked, the
|| data is sent to the test server and the
|| test server responds back. The response is
|| captured and displayed in the iframe to the
|| right
*/
</script>
</body>
</html>

Replace all XX attributes to numeric ID with jQuery

I'm trying to clone a div element by clicking on an a element. And when that div cloned, all XX attributes change to it's numeric ID.
For example:
for="gr_name_XX" to for="gr_name_1"
name="grfield[XX][name]" to name="grfield[1][name]"
id="gr_name_XX" to id="gr_name_1"
I'm trying to do that, but only the div element's ID attribute doing this function and change to numeric ID. Sorry, I'm novice in javascript and jQuery coding. It's my code:
var elementCounter = 0;
jQuery(document).ready(function() {
jQuery("#add-new-game").click(function() {
var elementRow = jQuery("#placeholder-item").clone();
var newId = "gr-item-" + elementCounter;
elementRow.attr("id", newId);
elementRow.show();
// Where I have problem!!
elementRow.each(function() {
elementRow.html().replace(/XX/g, elementCounter);
});
var removeLink = jQuery("a", elementRow).click(function() {
removeElement(elementRow);
return false;
});
elementCounter++;
jQuery("input[name=element-max-id]").val(elementCounter);
jQuery(".add-and-remove-items").append(elementRow);
return false;
});
});
function removeElement(element) {
jQuery(element).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sortable-items add-and-remove-items settings-items gr-items"></div>
<input type="hidden" name="element-max-id" />
Add new
<div class="sortable-item add-and-remove-item settings-item gr-item front-page-element" id="placeholder-item" style="display: none;">
<label for="gr_name_XX" style="width: 90px; display: inline-block;">Name: </label>
<input type="text" name="grfield[XX][name]" class="regular-text" id="gr_name_XX" value="" />
<label for="gr_genre_XX" style="width: 90px; display: inline-block;">Genre: </label>
<input type="text" name="grfield[XX][genre]" class="regular-text" id="gr_genre_XX" value="" />
<br>
<label for="gr_backg_XX" style="width: 90px; display: inline-block;">Background: </label>
<input type="text" name="grfield[XX][backg]" class="regular-text" id="gr_backg_XX" value="" />
<label for="gr_date_XX" style="width: 90px; display: inline-block;">Date: </label>
<input type="text" name="grfield[XX][date]" class="regular-text" id="gr_date_XX" value="" />
<label for="gr_nc_XX"><input type="checkbox" name="grfield[XX][nc]" id="gr_nc_XX" value="1" /> String date</label>
Remove<br>
</div>
What am I doing wrong? Thanks...

You don't need to use each and also .html() only returns the markup content. For updating, you need to do .html(YOUR-UPDATE-CODE),
change,
// Where I have problem!!
elementRow.each(function() {
elementRow.html().replace(/XX/g, elementCounter);
});
To
elementRow.html(elementRow.html().replace(/XX/g, elementCounter));
Demo:
var elementCounter = 0;
jQuery(document).ready(function() {
jQuery("#add-new-game").click(function() {
var elementRow = jQuery("#placeholder-item").clone();
var newId = "gr-item-" + elementCounter;
elementRow.attr("id", newId);
elementRow.show();
elementRow.html(elementRow.html().replace(/XX/g, elementCounter));
var removeLink = jQuery("a", elementRow).click(function() {
removeElement(elementRow);
return false;
});
elementCounter++;
jQuery("input[name=element-max-id]").val(elementCounter);
jQuery(".add-and-remove-items").append(elementRow);
return false;
});
});
function removeElement(element) {
jQuery(element).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sortable-items add-and-remove-items settings-items gr-items"></div>
<input type="hidden" name="element-max-id" />
Add new
<div class="sortable-item add-and-remove-item settings-item gr-item front-page-element" id="placeholder-item" style="display: none;">
<label for="gr_name_XX" style="width: 90px; display: inline-block;">Name: </label>
<input type="text" name="grfield[XX][name]" class="regular-text" id="gr_name_XX" value="" />
<label for="gr_genre_XX" style="width: 90px; display: inline-block;">Genre: </label>
<input type="text" name="grfield[XX][genre]" class="regular-text" id="gr_genre_XX" value="" />
<br>
<label for="gr_backg_XX" style="width: 90px; display: inline-block;">Background: </label>
<input type="text" name="grfield[XX][backg]" class="regular-text" id="gr_backg_XX" value="" />
<label for="gr_date_XX" style="width: 90px; display: inline-block;">Date: </label>
<input type="text" name="grfield[XX][date]" class="regular-text" id="gr_date_XX" value="" />
<label for="gr_nc_XX"><input type="checkbox" name="grfield[XX][nc]" id="gr_nc_XX" value="1" /> String date</label>
Remove<br>
</div>

What you are going to do is first get and loop the children of your elementRow then loop through each attribute of that child:
// get and loop through each children
$(elementRow).children().each(function () {
var child = $(this)[0];
// loop through each attribute
for (var i = 0; i < child.attributes.length; i++)
{
var attributeVal = child.attributes[i].value;
// check if attribute value contains XX
if (attributeVal.indexOf("XX") != -1)
{
// replace it
child.attributes[i].value = attributeVal.replace(/XX/g, elementCounter)
}
}
});
$(this)[0] is a way of getting the original javascript HTML object reference instead of getting jQuery object.
.attributes is a property of JS HTML Object and does not exist in jQuery HTML object.
working fiddle based on your example
hope that helps.

How to add file value with jQuery serialize()

I am sorry for the weird title of the question.
I am trying to process a form using jQuery ajax which contain a file.
This is what I am trying to use..
<script>
var file_data = $('#qfile').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);//
var data = $(this).serialize();
// Here is the problem. I sucessfully sent the file alone but I want to
//send all the form input values using serialize() and add formData too
</script>
I want to send the file and also all the input serialize()
Here is my ajax part...
<script>
$.ajax({
type : 'POST',
url : 'ajax/ajax-reg.php',
data : form_data,
processData: false,
contentType: false,
</script>

I want to send all the form input values using serialize() and add formData too
In this case serialize() won't help you, but there is a better way. Simply provide the form DOMElement to the FormData() constructor. Then all the data from the form fields (including the images) will be placed in to the FormData object. Try this:
var form_data = new FormData($('form')[0]);
$.ajax({
type: 'POST',
url: 'ajax/ajax-reg.php',
data: form_data,
processData: false,
contentType: false,
success: function() {
// handle response here...
}
});

Using jQuery, you also can try something like this:
var postData = new FormData($('form')[0]);
postData.append("In", $("input[name=In]").val()); // usual input
postData.append("Txt", $("textarea[name=Txt]").text()); // textarea
postData.append("File", $("input[name=File]")[0].files[0]); // file
$.post('ajax/ajax-reg.php', postData);

I use jquery (but this can be easily done via vanilla javascript too) to create a hidden text input after the file input. I then set the name of the new text input as the id of the file input it's associated with and set it's value (when a file is selected) to the filename. You can then use $('form').serializeArray(); and return the name:value pairs of the hidden inputs that correspond to the file inputs.
$(document).ready(function(){
// Dynamically create hidden text inputs for the file inputs' data
// (create dynamically to avoid having re-write your entire html file)
$('input:file').each( function(){
$(this).after('<input type="text" readonly name="' + $(this).attr("id").replace("_", " ") + '" hidden value=""/>');
});
// When the user selects a file to be uploaded...
$('input:file').change( function(){
// If a file is selected set the text input value as the filename
if($(this).get(0).files.length !== 0){
$(this).next('input:text').val($(this).get(0).files[0].name);
}
});
$("form").submit( function(e){
e.preventDefault();
//Clear previous data from results div
$('#results').text("");
// Serialize the form data
var x = $('form').serializeArray();
// Iterate through the array results and append
// the data to the results div
$.each(x, function(i, field) {
var result = '<span class="left">' + field.name + ' : </span>';
result += '<span class="right">' + field.value + '</span><br>';
$('#results').append(result);
});
});
});
form {
display: inline-block;
left: 0;
width: auto;
max-width: 40%;
margin-left: 0;
padding: 0;
}
div.left, div.right, span.left, span.right {
display:block;
position: relative;
width: 40%;
}
.rad { font-size: 14px; }
.left { float: left; }
.right { float: right; }
#results {
display: inline-block;
position: relative;
width: auto;
min-width: 40%;
line-height: 23px;
}
#results .left {
color: green;
text-align: right;
}
#results .right {
color: blue;
text-align: left;
margin-right: 20px;
}
.clearfix { clear: both; }
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
<div class="left">
<label class="right" for="name">Name:</label><br>
<label class="right" for="gender">Gender:</label><br>
<label class="right" for="file1">1st Pic:</label><br>
<label class="right" for="file2">2nd Pic:</label><br>
<label class="right" for="file3">3rd Pic:</label><br>
<label class="right" for="file4">4th Pic:</label><br>
</div>
<div class="right">
<input class="left" type="text" name="Name" ><br>
<select class="left" name="Gender">
<option selected></option>
<option>Unspecified</option>
<option>Female</option>
<option>Male</option>
</select><br>
<input class="left" type="file" accept="image/*" id="File_1"><br>
<input class="left" type="file" accept="image/*" id="File_2"><br>
<input class="left" type="file" accept="image/*" id="File_3"><br>
<input class="left" type="file" accept="image/*" id="File_4"><br>
</div>
</form>
<div id="results" class="right"></div>
<div class="clearfix"></div>
<input form="myForm" type="submit" id="submit" value="Serialize Form" />
<input form="myForm" type="reset" value="Reset Form" onClick="this.form.reset()" />
</body>

Form validation, normal button, red box and clean data

I have a popup form and I have to validate fields in this form before I close this popup, I need to use this validation with a normal button, not a submit, if the fields are emty I need to mark these on a red box and put the 'This field is empty' after. After I close the form I need to clean up data from form. How should I do this using jQuery and Javascript?
<form id="frmUsers" data-userid="">
<img id="btnClose" src="resources/img/close_window.png">
<h2 id="popupTitle"></h2>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required"/>
<p></p>
</li>
<li>
<label for="level">Level:</label>
<input type="number" id="level" name="txtLevel" placeholder="Please select level"/>
<p></p>
</li>
<li>
<label for="registrationStatus">RegistrationStatus:</label>
<select name="txtRegistrationStatus" id="registrationStatus"
placeholder="Please select registration status">
<option value="Registered">Registered</option>
<option value="Unregistered">Unregistered</option>
</select>
<p></p>
</li>
<li>
<label for="registrationDate">RegistrationDate:</label>
<input type="text" id="registrationDate" name="txtRegistrationDate"
placeholder="Please select date"/>
<p></p>
</li>
<div class="btnZone">
<input class="btnDown" type="button" value=" " id="btnPopup" />
<input class="btnDown" type="button" value="Cancel" id="btnCancel"/>
</div>
</ul>
</form>
And my form validation function:
function validateForm() {
var txtUsername = $("#username").val();
if(txtUsername == ""){
("#username").css("border-color", "red");
}
// $(":input").each(function () {
// if ($(this).val() == "") {
// $(this).css("border-color", "red");
// // $("p").html("This field is empty");
// // $("input").val("This field is required");
// // alert($(this).attr("id") & " validate error");
// }else{
// $(this).css("border-color", "black");
// }
//
// });
}

You can use one of many popup/modal plugins, but if you want to create your own, than you should do something similar to this:
var txtUsername = $("#username");
function validateForm() {
txtUsernameValid = $.trim(txtUsername.val());
txtUsername.toggleClass('invalid-input', !txtUsernameValid);
return txtUsernameValid;
};
$('[data-popup]').each(function(i) {
var thisButton = $(this);
var toPopup = $(thisButton.data('popup'));
toPopup.wrap('<div class="popup-container"><div class="popup-content"></div></div>');
var popupContainer = toPopup.closest('.popup-container').hide();
popupContainer.find('.popup-content').append('<span class="popup-close">X</span>')
thisButton.on('click', function(e) {
e.preventDefault();
popupContainer.show();
});
popupContainer.find('.popup-close').on('click', function(e) {
popupContainer.hide();
});
popupContainer.find('#btnSave').on('click', function(e) {
/* Save your data, than reset the form */
if( validateForm() ) {
popupContainer.find('form')[0].reset();
popupContainer.hide();
};
});
popupContainer.find('#btnCancel').on('click', function(e) {
popupContainer.find('form')[0].reset();
popupContainer.hide();
});
});
body {
font-family: sans-serif;
}
.popup-container {
background: none rgba(0, 0, 0, .5);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
}
.popup-container::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.popup-content {
position: relative;
display: inline-block;
vertical-align: middle;
background: none #fff;
padding: 10px 20px;
text-align: left;
}
form ul {
list-style: none;
padding: 0;
}
.popup-close {
display: inline-block;
padding: 4px;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.invalid-input {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-popup="#frmUsers">
Open form
</button>
<form id="frmUsers" data-userid="">
<img id="btnClose" src="resources/img/close_window.png">
<h2 id="popupTitle"></h2>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required" />
<p></p>
</li>
<li>
<label for="level">Level:</label>
<input type="number" id="level" name="txtLevel" placeholder="Please select level" />
<p></p>
</li>
<li>
<label for="registrationStatus">RegistrationStatus:</label>
<select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status">
<option value="Registered">Registered</option>
<option value="Unregistered">Unregistered</option>
</select>
<p></p>
</li>
<li>
<label for="registrationDate">RegistrationDate:</label>
<input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" />
<p></p>
</li>
<div class="btnZone">
<input class="btnDown" type="button" value="Save" id="btnSave" />
<input class="btnDown" type="button" value="Cancel" id="btnCancel" />
</div>
</ul>
</form>
It is not complicated indeed, but I never try to invent hot water, I just take one of existing plugins, as Magnific Popup.
Same code on JSFiddle.