I am new to Javascript. And I am trying to create a page which is used for writing reviews. I am stuck at a certain point.
There should be a button to add a section which copies the whole sections div to allow the user to write another section.
Attached below is my code. I am using CKeditor plugin to allow the end user to format their text as they wish.
The current code , while creating a new section, doesn't allow the user to write into the text area created. Please guide me as to where I was mistaken.
<?php
include 'settings.php';
if (!isset($dbc)){
$dbc = new mysqli(DB_HOST , DB_USER , DB_PASSWORD , DB_NAME);
}
if ($dbc -> connect_error){
die ("Cannot connect to the database");
}
?>
<html>
<head>
<title>Write a new Review.</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form id = "new_review" action = "form.php" method = "post">
<div id = "header">
<h2> Header Section. </h2>
Author : <input type = "text" id = "author"> <br>
Title: <input type = "text" id = "title"> <br>
Tagline: <input type = "text" id = "tagline" > <br>
Score: <input type = "text" id = "score" > <br>
Pros: <textarea class = "ckeditor" id = "pros">
Please enter the pro's of the product here.
</textarea>
Cons: <textarea class = "ckeditor" id = "cons">
Please enter the cons of the product here.
</textarea>
Verdict:<textarea class = "ckeditor" id = "verdict">
Enter your vedict here.
</textarea>
</div>
<div id = "sections">
<h2> Sections. </h2>
<input type = "button" id="button" onclick="duplicate()">Add a section</button>
<div class = "section_base" id = "section">
Section Icon: <input type="file" id="icon" accept="image/*"> <br>
Section Title: <input type = "text" id = "section_title" > <br>
Section Text: <textarea class = "ckeditor" id = "section_text">
Enter you text here.
</textarea>
Section Score: <input type = "text" id = "section_score">
</div>
</div>
<div id = "conclusion">
<h2> Conclusion: </h2>
<textarea class = "ckeditor" id = "conclusions">
Enter your conclusion here.
</textarea>
</div>
<input type = "submit" value="submit">
</form>
<script type="text/javascript">
var i = 0;
var original = document.getElementById('section');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "section" + ++i;
// or clone.id = ""; if the divs don't need an ID
original.parentNode.appendChild(clone);
}
</script>
</body>
</html>
Below are the links from where I had the information to do what I did.
http://ckeditor.com/ckeditor_4.3_beta/samples/replacebyclass.html
How can i duplicate a div onclick with javascript?
Try your javascript as this
<script type="text/javascript">
var i = 1;
function duplicate() {
var clone = '<div class = "section_base" id = "section">Section Icon: <input type="file" id="icon" accept="image/*"> <br> Section Title: <input type = "text" id = "section_title" > <br> Section Text: <textarea id = "section_text'+i+'"> Enter you text here. </textarea>Section Score: <input type = "text" id = "section_score"> </div>';
var div = document.getElementById('sections');
var newdiv = document.createElement('div');
newdiv.innerHTML = clone;
div.appendChild(newdiv);
CKEDITOR.replace('section_text'+i);
i++;
}
</script>
Seems like CKEditor got some issues with binding the controls for dynamically added elements. You can refer to this problem which contains discussion from people facing similar issues and their solutions.
CKEDITOR inline on dynamic created element ( droppable/sortable )
Also found this jsfiddle demo, which binds CKEditor inline
CKEDITOR.inline( el.get( 0 ) );
The guy has also written a nice tutorial on how to add inline ckeditor on dynamically created elements
See if it helps...
Related
This solution below works for adding and removing list items. I had to implement Math.random() in order to set a unique id for each element. I was thinking in the professional world this definitely wouldn't cut it considering the chance of a repeating ID.
Wanted to know what would be a more suitable implementation? Any feedback welcome!
Thanks!
HTML
<html>
<head>
<body>
<p id = 'listTitle'> Your List </p>
<form onsubmit = "return false">
<input id = 'inputBar' type = "text" placeholder = "Enter Item"></input>
<input type = "submit" onclick = "getName()"></input>
<input type = "button" value = "Remove" </input>
</form>
<ol id = 'demo'>
</ol>
</body>
</head>
</html>
JS
function getName() {
var input = document.getElementById('inputBar').value
var list = document.getElementById('demo')
var entry = document.createElement('li')
entry.setAttribute("id", Math.floor(Math.random()* (100 - 1) + 1 ))
console.log(entry.id)
entry.setAttribute("onclick", "removeName(this.id)")
entry.appendChild(document.createTextNode(input))
list.appendChild(entry)
}
function removeName(removeID) {
var listItem = document.getElementById(removeID)
listItem.remove()
}
There's no need for dynamic IDs. When appending the new element, just attach a listener that calls entry.remove() when clicked. You can also assign to the textContent instead of using the unnecessarily verbose createTextNode / appendChild.
function getName() {
const inputValue = document.getElementById('inputBar').value;
const li = document.getElementById('demo').appendChild(document.createElement('li'));
li.onclick = () => li.remove();
li.textContent = inputValue;
}
<p id='listTitle'> Your List </p>
<form onsubmit="return false">
<input id='inputBar' type="text" placeholder="Enter Item"></input>
<input type="submit" onclick="getName()"></input>
<input type="button" value="Remove" </input>
</form>
<ol id='demo'>
</ol>
I have a page where I have two columns one is Attribute name and Attribute Value. I have a button named Add Attribute Value which adds text boxes to the screen so that an Attribute Name can have multiple Attribute values. I have added the text boxes with a variable i in javascript.
I need to use the "i" variable and also access the text in the textbox using the name "'mytext'+i".
The code written is below:
<html>
<head><title>Add Attributes</title></head>
<body>
<script language="javascript">
var i = 1;
function changeIt()
{
my_div.innerHTML = my_div.innerHTML +"<br> <input type='text' name='mytext'+ i><br>"
i++;
}
</script>
<form action= "" method = "POST">
<h1 align = "center"><u>Attribute Management</u></h1>
Attribute Name Attribute Value <br>
<br><input type="text" name="attname" >
<input type="text" name="attvalue">
<input type="button" value="Add Attribute Value" onClick="changeIt()">
<div id="my_div"></div>
<b> </b><br>
<br><br><input type="submit" name = "submit" value = "Add Attribute" >
<input type="submit" name = "submit1" value = "User Application" >
</form>
</body>
</html>
<?php
if(isset($_POST['submit'])){
$att_name = $_POST['attname'];
$query_string1 = "ALTER TABLE users ADD $att_name varchar(20)";
$query_string2 = "ALTER TABLE attributes ADD $att_name varchar(20)";
$part_string = "(";
for($x = 0;$x<= i;$x++){
$att_value= $_POST['mytext'.$x];
if($x = 0){
$part_string = $part_string.$att_value;
}
else{
$part_string = ",".$part_string.$att_value;
}
}
$part_string= $part_string.")";
$query_string3 = "INSERT INTO attributes ('$att_name') VALUES '$part_string'";
$connect = mysqli_connect("localhost","root", "","nets") or die("Couldn't connect to database");
/*$query1 = mysqli_query($connect,$query_string1);
$query2 = mysqli_query($connect,$query_string2);
$query3 = mysqli_query($connect,$query_string3);*/
}
if(isset($_POST['submit1'])){
header('Location: RegisteredUsers.php');
}
?>
Get an error of "i" is not defined and "Undefined index: mytext0". I have to collect all the attribute values and fire a query with all the values from the text box together.
Please suggest.
The error of "Undefined index: mytext0" is come due to no such input field is defined, because you have initialised the i with 1 so, just make it 0.
And also you have a issue in the html, which you are adding, just change your script block with following :
var i = 1;
function changeIt()
{
my_div.innerHTML = my_div.innerHTML +"<br> <input type='text' name='mytext"+ i+"'><br>"
i++;
}
<html>
<head><title>Add Attributes</title></head>
<body>
<form action= "" method = "POST">The error of "Undefined index: mytext0" is come due to no such input field is defined, because you have initialised the i with 1 so, just make it 0.
And also you have a issue in the html, which you are adding, just change your script block with following :
<h1 align = "center"><u>Attribute Management</u></h1>
Attribute Name Attribute Value <br>
<br><input type="text" name="attname" >
<input type="text" name="attvalue">
<input type="button" value="Add Attribute Value" onClick="changeIt()">
<div id="my_div"></div>
<b> </b><br>
<br><br><input type="submit" name = "submit" value = "Add Attribute" >
<input type="submit" name = "submit1" value = "User Application" >
</form>
</body>
</html>
I'm trying to create an online to do list for users and I want it to function so that when you enter a task and click the 'JotIT' button the task is appended.
So far the function to append works but the text is not visible for some reason even though when I inspect it, the text shows up in the HTML.
<script>
var welcome = 'Welcome To JotIT';
var jotItem = function()
{
//Create & Get the necessary elements
var item = document.createElement('input'),
space = document.createElement('br'),
form = document.getElementById("listing"),
frag = document.createDocumentFragment(),
textVal = document.getElementById("input-jot");
//Set Attributes to list item
item.setAttribute('type', 'checkbox');
item.setAttribute('name', 'jot-list');
//If there is no input in the textbox then create an alert popup
if(textVal.value === "")
alert("Please insert a value");
else {
item.innerHTML = textVal.value;
frag.appendChild(item);
frag.appendChild(space);
form.appendChild(frag);
textVal.value = "";
}
}
</script>
</head>
<body>
<h1 id="head">JotIT</h1><br>
<p> <script type="text/javascript">document.write(welcome);</script></p>
<input type="form" id= "input-jot">
<button class = 'btn-info' id="jot-down" onclick=jotItem();>JotIt!</button>
<!-- TODO: Add form submit tag instead of ul tag -->
<!-- TODO: Align the list items -->
<form id = "listing" method="get">
<input type="checkbox" name="me"> Start </input>
</form>
</body>
You Have to insert a label. Inputs should be self closing / empty elements. In particular an input of type checkbox won't correctly display a label. Use the label element for this purpose instead.
var welcome = 'Welcome To JotIT';
var jotItem = function() {
//Create & Get the necessary elements
var item = document.createElement('input'),
label = document.createElement('label'),
space = document.createElement('br'),
form = document.getElementById("listing"),
frag = document.createDocumentFragment(),
textVal = document.getElementById("input-jot");
//Set Attributes to list item
item.setAttribute('type', 'checkbox');
item.setAttribute('name', 'jot-list');
//If there is no input in the textbox then create an alert popup
if (textVal.value === "")
alert("Please insert a value");
else {
label.innerText = textVal.value;
frag.appendChild(label); // here goes the label
frag.appendChild(item);
frag.appendChild(space);
form.appendChild(frag);
textVal.value = "";
}
}
</head>
<body>
<h1 id="head">JotIT</h1>
<br>
<input type="form" id="input-jot">
<button class='btn-info' id="jot-down" onclick=jotItem();>JotIt!</button>
<!-- TODO: Add form submit tag instead of ul tag -->
<!-- TODO: Align the list items -->
<form id="listing" method="get">
<label>Start</label>
<input type="checkbox" name="me" />
</form>
</body>
This has to do with the fact that you're adding the label to the input incorrectly. Use the below HTML syntax and it will resolve your issue:
<label><input type="checkbox" name="jot-list" />The Text</label>
I'm trying to create an HTML form which takes the text from multiple textboxes (in this case, 3) and adds the content of each to a list in a separate div, as well as create a new object "employee", all via the click of a button. My goal is to imitate adding employees to a database, using an employee id, first name, and last name as variables. I am looking to accomplish this using pure javascript.
What I have so far is:
<form>
ID Number:
<br>
<input type="text" id="idNumber">
<br>First name:
<br>
<input type="text" id="firstName">
<br>Last name:
<br>
<input type="text" id="lastName">
</form>
<br>
<button type="submit" onclick="myFunction(list)">Submit</button>
<div id="container">
<ul id="list"></ul>
</div>
In a separate JavaScript file:
function myFunction(list){
var text = document.getElementById("idNumber","fName","lName").value;
var li = "<li>" + text + "</li>";
document.getElementById("list").replaceChild(li);
}
When I debug my code it seems to be setting the values fine, but I receive no actual output of my list.
None of the input elements you selected had a class name. You can also do this with document.getElementById. Just add ids to all your form elements.
Your code should look something like this.
function myFunction(list){
var text = "";
var inputs = document.querySelectorAll("input[type=text]");
for (var i = 0; i < inputs.length; i++) {
text += inputs[i].value;
}
var li = document.createElement("li");
var node = document.createTextNode(text);
li.appendChild(node);
document.getElementById("list").appendChild(li);
}
http://jsfiddle.net/nb5h4o7o/3/
Your list wasn't being appended to because you weren't actually creating the elements. replaceChild should have been appendChild and you should have created a list element with document.createElement.
Your code is full of problems, look at the document.getElementById and Node.replaceChild docs.
I've created a version for you that we get all the input elements of your form (using querySelectorAll), and then we use Array.prototype.map to turn them into "<li>[value]</li>", and then Array.prototype.join to turn that array into a single string.
Then, we get that string and set the #list.innerHTML property.
document.querySelector('button').addEventListener('click', function(e) {
var form = document.querySelector('form'),
list = document.getElementById('list');
list.innerHTML = [].map.call(form.querySelectorAll('input'), function(el) {
return '<li>' + el.value + '</li>';
}).join('');
});
<form>
ID Number:
<br>
<input type="text" id="idNumber">
<br>First name:
<br>
<input type="text" id="firstName">
<br>Last name:
<br>
<input type="text" id="lastName">
</form>
<br>
<button type="submit">Submit</button>
<div id="container">
<ul id="list"></ul>
</div>
I'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');