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>")
});
Related
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';
}
});
<html>
<title>
</title>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
function AddingTextBoxes(){
var NumOfText=$("#NumOfTextBoxes").val();
$('#NewlyCreatedSelectBoxes').empty();
for(i=1; i<=NumOfText; i++){
var ipBoxName="MyInput"+i;
var txtBoxAutoNumbering="<input type='text' name='textbx[]' style='width:50px;' value="+i+" /> ";
$('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option> <option>Text_Area</option><option>Radio_Button</option></select> ";
$('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);
var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()' id='ABC'>Click for child selections</button><br><br>";
$('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);
}
return false;
/*for(var i=0; i<NumOfText; i++){
var x=1;
NewlyCreatedSelectBoxes.innerHTML=NewlyCreatedSelectBoxes.innerHTML+"<br>AAA "+x+"<input type='text' name='mytext'/>";
x++;
}
return false;*/
}
function ChildTxtBoxes(){
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
}
</script>
</head>
<body>
<form >
<div id="PHPForms" >
<!--Designing PHP forms dynamically-->
<label>Form Heading</label><input type="text"/><br><br>
<label>Number of text boxes would needed</label><input id="NumOfTextBoxes" type="text"/>
<button id="A" onclick=" return AddingTextBoxes()">Click</button>
<div id="NewlyCreatedSelectBoxes" name="Texty">
</div>
</div>
</form>
</body>
</html>
In this code once I clicked button related to "var Select_For_Multiple_Choices" variable, I shold display a text-box right below the clicked button.. Likewise whenever the button is the text-box should be shown below that button... Bt in my code though it creates a text-box it shows aftr all the text boxes.... Hw I can do this?
You can use .after() to insert after the found element. So something like this:
$(button).after(content);
You can get your code to work as expected by passing the execution context (this) to the function ChildTxtBoxes like: ChildTxtBoxes(this). You have to modify your function to:
function ChildTxtBoxes(button) {
var txtBox = "<input type='text' name='textbx[]'/>"
$(button).after(txtBox);
}
notice the use of the execution context(this) to identify the button that was clicked and the use of .after() to insert a textbox after the button as Vlad suggested.
To be honest, I don't fully understand the keyword this to explain how and why it works. You can read up more on JavaScript “this” keyword here
Here is a working demo
<html>
<head>
<title></title>
<script >
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' />"+
'<select id="client_category_name_'+fields+'" name="client_category[]"><option value="">Select Category</option><option value="1">internal</option><option value="2">external</option><option value="3">others</option></select>';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput();" name="add" value="Add More" />
</form>
<div id="text">
</div>
</body>
</html>
Question: When I click on add more first and type something and click on add more again the one i entered before is removed. What is the reason behind this. And how to fix it?
Thanks In advance
.innerHtml replaces the content which you place next..so use append like
var t = document.createElement("div"),
document.getElementById("theBlah").appendChild(t);
Problem is that typing something in the input does not change its value parameter but sets its value property (know the difference), e.g. it changes this.value instead of this.attributes.value, which results in innerHTML not actually containing the typed value.
So since innerHTML += 'string' ist just like setting innerHTML = innerHTML + 'string', it resets the input value to its attribute, which is empty.
I'd really recommend to use jQuery here, because with pure JS you'd have to first create the input and select element, then apply all needed attributes with multiple .setAttribute() calls.
I used Jquery and solved it this way:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#addButton").click(function () {
if(counter>6){
alert("Not allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.html(Added my text box and select tag here);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<input type='button' value='Add More' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
</body>
</html>
I am using a plugin called minicolors for jquery link. I am trying to appened a color picker here (in 2 places, a div and table just for testing) with a button click, it seems though that it only works on the second button click, the first simply returning an empty input box.
<script type="text/javascript">
function addPicker() {
$(document).ready( function() {
$(".colorpick").miniColors({
change: function(hex, rgb) {
}
});
});
var picker = "<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />";
$("#datatable > tbody").append("<tr><td>"+picker+"</td></tr>");
$("#testdiv").append(picker);
}
</script>
<div id="testdiv"></div>
<button onclick =" addPicker();">Button</button>
No Idea why this is not working.
Try :
$(document).ready( function() {
$('.addButton').click(function(){
$("<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />").appendTo("#datatable tbody").wrap('<tr><td></td></tr>');
$('.colorpick').miniColors();
});
});
Live demo : http://jsfiddle.net/hCVpX/12/
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