JavaScript - Formatting Input Button Text

I have text being called from an array, however my HTML formatting in the array is not working.

How do I add formatting to text in an array? Also how do I make a portion of the array a link?

For example:
Code:

var Text = new Array(
		"<br /><font style="color:red">URL:</font> <a href="www.google.com">www.google.com</a>",
		"<br /><font style="color:red">URL:</font> <a href="www.yahoo.com">www.yahoo.com</a>"
	);

I am not too familiar with java but found a script to use on my web page. I would like to formate the text and cahnge the color. In the jvav script I can't find those attributes. How can I make these cahnges? Thanks!

Alexis

Hi all,

im sure this will be pretty simple, at the moment i have some code which sends text from a textarea to a php file, the php file then stores the data into a database.

the javascript post is as follows:

Code:

		var text = document.getElementById(area).value;
		http.open('post', 'autosave.php?text='+text);

there is a little bit more to this(just a handle response).

My issue is that when the data is passed through javascript newlines and breaks disappear, so when i call the saved data it is presented as one long string with no formatting.

i tried the nl2br() function and htmlspecialchars() function in the php file that the javascript passes the data to, this made no difference. I then tried to replace /n with <br /> in the javascript before passing the text variable again this made no differnce.

Does anyone have any ideas how to keep formatting during this process?

I am trying to update the text in a span with a date (which is working fine), but I also want to format that date before it is updated in the span. For example, in the text area I input a date (format: YYYY-MM-DD HH:MM:SS), and I'd like to output between the span tags M-D-YYYY. Does that make sense? I'm totally lost here and hoping someone can help me out.

Here is the javascript.

Code:

function show_post_date() {
	var ele = document.getElementById("post_date");
	var text = document.getElementById("new_post_date");
	
	// Get the date value, then format it
	var formatted_date = ele.value;

	// THIS IS WHAT I'VE TRIED, BUT NOTHING IS UPDATED INTO THE SPAN IF I INCLUDE THIS
	var curr_date = formatted_date.getDate();
	var curr_month = formatted_date.getMonth();
	var curr_year = formatted_date.getFullYear();
	formatted_date = curr_date + "-" + curr_month + "-" + curr_year;
	// END SECTION OF WHAT I'VE TRIED

	if(ele.value != "") {
		text.innerHTML = formatted_date;
  	}
}

Here is the element

Code:

When: <span id='new_post_date' style='font-weight:bold;'></span>
<input type="text" name="post_date" id="post_date" value="" onChange='show_post_date()' />

I am not very knowledgeable with javascript. I have the following code pasted into my website and it works, but I want to modify it in the following ways:

1) I want the text to only scroll for a maximum of two visible lines at a time.

2) I want the text to scroll only once and then remain in place.

3) I want the text color to be grey (#ABABAB)

---------------------
Here is the code I am using:
---------------------

<script type="text/javascript">
window.onload = WindowLoad;
var _hsSpeed=50; //lower value means faster speed!
var _hsData=new Array();
var _hsCounter=0;
function WindowLoad(event) {
InitializeHorizontalScroll();
}

function InitializeHorizontalScroll() {
var arrElements = document.getElementsByTagName("span");
for (var i=0; i<arrElements.length; i++) {
var element=arrElements[i];
if (element.getAttribute("horizontalscroll") == "1") {
_hsData[_hsCounter] = new Array();
_hsData[_hsCounter]["element"] = element;
_hsData[_hsCounter]["text"] = FindInnerText(element);
_hsData[_hsCounter]["index"] = 0;
_hsCounter++;
}
}
if (_hsCounter > 0)
window.setTimeout("HorizontalScrollTimer();", 100);
}
function HorizontalScrollTimer() {
for (var i=0; i<_hsData.length; i++) {
var element = _hsData[i]["element"];
var strText = _hsData[i]["text"];
var index = parseInt(_hsData[i]["index"]);
element.innerHTML = strText.substr(0, index+1);
index++;
if (index >= strText.length)
index = 0;
_hsData[i]["index"] = index;
}
window.setTimeout("HorizontalScrollTimer();", _hsSpeed);
}

function FindInnerText(objControl, innerText, nestingLevel)
{
if ((typeof nestingLevel != "undefined")&&(nestingLevel > 100))
return innerText;

if (typeof innerText == "undefined")
innerText = "";

if (!objControl)
return innerText;

if (typeof nestingLevel == "undefined")
nestingLevel = 0;

var text=objControl.nodeValue;
if (!text)
text = "";
if (objControl.nodeName.toLowerCase() == "br")
return "\n";


for (var i=0; i<objControl.childNodes.length; i++)
{
text += FindInnerText(objControl.childNodes[i], objControl.childNodes[i].nodeValue, nestingLevel+1);
}

return text;
}
</script>

---------------------
And this is inserted in the body of the page:
---------------------

<span horizontalscroll="1" style="font-family: helvetica;text-transform: uppercase;font-size: 10; letter-spacing: 3; font-color: #ABABAB;">text content</span>

---------------------
Thank to anyone who can assist.
---------------------

What I want is when the button 'Total' is pressed, the total frame the pictures and frames appears in the textbox.


Here is the code (sorry, it's long):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery-1.3.2.js"></script>
<title>Ivis's Picture Gallery</title>
<script language="javascript">
var price1, price2, price3, price4, price5, price6, price7, price8, price9, price10;
function price()
{
price1 = document.getElementById("price1").innerHTML=price1;
price2 = document.getElementById("price2").innerHTML=price2;
price3 = document.getElementById("price3").innerHTML=price3;
price4 = document.getElementById("price4").innerHTML=price4;
price5 = document.getElementById("price5").innerHTML=price5;
price6 = document.getElementById("price6").innerHTML=price6;
price7 = document.getElementById("price7").innerHTML=price7;
price8 = document.getElementById("price8").innerHTML=price8;
price9 = document.getElementById("price9").innerHTML=price9;
price10 = document.getElementById("price10").innerHTML=price10;
}

function total()
{
var text = document.getElementById("txt1").value;
text = bigImage + bigFrame;
}


function changeImageZebra()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "ZooZebra.gif");
$("#bigImage").fadeIn(3000);

}

function changeImageTiger()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "tiger.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageGraff()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "graff.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageBDog()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "boys with dog.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageSeal()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "seal.jpg");
$("#bigImage").fadeIn(3000);
}

$(document).ready(function(){
$("#zebPic").mouseover(changeImageZebra);
$("#tigPic").mouseover(changeImageTiger);
$("#graffPic").mouseover(changeImageGraff);
$("#bdogPic").mouseover(changeImageBDog);
$("#sealPic").mouseover(changeImageSeal);

});


function changeFrame1()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square.png");
$("#bigFrame").fadeIn(3000);

}

function changeFrame2()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square2.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame3()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square3.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame4()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square4.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame5()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square5.png");
$("#bigFrame").fadeIn(3000);
}

$(document).ready(function(){
$("#frame1").mouseover(changeFrame1);
$("#frame2").mouseover(changeFrame2);
$("#frame3").mouseover(changeFrame3);
$("#frame4").mouseover(changeFrame4);
$("#frame5").mouseover(changeFrame5);

});
</script>
</head>

<body><h1>Frames</h1>
<p>&nbsp;</p>
<p><img src="ZooZebra.gif" id="zebPic" alt="" width="50" height="50" /><div id="price1">$100</div></p>
<p><img src="tiger.jpg" id="tigPic" alt="" width="50" height="50" /><div id="price2">$110</div></p>
<p><img src="graff.jpg" id="graffPic" alt="" width="50" height="50" /><div id="price3">$120</div></p>
<p><img src="boys with dog.jpg" id="bdogPic" alt="" width="50" height="50" /><div id="price4">$130</div></p>
<p><img src="seal.jpg" id="sealPic" alt="" width="50" height="50" /><div id="price5">$140</div></p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<div id="sq1"><img src="square.png" id="frame1" width="100" height="100" /> Frame1</div><div id="price6">$50</div>
<div id="sq2"><img src="square2.png" id="frame2" width="100" height="100" /> Frame2</div><div id="price7">$60</div>
<div id="sq3"><img src="square3.png" id="frame3" width="100" height="100" /> Frame3</div><div id="price8">$70</div>
<div id="sq4"><img src="square4.png" id="frame4" width="100" height="100" /> Frame4</div><div id="price9">$80</div>
<div id="sq5"><img src="square5.png" id="frame5" width="100" height="100" /> Frame5</div><div id="price10">$90</div><hr />
<p>&nbsp;</p>
<p><img src="ZooZebra.gif" name="bigImage" align="top" id="bigImage" /><img src="square.png" name="bigFrame" id="bigFrame" /></p>
<p>
<label>
<input type="button" name="btn1" id="btn1" value="Total" onclick="total()" />
</label>
<label>
<input type="text" name="txt1" id="txt1" />
</label>
</p>
<p>
<input type="button" name="btn2" id="btn2" value="To Checkout" />
</p>
<p>&nbsp;</p>
[<a href="galleryindex.htm">Back</a>]
</body>
</html>

MY PROBLEM:

The problem is with 3 radio buttons - each of which changes the view of the current page by passing parameters to the end of the page url.

Code:

<td>
	<input id="vall" tabindex="0" type="radio" name="sortview" value="all" onClick=" changeView(''); "></input>
</td>

						function  changeView(viewNumber) {
							// First, we break the current URL into variables
							var hurl = window.location.hostname;
							var purl = window.location.pathname;
							var surl = window.location.search;
							// Then we reconstruct them
							var url = hurl+purl;
							// If there are parameters on the end of the URL
							if (surl.indexOf("?") != -1) {
								// And we are requesting a specific view of the "Opt In" field
								if (viewNumber) {
									// Strip the ? from the front of the parameters
									var oldParam = surl.split("?");
									// If any of the parameters are "opt"
									if (surl.indexOf("opt") != -1){
										 // Then reconstruct the parameters with the requested view (how??) 
									}
									url = "http://" + url + "?opt=" + viewNumber + oldParam[1];
								}
								else {
									url = "http://" + url;
								}
								alert("opt found in url: " + surl);
								window.location.href = url;
							}
							else{
								if (viewNumber) {
									url = "http://" + url + "?&amp;opt=" + viewNumber;
								}
								else {
									url = "http://" + url;
								}
								alert("opt not found: " + url);
								window.location.href = url;
							}
							
						}

Is this even the most efficient way of doing this? I feel like there must be a better way.

Hi guys,

I'm trying to add a php string to some javascript:

document.getElementById("button").value = mygetrequest.responseText;

basically there are a load of buttons on one page. So i need to add a value at the end of button. Basically the ID of each row so button<? echo $row['ID']; ?> but i'm not too sure how i would do this in javascript.

Any help


Thanks in advance

I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button.

(Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.)

The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas?

Code:

<script type="text/javascript">
function changerepeat(theval) {
	alert("changerepeat called");
	document.forms[0].elements[0].value = theval;
}
function tellme() {
	alert("repeat = "+document.forms[0].elements[0].value);
}
</script>
<form>
<input type='hidden' name='repeat' value=''>
<input type='button' value='tellme' onclick='tellme()'>
</form>
<form>
<input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0
<input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1
</form>

Thanks very much for reading!

Hey
I'm trying to create a function which when my "other address" radio button is checked, the "address2", "suburb2" and "postcode2" fields MUST be filled out by the user. I think I need to be using a for loop to determine which button is checked , but I don't know how to apply this checked button to prompt my client that the remaining fields must be completed (as seen in red)? Here is what I have come up with so far...
Many thanks in advance for advice or pointers

[CODE][ICODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Order Form for Joe's Fruit Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Cherie_ONeill">

<style type="text/css">
body {font-family:arial;color:#000000;font-size:10px;}
h4 {font-style:italic;}
.input {font-size:10px;color:#483D8B;}
</style>
<script type='text/javascript'>



function formValidator()
{
// Make quick references to our fields
var fullname = document.getElementById("fullname");
var stnumber = document.getElementById("stnumber");
var address = document.getElementById("address");
var suburb = document.getElementById("suburb");
var state = document.getElementById("state");
var postcode = document.getElementById("postcode");
var phone = document.getElementById("phone");
var email = document.getElementById("email");


// Check each input in the order that it appears in the form!
if(isAlphabet(fullname, "Please enter letters only for your name")){

if (isNumeric(stnumber, "Please enter numbers only for your house number")){

if(isAlphanumeric(address, "Please enter your street name")){

if(isAlphabet(suburb, "Please enter letters only for your suburb")){

if(madeSelection(state, "Please Choose a State")){

if(isNumeric(postcode, "Please enter a valid postcode")){

if(lengthRestriction(postcode, 4, 4)){

if(isNumeric(phone, "Please enter a valid phone")){

if(lengthRestriction(phone, 10, 10)){

if(emailValidator(email, "Please enter a valid email address")){

return true;

}
}
}
}
}
}
}
}
}
}
return false;
}

//ensure all fields are filled but this funtion may not be required on this form
function notEmpty(elem, helperMsg)
{

if(elem.value.length == 0)
{
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}


//ensures a field is numeric only
function isNumeric(elem, helperMsg)
{
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field contains letters only
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z _]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field has both numbers & letters
function isAlphanumeric(elem, helperMsg)
{
var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//restricts the amount of digits required in a numeric field
function lengthRestriction(elem, min, max)
{
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
{
return true;
}
else
{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}

//validates a selection has been made from the select lists
function madeSelection(elem, helperMsg)
{
if(elem.value == "Please Choose")
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
return true;
}
}

//validates the email address
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}

}

//resets the form

function formReset()
{
document.getElementById("orderForm").reset();
}



</script>

</head>

<body>

<h2>Order Form</h2>

<h4>* Indicates required fields.</h4>

<h4>Your details:</h4>

<form name="orderForm" id="orderForm" onsubmit="return formValidator()">

<p>* Name:&nbsp;<input id="fullname" name="fullname" class="input"></p>

* Number:&nbsp;<input id="stnumber" size="5" class="input">&nbsp;* Address:&nbsp;<input id="address" name="address" class="input"></p>

<p>* Suburb or Town:&nbsp;<input id="suburb" name="suburb" class="input">

&nbsp;* State:&nbsp;<select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select>

&nbsp;* Postcode:&nbsp;<input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p>

<p>* Home phone:&nbsp;<input name="phone" id="phone" maxlength="10" size="10" class="input"></p>

<p>* Email:&nbsp<input name="email" id="email" value="enter your current email address" class="input"></p>

<br>


<h4>Purchase details</h4>

<p>* Basket choice:&nbsp;<select class="input"><option>Fruit Deluxe</option><option>Vege Deluxe<option>Fruit & Vege Deluxe</option><option>Tropical Treat</option><option>Vege Basics</option></select>

&nbsp;Quantity:&nbsp;<select class="input"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></p>

<p>* Deliver to:</p>

<input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br>

<input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label> <br>

<br>

<input type="text" name="address2" id="address2" class="input">&nbsp;(Street)

&nbsp; <input type="text" name="suburb2" id="suburb2" class="input">&nbsp;(Suburb/Town)

&nbsp;<select class="input"><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select>&nbsp;(State)

&nbsp;< input type="text" name="postcode2" id="postcode2" maxlength="4" size="4" class="input">&nbsp;(Postcode)


<br>

<input type="submit" value="Submit">&nbsp;<input type="button" onclick="formReset()" value="Reset">

</form>

</body>

</html>

Below is a script I found at http://bytes.com/topic/javascript/an...cookie-problem

The idea is a like button, like on fb, in a form which updates a db field I can use to display the number of likes, and my goal is to disable the like button for the rest of the session, or a day, or whatever. This script disables it onclick, the problem is I can't figure out how to get it to submit the form as well.

I have found it does submit if the input type is 'submit', but then it doesn't call the disable function. I tried writing another function to submit the form but no go.

Code:

<html>
<head>
<title>Vote Button</title>
<script type="text/javascript">
function checkForVote()
{
    // If there is a cookie...
    if(document.cookie != "")
    {
        if(getCookie("voted") == 1)
        {
            // Disable the button again if user already voted. 
            disableButton();
        }
    }
}
 
function disableButton()
{
    var submitvote = document.getElementById("submitvote");
    submitvote.disabled = true;
    submitvote.value = "You Already Voted.";
}
 
function setCookie(name, value, days)
{
    if(days) 
    {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires = " + date.toGMTString();
    }
 
    else 
    {
        var expires = "";
    }
 
    document.cookie = name + "=" + value + expires + "; path=/";
 
    // Disable the button as soon as the user clicks it.
    disableButton();
}
 
function getCookie(name) 
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
 
    for(var i=0; i < ca.length; i++) 
    {
        var c = ca[i];
 
        while (c.charAt(0)==' ') 
        {
            c = c.substring(1,c.length);
        }
 
        if (c.indexOf(nameEQ) == 0) 
        {
            return c.substring(nameEQ.length,c.length);
        }
    }
 
    return null;
}
 
</script>
</head>
 
<body>
<form name="voteform" id="voteform" action="foo.php" method="post">
<input type="button" name="submitvote" id="submitvote" onclick="setCookie('voted', 1, -1);" value="Submit Vote"/>
</form>
</body>
<script type="text/javascript">
// Run checkForVote() at end of document so that form and contents can be referenced
window.onload = checkForVote();
</script>
</html>

Hi Guys,

I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need.

Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box.

For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines.

Below is the HTML to give you an idea of what I mean.

Code:

<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td>

<td><input name="property_q1" id="property_q1" type="radio" value="No" /></td>
</tr>
</table>

<br />

<div id="fine">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" />

It seems like it should be simple, but I don't see what I'm missing. Right now, the search button displays directly under my input field. I've gone through the CSS, but can't figure out where my code is forcing the button onto its own line. What am I missing? How can I bring it up to the same line??

Code:

<form role="search" method="get" id="searchform" action="http://www.centerpie.com/" >
	<div>
	<input type="text" value="" maxlength="100" name="s" id="s"><input type="submit" id="searchsubmit" value="Search">
	</div>
	</form>

well title says it all

i have a search form, and the default value is "enter text here"

when the user click the submit button, i would like to check if the value of my text input is "enter text here" and if it is, then don't submit the form (popup a warning or something)

how can i do that?

thanks a lot!

hi folks, i needed a text input so the user that will register a product, will make sure to enter the cents, and not just the raw money, making it to be stored incorrectly on my database.

for example, if i type "1" the output inside the text field will be automatically "0.01", so the user HAS to type the cents.

thanks in advance