How do I allow bootbox to accept multiple lines of code? - javascript

This code works:
<script type="text/javascript">
bootbox.alert("Hello world!");
</script>
This code doesn't work:
<script type="text/javascript">
bootbox.alert("Hello
world!");
</script>
If you're gonna ask why I need it like the second one, it's because that value will be based off of a textarea which has multiple lines of code, I somehow need to make bootbox run with multiple lines of code.
The second one can be a product of a textarea with Hello as the first line and world! as the second line.

Convert your newlines \n to <br> using a simple regex:
pseudo code:
textAreaObjectText.replace(/\n/g, "<br />");
The g flag is necessary here to change all occurrences. We're using String.prototype.replace to send the edited text from the textarea to the alert function.
Working example:
document.querySelector("button").addEventListener("click", function(){
bootbox.alert(document.querySelector("textArea").value.replace(/\n/g, "<br />"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<textarea>
Hello
World
We're testing
this
alert
</textarea>
<button>open alert</button>

had the same issue as you. This is the way I solved it
#php code
$comment = json_encode($comment);
#js code
var comment = <?= $comment ?>;
$('#clickSomething').click(function(e){
e.preventDefault();
bootbox.dialog({
title: '<span class="text-success">Bootbox Title</span>',
message: '<div class="form-group"> ' +
'<label class="control-label" for="project-description">Comment</label> ' +
'<textarea id="comment" class="form-control" maxlength="1024" rows="8" placeholder="Optional Comment">' + comment + '</textarea> ' +
'</div>',

just put your message with
bootbox.alert({
title: "Guardado",
message: ` Something
<br>
else
`,
callback: function(){ window.location.href = 'lista/mensaje';
}
});

Related

How to append script tag/JS to textarea as text (non executeable)

How would I go about printing out html tags / javascript as text in a textarea? (non-executeable)
I tried appending the JS/script tags, but that doesn't seem to append as text (= doesn't show anything in the textarea)
Jquery
$('#textarea').append('' +
'<script type="text/javascript">' +
'adf.Params.PageName = encodeURIComponent("[hello]");' +
'adf.Params.Divider = encodeURIComponent("|");' +
'</script>' +
'');
HTML
<textarea rows="12" cols="50" name="textarea" id="textarea"></textarea>
JSFiddle here
It appears to be having an issue related to the script tags. One option is to encode the < character on the open and close script tags so that they will not be evaluated as actual tags.
var text = '<script type="text/javascript">\n\t' +
'adf.Params.PageName = encodeURIComponent("[hello]");\n\t' +
'adf.Params.Divider = encodeURIComponent("|");\n' +
'</script>';
$('#textarea').append(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea rows="12" cols="50" name="textarea" id="textarea"></textarea>

keyup function not working

I am making a character counter in js but keyup event is not working ???
$(document).ready(function() {
function countingCharacter(element, maxCount) {
var countLength = $('#' + element).val().length();
alert(countLength);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea onkeyup="countingCharacter("storyOutline",100)" onkeypress="countingCharacter("storyOutline",100);" onkeydown="countingCharacter("storyOutline",100)" id="storyOutline" rows="5" class="form-control" name="labinput7" placeholder="Story Outline" required></textarea>
To avoid any issues related to the functions scope and keep JS code separated from HTML, I'd go with following event binding:
$('#storyOutline').on('keyUp', function() {
var length = $(this).val().length();
alert(length);
});
onkeyup="countingCharacter("storyOutline",100)"
"storyOutline" will close and open the quotes in onkeyup
You could use single quotes inside the double quotes:
onkeyup="countingCharacter('storyOutline',100)"
You can get textarea length using event.currentTarget.textLength value
$(document).on("keyup", "#storyOutline", function (e) {
console.log(e.currentTarget.textLength);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<textarea id="storyOutline" rows="5" class="form-control" name="labinput7" placeholder="Story Outline" required></textarea>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
alert("your pressed the key");
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
</body>
</html>
when you keyup on the text field, you'll find an alert message that you have keyed.
Use single quotes to add arguments to the inline JavaScript functions, so:
<textarea onkeyup="countingCharacter('storyOutline')" ... ></textarea>
Instead of
<textarea onkeyup="countingCharacter("storyOutline")" ...></textarea>
But you don't actually need those parameters (you can keep maxCount inside the function's scope). Then access the target (input box element) with event.target. Select its input value and its length.
Here's a working code:
function countingCharacter(maxCount) {
console.log($(event.target).val().length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea onkeyup="countingCharacter(100)" onkeypress="countingCharacter(100);" onkeydown="countingCharacter(100)" id="storyOutline" rows="5" class="form-control" name="labinput7" placeholder="Story Outline"
required></textarea>
You shouldn't use alert for debugging, use console.log instead.

pass variable from a dom element to onclick

I am trying to add a text from a DOM element to an onclick function. So the text will be a parameter
I tried
$("body").append(
"<input type='submit' value='Submit Answers' onclick=displayImages(" +
$('#hidden_number').text() + ");'>")
but this gives me $('#hidden_number').text() as undefined , but if I run $('#hidden_number').text() from the console i get a value.
Is it not possible to pass a parameter this way?
More code
The html page looks like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="core/js/self_control.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").append( "<input type='submit' value='Submit Answers' onclick=displayImages( $('#hidden_number').text());'>");
});
</script>
<label for="subID">Subject ID:</label>
<input type="text" id="subID" name="subID"/>
<br><br>
<div> Please enter your subject </div>
<br>
<body>
</body>
the file self_control.js has the displayImages function
function displayImages(number){
$('body').toggleClass('blackBody'); // set the color of the expr background to black
console.log(number)
}
the way that I load the page and the number to the hidden array is:
function loadQuestionForm(number){
$.get("core/questionForm0.html", function(data) {
$("body").html(data);
var next_img = number + 1 ;
console.log(next_img);
$("body").append("<div id='hide_nubmer' style='display: none;'>"+ next_img +"</div>")
});
You can do it like this:
$("body").append("<input type='submit' value='Submit Answers' onclick=displayImages(" + $('#hidden_number').text() + ");>")
function displayImages(arg) {
console.log(arg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden_number">5</div>
i think it looks like just a typo?
$("body").append("<div id='hide_nubmer' style='display: none;'>"+ next_img +"</div>")
should have the id be hidden_number?
function loadQuestionForm(number){
$.get("core/questionForm0.html", function(data) {
$("body").html(data);
var next_img = number + 1 ;
console.log(next_img);
$("body").append("<div id='hidden_number' style='display: none;'>"+ next_img +"</div>")
});

how do i add everying in each line between " " and put , at the end of each line using javascript

okej ill try to explain. I have like 1000 personal numbers in exel. I need to put them in textarea each in new line and then with javascript i need to put each number (line) between "" and , at the end of the line. I need this exact format so i can procede with my work
<html>
<head>
</head>
<body>
teskt1
<input style="height:200px; type="text" id="1"></input>
<p>
<input type="button"></input>
<p>
tekst2
<input style="height:200px; type="text" id="2"></input>
</body>
</body>
This is some html code for test but i have no idea how to do this.
If you manage to somehow put a newline inside a textbox, then try this
var value = document.getElementById("1").value;
var output = value.split("\n").map(function(val){return "\"" + val + "\""}).join(",")
Demo

Validation using javascript or jquery

How to created textbox dynamically , when i click add button.
after i put the input field in the text box.
how to validate the dynamically created textbox using javascript or jquery.
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);
}
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement();" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
after when i click submit button all textbox validation must be done....
Try to copy this and test. And let's tell me that is as you need.
<!DOCTYPE HTML>
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox += 1
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "' name='" + intTextBox + "' />";
contentID.appendChild(newTBDiv);
}
function removeElement(){
var element = document.getElementById("strText"+intTextBox);
console.log(element);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
intTextBox -=1;
}
</script>
</head><body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement()" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
See more at My jsFiddle
Note : working with FireFox & Chrome
create textbox:
var textbox = $('<input></input>');
textbox.setAttr(type, 'text');
add to container:
$('#button').onclick(function() {
$('#container').append(textbox);
});
validate:
$('#submit').onclick(function() {
if(!$('#textbox').val()) {
alert('input empty');
}
});
You could use this jQuery Validation Plugin. The demo shows that is can validate textboxes.
that's alot of questions rolled into one. You can create and insert elements in jquery with code like the following:
$('<input />', {type : 'text'}).appendTo($(body));
As far as validation is concerned, it would depend on when you want to do it. on keypress, on submit, on blur, etc. If you want a blanket validate for all inputs you'll need to delegate it to some parent element since these textboxes are created after the page is loaded:
$('body').delegate('input','keyup', function(){
/*Do stuff*/
});
But you could also attach the validation when you create the element if it needs to be specific to the field you create.
$('<input />', {type : 'text'}).bind('keyup', function(){
/*Do stuff*/
}).appendTo($(body));
I hope that steers you in the right direction. Good luck

Categories