The jquery code to allow a form and button to show entered data as a list is not functioning. The code is also written to delete the text when it is clicked on - unable to check if this is also working. Any suggestions on where the error may be found?
$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
$('.list').click(function(){
});
});
$(document).on('click', '.item', function(){
$(this).remove();
});
html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- <script src="js_lib/jquery-ui.js"></script>-->
<script src="jquery-3.5.1.min.js"></script>
<title>A Simple Notes List</title>
<h1><span>A Simple Notes List</span></h1>
<div id="canvas" class="container group">
<div id="primaryContent" class="group">
<p> </p>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button" value="button">Add!</div>
<br/>
<div class="list"></div>
<p>Click item on list to remove item from list</p>
</div>
Related
I am kind of stuck. I have thought of the idea to use the .insertBefore() but I am not sure where to place the syntax. I also need to add checkboxes instead of the bullets that automaticly apear when using , I have no clue have to do this.
My code is as follows.
HTML
const n = [];
function changeText() {
inputText = document.getElementById('inputText').value;
n.push(inputText);
document.querySelector('#list ul').innerHTML += "<li>" + inputText
}
<html lang="en">
<head>
<title>To-Do list</title>
<mmeta charset="UTF-8">
<link rel="stylesheet" href="todoStyle.css">
</head>
<body>
<div id="form">
<h1>New Task</h1>
<div id="button">
<button onclick="changeText()">Add to list</button>
</div>
<div id="input">
<input type="text" id="inputText" name="addNewList">
</div>
</div>
<div class="list1" id="list">
<h1>My to-do list</h1>
<ul>
</ul>
</div>
<script src="todo.js"></script>
</body>
</html>
I tried inserting the .insertBefore() in a new document.getElementById. But I was not sure where to insert this line of code.
To add an element to the beginning of an array, just array.unshift(element) instead of .push
And for putting a checkbox per array item:
<li><input type="checkbox"/></li>
One way to do it is to first save the current content. Then you will concatenate the new item with the current content, in the order you want it to be presented. I modified the code to work like that
const n = [];
function changeText() {
inputText = document.getElementById('inputText').value;
// add the item in the beginning of the list
n.unshift(inputText);
// save current listing
const currentContent = document.querySelector('#list ul').innerHTML;
// append new item in the beginning the the current listing
document.querySelector('#list ul').innerHTML = "<li>" + inputText + "</li>" + currentContent;
}
<html lang="en">
<head>
<title>To-Do list</title>
<mmeta charset="UTF-8">
<link rel="stylesheet" href="todoStyle.css">
</head>
<body>
<div id="form">
<h1>New Task</h1>
<div id="button">
<button onclick="changeText()">Add to list</button>
</div>
<div id="input">
<input type="text" id="inputText" name="addNewList">
</div>
</div>
<div class="list1" id="list">
<h1>My to-do list</h1>
<ul>
</ul>
</div>
<script src="todo.js"></script>
</body>
</html>
Try using afterbegin, I used css to remove the circle of the list styles and having a checkbox with the text, now you should have some events for the input to handle.
const n = [];
function changeText() {
inputText = document.getElementById('inputText').value;
n.push(inputText)
// get reference to the nav tag
const listUl = document.querySelector("#list ul");
listUl.insertAdjacentHTML("afterbegin", `
<li>
<input type="checkbox"/>
${inputText}
</li>
`);
}
#list ul li{
list-style:none;
}
<html lang="en">
<head>
<title>To-Do list</title>
<mmeta charset="UTF-8">
<link rel="stylesheet" href="todoStyle.css">
</head>
<body>
<div id="form">
<h1>New Task</h1>
<div id="button">
<button onclick="changeText()">Add to list</button>
</div>
<div id="input">
<input type="text" id="inputText" name="addNewList">
</div>
</div>
<div class="list1" id="list">
<h1>My to-do list</h1>
<ul>
</ul>
</div>
<script src="todo.js"></script>
</body>
</html>
Suppose a function trigger on Click button
<!DOCTYPE HTML>
<html lang="en">
<!--getElementsByTagName.html-->
<head>
<title>getElementsByTagName.html</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="getElementsByTagName.css"/>
<script type="text/javascript">
//<![CDATA[
function getData(){
inputTag=document.getElementsByTagName("input");
divOutput=document.getElementById("output");
alert(inputTag.length);//length of input Tag
for(i=0;i<inputTag.length-1;i++){
if((inputTag[i].value=="") || (inputTag[i+1].value=="")){
alert("Please Enter Value");
}else{
a=inputTag[i].value;
b=inputTag[i+1].value;
}
}
$("#output").css("display","block");
divOutput.innerHTML="<strong>"+a+"<\/strong>";
divOutput.innerHTML+="<br\/>"+"<strong>"+b+"<\/strong>";
}//end function
//]]>
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Example getElementsByTagName</legend>
<label>Name</label>
<input type="text" id="txtName"/>
<label for="txtName">Password</label>
<input type="password" id="txtPassword"/>
<button type="button" onclick="getData()">
Submit
</button>
</fieldset>
<div id="output">
</div>
</form>
</body>
</html>
Is this right?? $("#output").css("display","block");
This code not working i.e. after click on submit button it doesn't show the output div?
Add this code:
$( "#output" ).on( "click", function() {
this.css("display", "block");
});
Iam appending a form from desktop view and adding it to mobile view (including scripts) using append() . Since Iam appending same class name and ID for form elements., on submitting form., it is identifying the mobile layout form and passing empty value on trying to get value using document.getElementsByClassName('txtbox').value.
As per my requirement., I need to give index to identify each form while appending. like document.getElementsByClassName('txtbox')[0].value. I have done an approach for same. But not getting how to increment index value on appneding. I have created plunker for same. Please let me know what I have missed.
Here is the sample code
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
$("form").submit(function(){
console.log(document.getElementsByClassName('txtbox').value);
/*console.log(document.getElementsByClassName('txtbox')[0].value);
console.log(document.getElementsByClassName('txtbox')[1].value) ; */
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You may use $(this).find() to select .txtbox inside the form.
$("form").submit(function() {
console.log($(this).find('.txtbox').val());
return false; // for debugging
});
Also, please note that id should be unique in the documnt.
I have passed form object inside function call and used that param to identify current form.
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
});
function submitForm(form){
var txtValue = $(form).find('.txtbox').val();
console.log(txtValue);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();submitForm(this);">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You can iterate through you class list like so:
var txtboxes = document.getElementsByClassName("txtbox");
for(var i = 0; i < txtboxes.length; i++){
// ... process each element here
$(txtboxes[i]).append(data);
}
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I'm new to JavaScript and JQuery, and I'm trying to figure out why my function doesn't get called when I press the button. My only clue is that the Firefox Console is showing TypeError: document.getElementById(...) is null. I found this example, which says "document.write will overwrite the entire DOM if it's called after the document has finished being parsed" and that's why it's happening. I took a look at my code, and I moved the button into my div tag and it's still happening. I also tried moving the button into it's own div tags. Compiler didn't seem to like syntax when I tried adding html tags where the button is. I'm not sure what I'm supposed to do to fix this.
I'm following this example for the function call on button click. Hopefully I'm applying it ok to my project.
This is my code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
var selchbox = []; // array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form>
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="polaris-checkbox-1">
<label for="polaris-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
//$('#checkbox').prop('checked')
</dd>
</dl>
</div>
<div id="loading">
<input type="button" value="Click" id="btntest" />
</div>
</form>
</body>
</html>
The issue is you assign the click handler before the element is available in the DOM. To resolve, you should wrap it in a DOM ready function:
$(function(){
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
});
Note: $(function(){ ... }); is a shortcut for $(document).ready(function(){ ... });
You're running document.getElementById('btntest') before that element exists. Put this script after your button on the page, not before it:
<script>
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>
What I want to do is to allow the users to have their choice whether to add more text box when filing their data.
So far I have this code
http://code.jquery.com/jquery-1.5.1.js
This is the code that I got.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.Delete{color:#ff0000;}
.Add {color:green;}
.Retrieve{color:blue;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('.Delete').live('click',function(e){
$(this).parent().remove();
});
$('.Add').live('click',function(e){
$('.Option:last').after($('.Option:last').clone());
});
$('.Retrieve').live('click',function(e){
$('.Option input').each(function(i,e){
alert($(e).val()); //Alerts all values individually
});
});
});
});//]]>
</script>
</head>
<body>
<div class='Option'>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
<span class='Delete'>Delete</span></div>
<br/><br/>
<span class='Add'>Add Option</span>
<br/><br/>
<span class='Retrieve'>Retrieve Values</span>
</body>
</html>
That code allows me to add more text box and delete them, but my problem is I'm trying to get the value of those text box using PHP GET or PHP POST and if possible set some limit, maybe after adding 5 sets of text boxes the user will not be able to add more.
In order to post to PHP, simply wrap your HTML in a form element:
<form method="GET" action="myPage.php">
<div class='Option'>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
...
</div>
</form>
Then to limit the number of .Option elements which can be added, simply declare a global variable which counts the number of .Option elements:
var optionCount = 1;
$('.Delete').live('click',function(e){
$(this).parent().remove();
optionCount--; /* Decrease optionCount. */
});
$('.Add').live('click',function(e){
if (optionCount < 5) { /* Only if optionCount is less than 5... */
$('.Option:last').after($('.Option:last').clone());
optionCount++; /* Increase optionCount. */
}
});
You must check the number of inputs in the add event.
You use form tag to transfer data to server and
you also must set "method" attribute in form tag with GET or POST
<html>
<body>
<head>
<script type='text/javascript'> $(function(){
$('.Add').live('click',function(e){
if($('.option input').length < 5)
{
$('.Option:last').after($('.Option input:last').val('').clone());
}
// Other code
// ...
}
});
</script>
</head>
<form action="welcome.php" method="post">
<input type='text' name='txtTest'/><br>
<input type='text' name='txtTest'/><br>
<input type="submit">
</form>
</body>
</html>