We Keep Coding

Select onChange preview svg

I have little html experience and no java experience and am trying to display an SVG image once the option is selected. Currently the code is at this, which displays a gif image:
<SELECT NAME=SIGN_NFPA onchange=\"
this.form.SIGN_PIC1.selectedIndex = 0;
var id = this.options[this.selectedIndex].value
var lnk = (id) ? 'SignNFPA/'+id+'.gif' : 'images/blank.gif';
window.document.SIGN_PIC1.src = lnk;
return true;
\">
Now we are generating files and want to replace that with this line of code
<SELECT NAME=SIGN_NFPA onchange='$("img[name=SIGN_PIC1]").prop('src',"SignNFPA?nfpa="+this.value);'>
but I keep getting a syntax error, what am I doing wrong? I know it should be a function in onchange but my coworker says you can input code directly instead. Thanks.

Your immediate problem is nested single-quotes around "src". This is causing it to see onchange='$("img[name=SIGN_PIC1]").prop(' as a complete attribute, followed by garbage.
Change those to be a compatible set of quotes:
<SELECT NAME=SIGN_NFPA onchange='$("img[name=SIGN_PIC1]").prop("src","SignNFPA?nfpa="+this.value);'>
but this would read as more "standard" like this:
<SELECT NAME="SIGN_NFPA" onchange="$('img[name=SIGN_PIC1]').prop('src','SignNFPA?nfpa='+this.value);">
But as your are using jQuery, I would strongly suggest moving to using a jQuery event handler, and appropriate data- attributes and not use a inline handler.
e.g. something like the following (not checked for errors - just a guide)
HTML:
<SELECT NAME="SIGN_NFPA" \>
jQuery
$(function(){
$('[name="SIGN_NFPA"]').change(function(e){
var $signpic1 = $('[name="SIGN_PIC1"]')
$signpic1.val(0);
var id = $(this).val();
var lnk = (id) ? 'SignNFPA/'+id+'.gif' : 'images/blank.gif';
$signpic1.attr("src", lnk);
});
});

Use quotes when adding attributes in HTML. Specially in value
<select name="SIGN_NFPA">
<!--options-->
</select>
Using event Handler in jquery
$(document).ready(function() {
$("select[name='SIGN_NFPA']").change(function() {
$('img[name=SIGN_PIC1]').prop('src', 'SignNFPA?nfpa=' + this.value);
})
});

Turned out it was because I was in quote hell, probably should've mentioned that but I'm relatively new to programming. I'm in a perl file using html thats using jquery and the $ sign was being interpreted as a scalar, causing a syntax error. Also simultaneously in quote hell

Determin Type of Input - jQuery

I am needing to determine the type of an element, possibly identified by the id property of it.
For example, in the following form...
<form id='my-form'>
<input type='text' id='title' />
<textarea id='comment'></textarea>
</form>
I would like to have a way to identify that $('#title') is a text box.
After some searches, I tried some thing like this, but it returns undefined.
$('#title').type
But some thing like this seems to work, I don't know why...
$('#my-form :input').each( function() {
alert(this.type);
} );
The above will give text and textarea I guess. But when I use the first, it gives undefined.
given an ID of an element, how can I find the type of it.
Thank in advance.

You can get the type of the element by writing
$("#target").attr('type');
or use
$("#target").get(0).tagName // return tag name like INPUT,TEXTAREA ..etc

input is a normal tag, you should use:
$('#my-form input').each( function() {
alert(this.type);
});
This will return undefined:
$('#title').type
Because $("#title") is a jQuery object and type is a property of HTML Element. You can get HTML Element from jQuery object like this:
$('#title').get(0).type

$('#title').attr('type') ;
OR
$('#title').prop('type');

You can use
if($('#title').is('input')){
alert('title in an input element')
} else if($('#title').is('textarea')){
alert('title in an textarea)
}

Alter HTML real-time with input tag

How can I can I alter (change, add, whatever) HTML/text real-time using the input tag? Very similar to the preview interface when asking a question on Stack Overflow minus the code encoding. It just has to be simple.
For example,
<input type="text" name="whatever" />
<div id="example"></div>
Whatever text is entered in the above input tag is added to #example in real-time.
Something involving innerHTML and JavaScript perhaps?

You can do this with jQuery
$('input').keyup(function(){
var a = $(this).val();
$('#example').text(a);
});
Example: http://jsfiddle.net/5TnGT/

There are many other ways to change content than described in the previous answers. Listen for all of them and update realtime. Requires jQuery supporting the newer .on() event handling for this example. Can also use .bind() or .live() with appropriate syntax.
$(document).ready(function() {
$(document).on('keyup propertychange input paste', 'input', function() {
$('#example').text($(this).val());
});
});
The second $(document) can be made more specific depending on the markup of the rest of your page.
See also: http://jsfiddle.net/DccuN/2/

Yes javascript will do this. Have a look at on key up. Then either innerHTML as you say or jQuery makes things a bit easier with .append or .html or .text
(Damn too slow)

Plain JavaScript solution (you won't need any sophisticated lib if you don't get too fancy elsewhere):
<input type="text" onkeypress="document.getElementById('example').innerHTML=this.value;" name="whatever" />
<div id="example"></div>

You can bind to the keyup event. Then set the div contents to that of the input.
http://jsfiddle.net/wYqgc/
var input = document.getElementsByTagName('input')[0];
var div = document.getElementById('example');
input.onkeyup = function() {
div.innerHTML = this.value;
};

You can start with this:
input.onkeyup = function () {
output.innerHTML = this.value;
};
Live demo: http://jsfiddle.net/P4jS9/

How to check input tag have only tag(<br/>) inside as value using jQuery

Check input tag which have value only as <br/> tag inside as value using jQuery
I am using an htmlEditor in my project, sometimes user just press enter key only in textarea field. It will get as <br/><br/><br/><br/> as value when saving.
I want to avoid this tags when saving.
How to validate this in jquery ?
If any other characters like <br/>Just <br/> Example <br/> is present then I want to save it with break tag itself.

using a regex like this would help.
/^(\<br\/>)+$/.test($("textarea").val());

Clean it like this:
// Get the HTML and remove <br /> variants
var htmlCleaned = $('#MyTextArea').val().replace(/<br\s?\/?>/, '');

Refer LIVE DEMO
var divTag = $("div");
var nDivTag = $(divTag[0].outerHTML);
$("br", nDivTag).remove();
alert(nDivTag.html());

get innerhtml textarea

on site sample question
HTML
<textarea id="txt"></textarea>
<input type="button" value="click me" onclick="clk();" id="btn"/>
this text area is a ckeditor
SCRIPT
function clk()
{
alert($("#txt").html());
alert($("#txt").val());
alert($("#txt").text());
// alert($("#txt").innerhtml());
}
$(document).ready(function(){
editor = CKEDITOR.replace( 'txt',{language : 'en',on :{}} );
});
this code alert ' ' how can get innerhtml txt??
on site smaple question
Edit
when edit txt and click on btn then val() alert' '

The textarea is replaced by an iframe ( in a textarea I don't think you can put image ).
This seems to be an answer about how to get content from cke iframe : Get CKEditor content? - jQuery

Try this it will alert something if you have anything in the textarea. Since it is an input element it will have value property so just use val() method.
$("#txt").val();

you have to use getData() to get the innerhtml from CKEditor
click here

$('#txt).val(); works only for simple textarea. And you want to text CKEditor-textarea. See here stackoverflow.com/questions/4826036/get-ckeditor-content-jquery. Looks like your question is related to it.

to get inner text of textarea like .html() method you can use this code to replace \n with
$("#txt").val().replace('\n',"<br />");