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>

How to check if a jquery element is an `del` tag?

I have an HTML checkbox next to a paragraph. When the user check the box, I want to put a strike through the paragraph using css bootstrap.
To add the strike through, I should wrap the paragraph with <del></del> tag.
I am able to wrap the paragraph correctly with the <del></del> when the box is checked. However, I am unable to remove the <del></del> tag when the user uncheck the box.
My code seems to be failing to check if the element is a del.
I created a fiddler to show you what is happening https://jsfiddle.net/vo1npqdx/1335/
in the fiddler, you will see that the code if (display.is('del')) { .... } is failing so the code inside the if statement never gets fired.
I tried to print the html code to the console to make sure I am dealing with the correct element, and it is clearly showing the correct code.
How can I unwrap my paragraph from the del tag?
Here is my JS code
$(function(){
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
} else {
var firstDisplay = display.parent().children().first();
console.log(firstDisplay.html())
if (display.is('del')) { // this is failing
firstDisplay.unwrap();
}
}
});
});
Here is my HTML code
$(function(){
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
} else {
var firstDisplay = display.parent().children().first();
console.log(firstDisplay.html())
if (display.is('del')) { // this is failing
firstDisplay.unwrap();
}
}
});
});
body {
padding-top: 65px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column.
Also, add a 8pm to the bottom margin
*/
.dl-horizontal dt {
white-space: normal;
margin-bottom: 8px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea,
.input-width-input {
max-width: 380px;
}
.uploaded-file-name {
max-width: 310px;
}
.help-block-standard {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
/* Vertically align the table cells inside body-panel */
.panel-body .table > tr > td
{
vertical-align: middle;
}
.panel-body-with-table
{
padding: 0;
}
.mt-5 {
margin-top: 5px !important;
}
.mb-5 {
margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="http://laravel54.dev/assets/asset/6" accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="_token" value="UA428wC4vxZgb9OmNCGBIkosCN4KuS49VgFiUTET">
<input name="_method" type="hidden" value="PUT">
<div class="form-group ">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input class="form-control" name="name" type="text" id="name" value="Some new test" minlength="1" maxlength="255" required="true" placeholder="Enter name here...">
</div>
</div>
<div class="form-group ">
<label for="notes" class="col-md-2 control-label">Notes</label>
<div class="col-md-10">
<textarea class="form-control" name="notes" cols="50" rows="10" id="notes" maxlength="1000"></textarea>
</div>
</div>
<div class="form-group " style="margin-bottom: 5px;">
<label for="picture" class="col-md-2 control-label">Picture</label>
<div class="col-md-10">
<div class="input-group uploaded-file-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse <input type="file" name="picture" id="picture" class="hidden">
</span>
</label>
<input type="text" class="form-control uploaded-file-name" readonly>
</div>
<div class="input-group input-width-input">
<span class="input-group-addon">
<input type="checkbox" name="custom_delete_picture" class="custom_delete_file"> Delete
</span>
<span class="input-group-addon custom_delete_file_name">
<p>uploads/zCmPgC5yMor77DaM50nTTnSnxh4y75e7B06WUFFM.jpeg</p>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-primary" type="submit" value="Update">
</div>
</div>
</form>

Maybe something like this?
var del = display.children().first();
console.log(del)
if (del.is('del')) {
del.contents().unwrap();
}
The del is element should be the first child of display. I've used console.log(del) because using html() is effectively giving you the innerHTML, which isn't particular helpful.
In your original code, display is your p element and this line was just going 'up one, down one', ending up back at the p:
var firstDisplay = display.parent().children().first();

This is the solution to your answer.
$(function(){
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
} else {
$(".custom_delete_file_name:eq(0) p").html($(".custom_delete_file_name:eq(0) p del").html());
}
});
});
But keep in mind you don't have to wrap it with a tag to make it strike through. You can simply add a css class or a style property with
text-decoration: line-through;
and toggle it.
This is the best approach.

A different approach... Intead of unwrap, just overwrite the p again with the content inside of del...
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
}
else {
display.html(display.find('del').text());
}
});
I hope it helps

getting an id from css using php

I having a bit of a problem in my code. What I am trying t achieve is that I want to change some contents of CSS like changing the style of a page using javascript inside php, but I have an error saying there is no id or null
<!DOCTYPE html>
<?php
if (isset($_POST["get_name"])) {
$theName = $_POST["my_name"];
echo "<script>
document.getElementById('text').style.display = 'block';
document.getElementById('name').style.display = 'none';
</script>";
}
?>
<html>
<head>
<style>
#check {
background-color: yellow;
color: black;
border-color: yellow;
border-radius: 15px;
display: inline-block
}
#text {
display: none;
}
#name {
}
</style>
</head>
<body>
<form id="name" action="" method="post">
Name: <input type="text" name="my_name" placeholder="Your name here" required>
<input type="submit" name="get_name" value="Enter">
</form>
<form id="text" action="" method="post">
Your text: <textarea name="getText" row="10" col="10"></textarea>
<input type="submit" name="get_text" value="Enter">
</form>
</body>
</html>

You should put script tag in head :
<!DOCTYPE html>
<html>
<head>
<?php
if (isset($_POST["get_name"])) {
$theName = $_POST["my_name"]; ?>
<script>
document.getElementById('text').style.display = 'block';
document.getElementById('name').style.display = 'none';
</script>
<?php
}
?>
<style>
#check {
background-color: yellow;
color: black;
border-color: yellow;
border-radius: 15px;
display: inline-block
}
#text {
display: none;
}
#name {
}
</style>
</head>
<body>
<form action="" method="post">
Name: <input type="text" name="my_name" placeholder="Your name here" required>
<input type="submit" name="get_name" value="Enter">
</form>
<form id="text" action="" method="post">
Your text: <textarea name="getText" row="10" col="10"></textarea>
<input type="submit" name="get_text" value="Enter">
</form>
</body>
</html>

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.

Replace text nodes

I'm trying to replace these two text nodes with each other. It suppose to be like a correction verification. What its suppose to do is to see if the input is correct after you focus on another input.
This is the html
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
function validatefirst() {
if (document.myform.first_name.value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
this is the css file:
.one {
color:#000;
position:absolute;
top:400px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:400px;
}
So if you can help me out that will be great. Please no jquery. Thank you

I'm not sure quite what you're trying to accomplish with the function-within-a-function. The following does something, not sure if it's what you want or not:
<html>
<head>
<style>
.one {
color:#000;
position:absolute;
top:200px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:200px;
}
</style>
</head>
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
<script>
function validatefirst() {
if (document.getElementById("first_name").value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
one_container.appendChild(one);
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
</script>
</body>
</html>