I am working on a todo list where you type a task in a box and click the add button to enter the item into the list. However, nothing is getting added to my list, and I can't figure out what is wrong with my code.
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body background="css/fzm-notebook.texture-25.jpg" no-repeat;>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>
</body>
</html>
You can't have multiline strings in JS. You seem to know that, but you forgot to concatenate them with the plus sign. This is the problematic part:
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
Just add a + to the end of each line except the last one.
Other than that, your code looks fine, let's try it:
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">' +
'<div>' +
'<input type="checkbox" class="check_todo" name="check_todo"/>' +
'</div>' +
'<div class="todo_description">' +
todoDescription +
'</div>' +
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>
I got it to work...
Here is your code modified :
<script>
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
</script>
I just deleted all quote on your html inside $('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');
And add "+" around "todoDescription"
Hope this will help :)
EDIT
Forget to mention that i've deleted your action in your form...
<form id="todo_form" method="POST">
Check your console, you have forgotten all of the + needed to concactenate your html string:
$(document).ready(function() {
$('#add_todo').click(function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">'+
'<div>'+
'<input type="checkbox" class="check_todo" name="check_todo"/>'+
'</div>'+
'<div class="todo_description">'+
todoDescription +'</div>'+
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click(function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description" />
</form>
<input type="button" id="add_todo" value="Add" />
</div>
</div>
<div class="todo_list">
</div>
As others have mentioned, you didn't concatenate the strings correctly.
Multiline strings and string interpolation can be used with template strings, introduced in ES6.
You could format the string in the following way using a template string :
`<div class="todo">
<div>
<input type="checkbox" class="check_todo" name="check_todo"/>
</div>
<div class="todo_description">
${todoDescription}
</div>
</div>`
Related
I don't understand why all Functions are not working. Normally if you click on the button "+ Loc de munca" needs to appear input and then if you click further on the "+ Loc de munca" need to clone all input. Also if you click on the "Sterge" need everything to delete. Here is the code:
var itm = document.getElementById("myList4").getElementsByTagName("div")[0];
function appearafter2() {
document.getElementById("buttonappear2").style.display = "block";
document.getElementById("button2").style.display = "block";
document.getElementById("hinzufuegen2").style.display = "none";
}
function myFunction2() {
var itm = document.getElementById("myList4").getElementsByTagName("div")[0];
var cln = itm.cloneNode(true);
document.getElementById("myList3").appendChild(cln);
}
function deleteFunction2() {
var list3 = document.getElementById("myList3");
var divs = Array.from(list3.getElementsByTagName("div"));
// If the number of divs is 4, it means we're removing the last
// cloned div, hide the delete button.
if (divs.length === 4) {
document.getElementById("button2").style.display = "none";
}
var lastDivToDelete2 = divs[divs.length - 1];
list3.removeChild(lastDivToDelete2);
}
function allFunction2() {
myFunction2();
appearafter2();
}
#button2 {
display: none;
}
#buttonappear2 {
display: none;
}
.input-data2 {
width: 49%;
}
.label-data2 {
width: 50%;
}
#myList3 {
display: none;
}
#label-job-input-inline {
display: inlin-block;
}
.label-job-input {
display: block;
}
<div id="hinzufuegen2" onclick="allFunction2()">
+ Loc de munca
</div>
<div id="myList3">
<div id="button2" onclick="deleteFunction2()">Șterge</div>
<div id="myList4">
<div id="addingNewJob">
<label class="label-job-input" for="job-input-1">Numele firmei</label>
<select size="1" type="text" id="job-input-1" /><option value="scoala_generala">școala generală</option>
<option value="scoala">școală profesională</option>
<option value="lic">liceu</option>
<option value="fac">facultate</option></select>
<label class="label-job-input" for="job-input-2">Postul ocupat
</label>
<input size="1" type="text" id="job-input-3" /><br />
<label class="label-data2" for="job-input-3">din data</label><label class="label-data2" for="job-input-4">până la data</label><br />
<input type="number" style="width: 48%" />
<input type="number" style="width: 50%; margin-left: 6px" />
</div>
</div>
</div>
<div onclick="allFunction2()" id="buttonappear2">
+ Loc de munca
</div>
Hello, I don't understand why all Functions are not working. Normally if you click on the button "+ Loc de munca" needs to appear input and then if you click further on the "+ Loc de munca" need to clone all input. Also if you click on the "Sterge" need everything to delete. Here is the code:
Updated the answer, check if this is what you are trying to achieve.
function myFunction2() {
var cln = '<div class="list-item">'+
'<div id="addingNewJob">'+
'<label class="label-job-input" for="job-input-1">Numele firmei</label>'+
'<select size="1" type="text" id="job-input-1" /></div>';
document.getElementById("myList3").innerHTML+=cln;
document.getElementById("buttonappear2").classList.remove('hide');
document.getElementById("button2").classList.remove('hide');
document.getElementById("hinzufuegen2").classList.add('hide');
}
function deleteFunction2() {
var divs = Array.from(document.querySelectorAll(".list-item"));
if(divs.length>0){
var lastDivToDelete2 = divs[divs.length - 1];
document.getElementById("myList3").removeChild(lastDivToDelete2);
}
if(divs.length==1){
document.getElementById("buttonappear2").classList.add('hide');
document.getElementById("button2").classList.add('hide');
document.getElementById("hinzufuegen2").classList.remove('hide');
}
}
.hide{
display: none;
}
.input-data2 {
width: 49%;
}
.label-data2 {
width: 50%;
}
#label-job-input-inline {
display: inlin-block;
}
.label-job-input {
display: block;
}
<div id="hinzufuegen2" onclick="myFunction2()">+ Loc de munca</div>
<div id="myList3">
<div id="button2" class="hide" onclick="deleteFunction2()">Șterge</div>
</div>
școala generală școală profesională liceu facultate
<label class="label-job-input" for="job-input-2">Postul ocupat</label>
<form>
<input size="1" type="text" id="job-input-3" />
<br />
<label class="label-data2" for="job-input-3">din data</label>
<label class="label-data2" for="job-input-4">până la data</label>
<br />
<input type="number" style="width: 48%;" />
<input type="number" style="width: 50%; margin-left: 6px;" />
</form>
<div onclick="myFunction2()" class="hide" id="buttonappear2">+ Loc de munca</div>
I'm building a user-submission system where a user can input data and an XML will be exported (which can be read by a different software down the line) but I'm coming across a problem where when I replicate the form for the user to input info, the XML is only taking information from the first.
Any suggestions on how do this?
Personal test code:
HTML:
$(function () {
$('#SubmitButton').click(update);
});
var added = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
var adding = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
function update() {
var variables = {
'channeldescription': $('#channeldescription').val(),
'channelrecordnumber': $('#channelrecordnumber').val(),
'channelhexcolor': $('#channelhexcolor').val(),
'channelbamlink': $('#channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
var finalXML = newXml;
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
added = added + '\n' + adding;
$("body").append($("#Entries:first").clone(true));
}
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea id="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input id="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input id="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">RNA-Seq Data/BAM file Repsitory Link</label>
<input id="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly></textarea>
</div>
</div>
</html>
http://www.w3schools.com/code/tryit.asp?filename=F0TWR6VRQZ3J
Change your ids to classes use a loop to get all the entries
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
.leftmargin {
margin-left: 2%;
}
.form {
background-color: #CBE8BA;
border-radius: 25px;
margin-left: 2%;
margin-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
}
.forminput {
padding-left: 1.5%;
padding-top: 0.5%;
display: flex;
}
.button_fixed {
position: fixed;
margin-left: 2%;
bottom: 1%;
}
</script>
<script>
$(function () {
$('#SubmitButton').click(function(){
var finalXML = '';
$(".Entries").each(function(i,v) {finalXML +=update(finalXML,v)
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
});
});
});
var added = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
var adding = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
function update(finalXML,v) {
var variables = {
'channeldescription': $(v).find('.channeldescription').val(),
'channelrecordnumber': $(v).find('.channelrecordnumber').val(),
'channelhexcolor': $(v).find('.channelhexcolor').val(),
'channelbamlink': $(v).find('.channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
return newXml;
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
$("body").append($(".Entries:first").clone(true));
}
</script>
<body>
<div class="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea class="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input class="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input class="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">BAM file Repsitory Link</label>
<input class="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</div>
</html>
demo:http://www.w3schools.com/code/tryit.asp?filename=F0TXIUR1CYE4
I've been listening to the click event of label elements, but the selected input[type="radio"] does not seem to update during the event. Should I be listening to a different event or do I need to change my control flow somehow? Below is the code:
$(function() {
$('#reported label').click(function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
// this is filler but I'm actually making an xhr request here
$('.query[data-method="click"]').html(query + ' at ' + time);
});
$('#reported input[name="filter"]').on('change', function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
// this is filler but I'm actually making an xhr request here
$('.query[data-method="change"]').html(query + ' at ' + time);
});
});
input[name="filter"] {
display: none;
}
#reported label {
background-color: #ccc;
padding: 5px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
.query {
padding: 5px;
margin: 5px;
}
.query:before {
content: "on " attr(data-method) " event: ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
<input type="radio" name="filter" id="question" value="questions" checked="checked">
<label for="question">Questions</label>
<input type="radio" name="filter" id="answer" value="answers">
<label for="answer">Answers</label>
<input type="radio" name="filter" id="comment" value="comments">
<label for="comment">Comments</label>
<input type="radio" name="filter" id="user" value="users">
<label for="user">Users</label>
<input type="radio" name="filter" id="company" value="companies">
<label for="company">Companies</label>
<div class="query" data-method="click"></div>
<div class="query" data-method="change"></div>
</form>
Edit
Right now, the query reflects the previously selected input rather than the currently selected one.
My expected behavior is for the query to reflect the input that was just selected, and for the function to be called every time a label is clicked.
Second Edit
I added in #Tushar's suggestion. I don't want this because it does not update the timestamp when the same label is clicked multiple times.
I ended up using this to get the label, then used its for attribute to get the input element I needed:
$(function() {
$('#reported label').click(function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
// this is filler but I'm actually making an xhr request here
$('.query[data-method="click event"]').html(query + ' at ' + time);
});
$('#reported input[name="filter"]').on('change', function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
// this is filler but I'm actually making an xhr request here
$('.query[data-method="change event"]').html(query + ' at ' + time);
});
$('#reported label').click(function() {
var query = $('#' + $(this).attr('for')).val();
var time = (new Date()).toString();
// this is filler but I'm actually making an xhr request here
$('.query[data-method="click event with this"]').html(query + ' at ' + time);
});
});
input[name="filter"] {
display: none;
}
#reported label {
background-color: #ccc;
padding: 5px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
.query {
padding: 5px;
margin: 5px;
}
.query:before {
content: "on " attr(data-method) ": ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
<input type="radio" name="filter" id="question" value="questions" checked="checked">
<label for="question">Questions</label>
<input type="radio" name="filter" id="answer" value="answers">
<label for="answer">Answers</label>
<input type="radio" name="filter" id="comment" value="comments">
<label for="comment">Comments</label>
<input type="radio" name="filter" id="user" value="users">
<label for="user">Users</label>
<input type="radio" name="filter" id="company" value="companies">
<label for="company">Companies</label>
<div class="query" data-method="click event"></div>
<div class="query" data-method="change event"></div>
<div class="query" data-method="click event with this"></div>
</form>
I want to remove a single section in a form. I have multiple forms with the same sections. When I am in MyForm1 in Split3 and trigger the remove, only Split3 in MyForm1 should be removed not all.
Any suggestions using for example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> test</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
form {
font-family: helvetica, arial, sans-serif;
font-size: 11px;
}
form div{
margin-bottom:10px;
}
form a {
font-size: 12px;
padding: 4px 10px;
border: 1px solid #444444;
background: #555555;
color:#f7f7f7;
text-decoration:none;
vertical-align: middle;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
$('form[name="inpForm"]').submit( function () {
var $form = $(this).closest("form");
alert($(this).find('input[name="FirstName"]').val());
alert("name of form: " + $form.attr('name'))
alert("div index: " + $(this).closest("div").attr('id'));
return false;
});
$('.removeSplit_2_').click(function(){
var numItems = $('div').length;
alert("Aantal div secties: "+ numItems);
$('div').each(function(){
var indexDiv = $(this).attr('id');
alert("div index: " + indexDiv); // or simple this.id
if (numItems == indexDiv) {
alert('Do your thing and remove the div section');
//$(this).remove();
}
});
});
$('.removeSplit_3_').click(function(){
var MijnID = this.id;
alert(MijnID);
var numItems = $('div').length;
alert("Aantal div secties: "+ numItems);
$('div').each(function(){
var indexDiv = $(this).attr('id');
alert("div index: " + indexDiv); // or simple this.id
if (numItems == indexDiv) {
alert('Do your thing and remove the div section');
//$(this).remove();
}
});
});
});//]]>
</script>
</head>
<body>
<form name = "MyForm1">
<div id="Split1">MyForm1 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm1 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_" ><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_" ><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm1 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
<form name = "MyForm2">
<div id="Split1">MyForm2 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm2 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm2 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
<form name = "MyForm3">
<div id="Split1">MyForm3 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm3 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm3 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
</body>
</html>
So all you need to do is this:
$( "#Split3" ).remove();
It will grab the first id with the name "Split3" and remove it!
I hope thats what you are looking for.
JSBin: http://jsbin.com/kibipoxowa
Luca
Based on your comments, Try this:
$('.removeSplit_2_').click(function () {
var mySplit = $(this).closest('.Split_2_');
mySplit.remove();
});
$(document).on( "click", "a", function() {
$( this ).remove();
});
test this
I'm making text editor for my project , i need to use this editor for forum , i'm making simple texteditor using javascript everything working fine . Problem is that i can't use <b></b> or <i></i> <u></u> because of htmlentities. My question is that how to bold text using [b][/b] instead of <b></b> or [i][/i] instead of <i></i> , i needed this very much. I need your help guys , Thanks.
Below Is My Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#my_textarea{
width: 320px;
height: 150px;
border: thin solid #000;
color: #000;
padding: 10px;
min-height: 150px;
min-width: 320px;
max-height: 150px;
max-width: 320px;
}
#preview{
width: 320px;
height: 150px;
border: thin solid #000;
color: #000;
padding: 10px;
}
</style>
<script type="text/javascript">
function formatText(tag) {
var myTextArea = document.getElementById('my_textarea');
var myTextAreaValue = myTextArea.value;
var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
myTextArea.value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;
}
function preview() {
var textbox , view ;
textbox = document.getElementById('my_textarea');
view = document.getElementById("preview");
view.innerHTML = textbox.value
}
</script>
</head>
<body><br>
<form>
<input name="title" id="title" type="text" size="80" maxlength="80" /><br><br>
<input type="button" value="Bold" onClick="formatText ('b');" />
<input type="button" value="Italic" onClick="formatText ('i');" />
<input type="button" value="Underline" onClick="formatText ('u');" />
<input type="button" value="Unordered List" onClick="olist ('ul');" /><br><br>
<textarea name="my_textarea" id="my_textarea" style="width:300px;"></textarea><br>
<input type="submit" value="Submit" name="submit" id="submit" /><br><br>
</form>
<div id="preview"></div><br>
<button id="btn" onClick="preview();">Preview</button>
</body>
Demo : http://jsfiddle.net/aMR4M/
I'm not sure if this is what you want, but you can use [ and ] and replace them with < and > when setting the innerHtml of your preview area.
view.innerHTML = textbox.value.replace(/\[/g, '<').replace(/\]/g, '>');
See http://jsfiddle.net/aMR4M/1/