This is the javascript & html code i have.
function convertinput() {
document.getElementById('first').value
var string = document.getElementById('first').value
var newString = "##[0:1: " + string + "]]"
document.getElementById('output').value = newString
}
<input id="first"></input>
<br>
<input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
the code editor in jsfiddle is http://jsfiddle.net/FEC7S/3/
I want this code to be displayed in my blog post as it is here
http://www.trickiezone.com/2012/10/facebook-blue-text-generator-by.html
If i embed it in my blog through jsfiddle or tinkerbin, the whole web page is getting displayed.
I need only the result to be displayed in my blog post.
How to do so ?
i have added the working demo in my blog:
signed by miliodiguine
TO DO:
1)Login to your blog.
2)Add New Post
3)paste this code
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<script language="javascript" type="text/javascript">
function convertinput() {
document.getElementById('first').value
var string = document.getElementById('first').value
var newString = "##[0:1: " + string + "]]"
document.getElementById('output').value = newString
}
</script>
<input id="first"></input>
<br>
<input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
</div>
You could use your id to set the display property in css...
function convertinput() {
document.getElementById('output').value = "##[0:1: " + document.getElementById('first').value + "]]";
document.getElementById('output').style.display = 'block';
}
<input id="first"></input>
<br>
<input id="output" style="display:none;"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
http://jsfiddle.net/FEC7S/7/
Related
The code below is a form that generates html codes
I want each field to be on a separate line in the "Post text" field
Current output:
<div>texthere</div><script>texthere</script><style>texthere</style>
Expected output:
<div>texthere</div>
<script>texthere</script>
<style>texthere</style>`
function submitted() {
var formValue0 = '<div>' + document.getElementsByName("content")[0].value + '</div>';
var formValue1 = '<script>' + document.getElementsByName("content")[1].value + '<\/script>';
var formValue2 = '<style>' + document.getElementsByName("content")[2].value + '</style>';
document.getElementsByName("content")[3].value = formValue0 + formValue1 + formValue2;
return false;
}
<form onsubmit="return submitted()">
Field 1:<br><input type="text" name="content"><br>
Field 2:<br><input type="text" name="content"><br>
Field 3:<br><input type="text" name="content"><br>
<input type="submit" value="DONE"><br><br>
Post text:<br><textarea name="content" style="height:200px"></textarea>
</form>
You can use this code for several things and speed up your work with repeated codes like a custom post that would have to edit the html manually
You can use new line character \n like this -
function submitted() {
var formValue0 = '<div>'+ document.getElementsByName("content")[0].value +'</div>\n';
var formValue1 = '<script>'+ document.getElementsByName("content")[1].value +'<\/script>\n';
var formValue2 = '<style>'+ document.getElementsByName("content")[2].value +'</style>\n';
document.getElementsByName("content")[3].value = formValue0+formValue1+formValue2;
return false;
}
<form onsubmit="return submitted()">
Field 1:<br><input type="text" name="content"><br>
Field 2:<br><input type="text" name="content"><br>
Field 3:<br><input type="text" name="content"><br>
<input type="submit" value="DONE"><br><br>
Post text:<br><textarea name="content" style="height:200px"></textarea>
</form>
I am attempting to make a page where the usere can chose between two products and enter some text in two fields which will append on the end of a link. My page works If I enter the text first and then chose the option however if I select the product option first the text doesn't append and if I try to update the text in the fields once the link is shown, it remains the same. I'm a bit of a beginner to JavaScript so any suggestions as to where I am going wrong would be greatly appreciated?
<html>
<head>
<script type="text/javascript">
function productChange(product) {
var val = product.value
var idTag = document.getElementById("idTag");
var trackingTag = document.getElementById("trackingTag");
if (val == 'Movies') {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag.value + '&omniture=' + trackingTag.value;
} else {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag.value + '&omniture=' + trackingTag.value;
}
}
</script>
</head>
<body>
Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange(this)' id="MoviesRadio" /><br>
Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange(this)' id="EntsRadio" />
<br><br>
ID: <input type="text" id="idTag" onchange="productChange()"><br>
Tracking: <input type="text" id="trackingTag" onchange="productChange()">
<br><br>
<div align="center" id="divProductChangeLinkTitle"></div>
<br><br>
<div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
</body>
</html>
In your method, when onChange event occurs for input text, then val is undefined, because you are not passing anything, so in productChange() method, you can get radio button values directly, I have made some changes in your code, please check fiddle -
HTML -
Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange()' id="MoviesRadio" /><br>
Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange()' id="EntsRadio" />
<br><br>
ID: <input type="text" id="idTag" onchange="productChange()"><br>
Tracking: <input type="text" id="trackingTag" onchange="productChange()">
<br><br>
<div align="center" id="divProductChangeLinkTitle"></div>
<br><br>
<div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
Javascript -
function productChange() {
var val = document.querySelector('input[type="radio"][name="ProductRadio"]:checked').value;
var idTag = document.getElementById("idTag").value;
var trackingTag = document.getElementById("trackingTag").value;
if (val == 'Movies' && idTag && trackingTag) {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag + '&omniture=' + trackingTag;
} else if(val=='Entertainment' && idTag && trackingTag){
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag + '&omniture=' + trackingTag;
}
}
Now, if radio button is selected and both inputs have some value then only link will be shown
Hey the above code is working , but you to also set one condition to check atleast one radio button then fill the input values else on direct filling those input text fields it is giving error.
So one radio button needs to be checked.
<html>
<head>
<script type="text/javascript">
function productChange(product) {
var val = document.querySelector('input[type="radio"][name="ProductRadio"]:checked').value;
var idTag = document.getElementById("idTag");
var trackingTag = document.getElementById("trackingTag");
if (val == 'Movies') {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag.value + '&omniture=' + trackingTag.value;
} else {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag.value + '&omniture=' + trackingTag.value;
}
}
</script>
</head>
<body>
Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange(this)' id="MoviesRadio" /><br>
Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange(this)' id="EntsRadio" />
<br><br>
ID: <input type="text" id="idTag" onchange="productChange()"><br>
Tracking: <input type="text" id="trackingTag" onchange="productChange()">
<br><br>
<div align="center" id="divProductChangeLinkTitle"></div>
<br><br>
<div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
</body>
</html>
You need to pass value while calling productChange function.
I'm trying to make it so when a user inputs text in a textbox it prints it as a link that they are able to click on. Here is my code:
HTML:
<form>
<input type="text" id="urlhtml" size ="30" placeholder="http://www.sait.ca">
<br>
<br>
<input type="submit" value="Add Url" id="submit"onclick="getUrlList(); return false">
</form>
<br>
<h2> Your favorite urls are: </h2>
<a href target ="_blank" ><h3><span id="showurls"></span>
</h3></a>
JAVASCRIPT:
var urlList=[];
function getUrlList () {
var url={urlhtml};
var i=0;
var thisList="";
url.urlhtml=document.getElementById("urlhtml").value;
urlList.push(url);
for(i=0; i< urlList.length;i++)
{
var thisurl={urlhtml};
thisurl=urlList[i];
thisList+="http://" + thisurl.urlhtml;
thisList+="<br>";
}
document.getElementById("showurls").innerHTML=thisList;
}
The link gets displayed and you can click on it however it just opens up the same page and doesn't go to what the user inputted.
Any help would be really appreciated.
Just change code to this. You have to form a "a" attribute for each link.
var urlList = [];
function getUrlList() {
var url = {
urlhtml
};
var i = 0;
var thisList = "";
url.urlhtml = document.getElementById("urlhtml").value;
urlList.push(url);
for (i = 0; i < urlList.length; i++) {
thisList += "<a target='blank' href='http://" + urlList[i].urlhtml + "'>" + urlList[i].urlhtml + "</a><br>";
}
document.getElementById("showurls").innerHTML = thisList;
}
<form>
<input type="text" id="urlhtml" size="30" placeholder="http://www.sait.ca" value="www.google.com">
<br>
<br>
<input type="submit" value="Add Url" id="submit" onclick="getUrlList(); return false">
</form>
<br>
<h2> Your favorite urls are: </h2>
<a href target="_blank"><h3><span id="showurls"></span>
</h3></a>
change the for loop to
for(i=0; i< urlList.length;i++)
{
thisList+="<a href='http://" + urlList[i] + "'>" + urlList[i] + "</a><br>";
}
basically you were not forming anchor tags correctly
I've gotten the code to a workable level in JS Fiddle, but I am still having issues with getting the code together so I can put it in an actual site.
I'm embedding the form in a sharepoint site, I know I read the JS might need to be linked in externally as a file.
Form Function: HTML Inputs are strung together by the javascript and then displayed via an alert.
<HTML>
<body>
<head>
<script language=“javascript”>
var button = document.getElementById('test');
var date = document.getElementById('1');
var contact = document.getElementById('2');
var contacttype = document.getElementById('3');
var os = document.getElementById('4');
var devicetype = document.getElementById('5');
var device = document.getElementById('6');
var reason = document.getElementById('7');
var comments = document.getElementById('8');
button.onclick = function () {
var str = "Date: " + date.value + " " + "Contact: " + contact.value + " " + "Insured or Agent: " + contacttype.value + " " + "Operating System: " + os.value + " " + "Tablet or Phone: " + devicetype.value + " " + "Device Name: " + device.value + " " + "Reason fo Call: " + reason.value + " " + "Additional Comments: " + comments.value;
alert(str);
};
</script>
</head>
<h1> SR Template
</h1>
<label>Date:
<input id="1" />
</label>
<br />
<label>Contact:
<input id="2" />
</label>
<br>
<label>Insured or Agent:
<input id="3" />
</label>
<br>
<label>Operating System:
<input id="4" />
</label>
<br>
<label>Tablet or Phone:
<input id="5" />
</label>
<br>
<label>Device Name:
<input id="6" />
</label>
<br>
<label>Reason for call:
<input id="7" />
</label>
<br>
<label>Additional Comments:
<input id="8" />
</label>
<br />
<button id="test">Test</button>
</body>
</HTML>
language=“javascript”
You can't delimit attribute values with angled quotes, so that is an unrecognised language so the browser will ignore the script entirely.
It's also HTML 3.2, which was obsoleted in 1998. This is 2015. Write HTML 5. Don't include a language attribute at all.
var button = document.getElementById('test');
There is no element with that id before the script element.
Your code is not in a function that gets called later.
The element doesn't exist when you try to run that code.
Move the script to after the elements you are trying to get out of the DOM or wrap it in an onload function as you have configured JSFiddle to do.
In your <script> you have language=“javascript” those quotes are fancy quotes from probably Microsoft Word.
Your issue might be that it's not standard quotes... like this: "
Learning to code and having a problem creating arrays from jQuery objects. I would like to give the user the option of adding as many "Favorite Books" as they want to their profile.
The UI is written in jQuery,
<script language="javascript">
function one()
{
var i = 1;
my.innerHTML = my.innerHTML +"<br><input type='text' name='title'+i[] >"
var n = 1;
[
div.innerHTML = div.innerHTML +"<br><input type='text' name='author'+n[] >"
]
}
</script>
I have tried:
var obj = $('input');
var arr = $.makeArray(obj);
I was hoping it was actually that easy but the output is:
<div id="div">
<br>
<input type="text" +n[]="" name="author">
<br>
<input type="text" +n[]="" name="author">
<br>
<input type="text" +n[]="" name="author">
</div>
I have tried option number two which I found here yet gave me the same output:
var author = new Array();
//get all the authors
$('.auth input').each(function (i)
{
var author= $(this).val();
if(author!= '')
{
author[author] = author;
alert(author.length);
}
});
and same results. I was hoping for results like this:
<div id="div">
<br>
<input type="text" name="author[0]">
<br>
<input type="text" name="author[1]">
<br>
<input type="text" name="author[2]">
</div>
so I can parse out to a PHP array.
Maybe:
<script language="javascript">
var i = 0;
function one(){
$('#my').append("<br><input type='text' name='title["+i+"]'>");
$('#div').append("<br><input type='text' name='author["+i+"]'>");
i++;
}
</script>