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>
Related
So i'm trying to remove the label and its value from my input html tag whenever the person enters a value, and the code that I have right now does the job but it only removes the value when I click on the input box. Once I enter a value the label is stuck there along with the value of the input. Can someone help me make it so the label is removed completely not just when it's clicked on. And is this something I can do with css? if I can't then how would I do it with javascript?
.text-input-wrapper {
position: relative;
}
.text-input-wrapper label {
position: absolute;
left: 0;
}
.text-input-wrapper label::before {
transition: 0s;
}
.text-input-wrapper label.icon1::before {
content: 'Email';
}
.text-input-wrapper label.icon2::before {
content: 'Password';
}
.text-input-wrapper input {
padding: 0 2rem 0;
}
.text-input-wrapper input:focus+label::before,
.text-input-wrapper input:active+label::before {
display: none;
}
<form class="clearfix credentials-form login-form" method="POST">
<div class="credentials-form__fields">
<div class="text-input standard login-text-input login-email">
<div class="text-input-error-wrapper">
</div>
<div class="text-input-wrapper">
<input type="email" id="login_email2812380460348143" class="text-input-input" name="login_email" value="" autocomplete="off" aria-invalid="false" inputmode="text">
<label for="login_email2812380460348143" class="icon1"></label>
</div>
</div>
<div>
<div class="tooltip-container">
</div>
<div class="text-input standard login-text-input login-password">
<div class="text-input-error-wrapper">
</div>
<div class="text-input-wrapper">
<input type="password" id="login_password5101720956289264" class="text-input-input password-input" name="login_password" value="" autocomplete="off" aria-invalid="false" inputmode="text">
<label for="login_password5101720956289264" class="icon2"></label>
</div>
</div>
</div>
</div>
<button class="login-button signin-button button-primary" type="submit">
<div class="signin-text">Sign in
</div></button>
</form>
Try this way...
const inputs = document.querySelectorAll('.text-input-wrapper input');
const labels = document.querySelectorAll('.text-input-wrapper label');
inputs.forEach((input, i) => {
input.addEventListener('input', () => {
labels[i].style.opacity = 0;
});
});
Use an onInput event instead of an onChange one.
The idea is for the user to select the options and the best employment
sector would be suggested by the form based on his selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Survey that will will give you suggestion.
</title>
<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling form-control Class */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
The form is made with HTML. and for javascript operations i have added
value=1 in the checkbox for generating the different output string.
please view the code below to understand better.
<body>
<h1>Your job type survey suggestion quiz</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<!-- Input Type Text -->
<input type="text"
id="name"
placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">
Email
</label>
<!-- Input Type Email-->
<input type="email"
id="email"
placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">
Age
</label>
<!-- Input Type Text -->
<input type="text"
id="age"
placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>
<!-- Dropdown options -->
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>
DO you like studying?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>
<div class="form-control">
<label>Skills that you have
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp" id="c" value=1>Coding</input></label>
<label for="inp-2">
<input type="checkbox" name="inp" id="d" value=2>Dancing</input></label>
</div>
<button onclick="checkCheckbox()">
Submit
</button>
</form>
Here as of now only 2 questions are in the form, I want to add more
questions and on based of the selection the form will suggest. In this
the alert or any message i`enter code here`s not shown neither there is any error.
<script>
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add=0
if (c.checked == true){
var y = document.getElementById("c").value;
var add=y;
return add;
}
else if (d.checked == true){
var n = document.getElementById("d").value;
var add += n;
}
else {
return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
}
if(add==2){
alert('You are multi-talented! become a dancer or a coder');
}
else{
alert('Become a coder');
</script>
</body>
</html>
here on selecting dancing and coding a different output should be
given and on selecting either dancing or either coding a different
output string should be shown. please suggest for any modifications or
if there is a better way to complete this idea.
There are several errors in the script section. You can use Web Developer debugging in your browser to check them out. I can see that you are new to coding in general, so there are a couple of common mistakes we've all made in the beginning.
This is one way of writing the function so it works as I think you intended it:
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add = 0, val;
if (c.checked == true){
val = "coder";
add += 1;
}
if (d.checked == true){
val = "dancer";
add += 1;
}
if (add == 2) {
alert('You are multi-talented! become a dancer or a coder');
return true;
}
else if (add == 1) {
alert('Become a ' + val);
return true;
}
else {
document.getElementById("error").innerHTML = "*Please mark any of checkbox";
return false;
}
}
Also, you need to add return in the event handler of the button, to avoid it submitting when the form is invalid:
<button onclick="return checkCheckbox()">Submit</button>
And lastly add an element for the error message that is referred to in the script. Something like:
<div id="error"></div>
var $a = $('.a'),
$b = $('.b'),
$c = $('.c'),
$d = $('.d'),
$home = $('.home'),
$about = $('.about'),
$gallery = $('.gallery'),
$contact = $('.contact');
$a.click(function() {
$home.fadeIn();
$about.fadeOut();
$gallery.fadeOut();
$contact.fadeOut();
});
$b.click(function() {
$about.fadeIn();
$home.fadeOut();
$gallery.fadeOut();
$contact.fadeOut();
});
$c.click(function() {
$gallery.fadeIn();
$about.fadeOut();
$contact.fadeOut();
$home.fadeOut();
});
$d.click(function() {
$contact.fadeIn();
$about.fadeOut();
$home.fadeOut();
$gallery.fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact">
<div class="contactForm">
<form action="index.html" method="post">
<input type="text" class="inputText" name="" value="First Name">
<input type="text" class="inputText" name="" value="Last Name">
<input type="text" class="inputText" name="" value="Your Email">
<textarea class="inputMessage" name="" id="" cols="4" rows="6">Your Message</textarea>
<input class="submitButton" type="button" name="" value="Submit">
</form>
</div>
</div>
Every div is working fine, except the Contact div, and I unable to recognize why.
Live error: www.jibranyousuf.com
You will see the contact form when the page loads, although it should only be displayed when I click on Contact Us.
i do not know if I understood the question well, as far as I can tell, all your divs contain a display: none in the style.css file, so they are hidden in the page application, but the "contact" div does not have this "display: none" in style.css, he has no class, for example "about" div:
.about{
position: absolute;
right: 0;
top: 10px;
color: black;
font-family: century 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
padding: 0 60px;
display: none;
}
try add this on your style.css file:
.contact{
display: none;
}
Sorry about my english
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
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.