how to print jquery value in html - javascript

This is my code in jQuery, it's working fine when its alert popup, but i want to print this in html body i tried below but not working
// Do What You Want With Result .......... :)
$("#printermodel").change(function() {
//'you select
Model = ' + $('#manufacturer').val() + 'type=' + $('#printertype').val() + 'And Model=' + $('#printermodel').val()
alert('you select Model = ' + $('#manufacturer option:selected').text() + ' ,type= ' + $('#printertype option:selected').text() + ' And Model = ' + $('#printermodel option:selected').text());
});
});
<div id="manufacturer"></div>

You should use text to insert text inside div:
$('#manufacturer').text($('#manufacturer option:selected').text());
Docs: http://api.jquery.com/text/
If you want to add HTML inside div, you can use html instead of text

$('#manufacturer').html(('you select Model = '+
$('#manufacturer option:selected').text()+' ,type= '+
$('#printertype option:selected').text()+' And Model = '+
$('#printermodel option:selected').text());

If you want to take more sophisticated approach I would recommend you to use templates.
One of many options would be to use official jquery-tmpl plugin.
You need to include jquery and http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js plugin to your site and then you can do for example:
Html:
<div id="target"></div>
Javascript:
$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );
You can adjust it to your needs and for eaxmple read the template (first parameter of tmpl) from some file
See this jsfiddle

Related

how to add html in dynamically created div

I create a div from a DB with the below code
<div id="' + row.flatno + '"></div>
How can I select this div in order to add html code?? I use this
$('input').keyup(function(){
$(this).html("SomeText: <strong>" + diff + "</strong>");
});
but nothing happens
As #xzoert mentioned with this you refer to input.
$('input').keyup(function(){
$('#'+row.flatno).html("SomeText: <strong>" + diff + "</strong>");
});
The part
$('#'+row.flatno)should query id that you are looking for.

HTML Source with JQuery or JavaScript after edit

Im using this to capture the HTML source for a single html page.
It works good except for one thing.
After entering values into my html page, when I do the capture it only captures the page without the edited values.
Any Ideas please.
var getDocTypeAsString = function () {
var node = document.doctype;
return node ? "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>\n' : '';
};
function getPageHTML() {
// alert( "<html>" + $("html").html() + "</html>" );
console.log(getDocTypeAsString() + document.documentElement.outerHTML);
}
and the call from the button
<div class="no-print">
<div class="buttonBar">
<input type="button" class="button" value="Print" onClick="window.print()">
<input type="button" class="button" value="Save" onClick="getPageHTML()">
</div>
</div>
The editing values will come from similar fields like this
So I would like to capture the edited 'PastMedicalHistory' as-well
<div class='row'>
<div class='cell100'>
<div class='table'>
<div class='cell100 content'>
<textarea id='PMH' class='basicTextArea PMHText' name="PastMedicalHistory"></textarea>
</div>
</div>
</div>
</div>
What are you trying to achieve?
The statement document.documentElement.outerHTML will take the HTML itself as rendered.
The values of the input elements are filled in afterwards, so not visible via outerHTML.
You could run through the elements, inspect them and populate the DOM.
What would be for the best, though is to describe what are you trying to achieve and put the full code example on codepen or similar.
You can't do that, this easy way. You're getting the same as looking "source code" from your browser.
Use jQuery or JS to parse document input values.
Then reinject it in your getDocTypeAsString
Found something that seems to work fine, but Im not that great of an expert to judge this on possible limitations
keep a watch over items like this
$( document ).ready(function() {
var isDirty = false;
$("textarea").on("change", function() {
isDirty = (this.defaultValue !== this.value);
if (isDirty)
this.defaultValue = this.value;
});
$("input").on("change", function() {
isDirty = (this.defaultValue !== this.value);
if (isDirty)
this.defaultValue = this.value;
});
});
call for the source of the new html like this
function getPageHTML() {
console.log( "<html>" + $("html").html() + "</html>");
}

Add new filed and clone in bootstrap 3 modal?

I am using some append new data in form, that does not exists
HTML
Phone number :
JS
$(document).ready(function(){
var phone_number_form_index=0;
$("#add_phone_number").click(function(){
phone_number_form_index++;
$(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
$("#phone_number_form" + phone_number_form_index).css("display","inline");
$("#phone_number_form" + phone_number_form_index + " :input").each(function(){
$(this).attr("name",$(this).attr("name") + phone_number_form_index);
$(this).attr("id",$(this).attr("id") + phone_number_form_index);
});
$("#remove_phone_number" + phone_number_form_index).click(function(){
$(this).closest("div").remove();
});
});
});
And here is working fiddle
http://jsfiddle.net/wc28f/3/
I am trying to add to boostrap 3 modal, but i have no luck, here is that same code in bootstrap 3 modal
http://www.bootply.com/J9cv7EZv6K
Does can be extended this exmaple like select, but what i need post array of that select values
http://www.bootply.com/S9WGrK0WhL
Here is my example, what i need is to
phone_number1 becomes phone_number[1],
and qty1 to becomes qty[1]
Working demo
I have removed line and it worked
$("#phone_number_form" + phone_number_form_index).css("display","inline");
Used this:
$("#phone_number_form" + phone_number_form_index).removeClass("hidden");
You want phone_number[1] try this:
$(this).attr("name",$(this).attr("name") +"["+ phone_number_form_index+"]");
Updated DEMO

append text with html formatting to textarea with jQuery

How could i append some text to html textarea with help of jQuery library, so, that html tag's are not as text, but as formatted html tag's (see result of div tagging, not text ). now i have such js:
...
var currentVal = $('#article_comment_text').val();
$('#article_comment_text').val(currentVal + '<div class="quote-heading">' + comment_author + " " + comment_date + '</div>' + '<div class="comment-quoted">' + comment_text + '</div>');
...
is it real? and how could i do, that text, which append to textarea is styled, not just views as text etc?
Edit:
You cannot render HTML inside textarea, you need to use contenteditable div:
<div class="textarea" contenteditable="true">This is a test</div>
Then you can do something like:
$('.textarea').html(function() {
return '<strong>' + $(this).html() + '</strong>';
});
Fiddle Demo
If i get your question right ?
So,
There is noway to insert HTML inside <textarea></textarea> so it isn't formated !
You have to make a clone of textarea,with a property of contenteditable;

Parsing in jquery

I am trying to parse what I am getting JQuery to show data ! I am consuming data from an API , but I am getting an error .
Can I do a Loop on JQuery this way ?
$.each(data.results, function (i, item) { // on this line
var Name = item.name;
var Date = item.auditInfo.dateCreated;
var Creator = item.creator.display;
$htmlstring.append($('<li/>').append('<p>Test</p>'));
$htmlstring.append("<div class='title'> Info : "
Name + Date + Creator "</div>");
}); $('#afficher').html($htmlstring);
I am sharing code on JSFiddle (Check drug_omrsRestCall function ) :
http://jsfiddle.net/zTXyq/23/
As #adeneo commented on the question, the concept is right but you should be careful about what element you are appending HTML content to.
With this snippet of your code:
$htmlstring.append("<div class='title'> Info : "
Name + Date + Creator "</div>");
(BTW, it is missing two plus signs for a correct concatenation, I hope that's not the error you are getting).
you append a DIV to the UL and you actually want to append it to the LI, for example:
$('<li />').append("<p>Test</p>")
.append("<div class='title'> Info : " + Name + Date + Creator + "</div>")
.appendTo($htmlstring);
Check this fiddle for a working solution of your issue:
http://jsfiddle.net/d3dcj/2/

Categories