JavaScript - Form - Show Specified Items Based On User Input

Hey guys,

First shot at JS so please be gentle!

I'm trying to get this script to clear the default value of my input elements on focus.

It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered.

Make sense? Here's the script (thanks in advance!!):

Code:

<script language="JavaScript"> 

function clickFocus(input){
	input.className = 'focus';
	if (input.value = input.defaultValue){
		input.value = '';
		}
}

function unFocus(input){
	input.className = 'entered';
	if (input.value == ''){
		input.value = input.defaultValue;
		input.className = 'normal'
		}
}
 
</script>

<form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)">
	<input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" />
    <input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" />
    <input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" />
    <textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)"  rows="5">Message</textarea>
    <input class="submit" name="submit"type="submit" value="Send Message" />
</form>

I create a webpage where i use pagination where it is predefined that i want to show 10 item per page.But i want to do that when a user logged in he have a option that how many items he wants to show per page?javascriptkit.com site use this type?please any one help me how can i do this?

Probably a simple question but it's got me stumped, this post on codingforums didn't really help me either.

I have 5 divs, and I want to have each of them visible seperately on a certain weekday. In pseudo-code:

Code:

if today=monday, show div "bla1"
if today=tuesday, show div "bla2"

etc.

"bla2" should not be visible if it's monday, etc.

I've struggled with trying to bend existing scripts to this purpose but I can't get it working. Please help!

hi,
the following function shows a list of Counties populates by a PHP page:
Code:

$.getJSON('http://www.mypubspace.com/dashtest/countyjson.php', function(data){
    var myhtml = '<ul>';
   for(i=0; i<data.length; i++) {
      myhtml += '<li>' + data[i].County + '</li>';
   }
   myhtml += '</ul>';
   $("#countyshow").html(myhtml);

});

I would like to now, when a user clicks on a County, they are shown a list of pubs based on that County (so, I'll create a new PHP page WHERE County = 'County' or something?!)

at the moment, when a user clicks on a County this function is passed:
Code:

function gopublist(event)
{
var stackLayout = document.getElementById('stackLayout').object; // Replace with id of StackLayout
stackLayout.setCurrentView('view4'); 
}

So, passing a value through so I can modify the SQL in the PHP page to filter the counties?!

Please help?

I have this script that I got from some site. When you click on a link tied to a div it hides all other divs and displays just that one. Well, that works, but I want it to display one of the divs on page load based on today's date.

For example, it will display the "summer" div if today's date is anywhere between June 1 and August 31. When links to other divs are clicked that div will disappear and other ones will appear in its place. Anyway, here's the code, and I don't know anything about javascript so I have no idea where to even start editing it. Please help

Code:

<script type="text/javascript">
<!-- Layer Show/Hide Script
last=""
function changeDiv(the_div,the_change)
{
	var the_style = getStyleObject(the_div);
	
	if (the_style != false)
	{
		the_style.display = "block"
	
		if(last!="")
		{
			last.display = "none"
		}
	}
	
	last=the_style
}
	
function getStyleObject(objectId) 
{
	if (document.getElementById && document.getElementById(objectId)) 
	{
		return document.getElementById(objectId).style;
	} 
	
	else if (document.all && document.all(objectId)) 
	{
		return document.all(objectId).style;
	} 
	
	else 
	{
		return false;
	}
}

//-->
</script>

can any guys help me to fine the jquery based slide show right to left with next previous and auto facilities on div not on ul li based?

Hello all,

I need some help! I am trying to finish a script that shows a particular div based on the last 2 chars in the cookie value. I have the cookie part done. I just need a little help with the show hide part.

Can anyone help!

Thanks in advance!

Code:

<HTML>
<HEAD>
<TITLE>cookie set, delete, get value and create</TITLE>
<SCRIPT LANUAGE="JavaScript">
/**
 * Sets a Cookie with the given name and value.
 *
 * name       Name of the cookie
 * value      Value of the cookie
 * [expires]  Expiration date of the cookie (default: end of current session)
 * [path]     Path where the cookie is valid (default: path of calling document)
 * [domain]   Domain where the cookie is valid
 *              (default: domain of calling document)
 * [secure]   Boolean value indicating if the cookie transmission requires a
 *              secure transmission
 */
function setCookie(name, value, expires, path, domain, secure) {
    document.cookie= name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
}
/**
 * Gets the value of the specified cookie.
 *
 * name  Name of the desired cookie.
 *
 * Returns a string containing value of specified cookie,
 *   or null if cookie does not exist.
 */
function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    } else {
        begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1) {
        end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
}
</SCRIPT>

</HEAD>
<BODY>
<input type="button" value="Set Cookie"  onclick='setCookie("location", prompt("Enter your location:\n Enter \"Baltimore, MD\" in the text box below."))' />
<br>
<br>

				<script>	
				var state = getCookie("location").slice(-2);
				if (state=='MD' || state=='NC'){
					alert("location stripped to" + " - " + state);

					//Show hide code here...
					
				}
				</script>

Refresh page after setting the cookie to "Baltimore, MD"<br>

<br>
<div id="image1">Image1</div>
<div id="image2">Image2</div>
<div id="image3">Image3</div>
</BODY>
</HTML>

Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help

Code:

     
<script type="text/javascript">  
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>

Code:

<SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)">
<OPTION VALUE="1m">Monthly</OPTION>
<OPTION VALUE="">One Time</OPTION>
</SELECT>

Code:

<input type="text" id="name" name="name" value="Partnership" />
<input type="text" id="category" name="category" value="Partnership" />

I have a form which contains a few drop down lists.
The contents of the dropdown lists are dependent on each other and are populated via php scripts which are called each time a selection is made or changed by the user.

When the view results button is clicked in the form I need the user to be directed to a specific page based on the selections they have made.

The url of the page they need to be directed to is really based on what has been chosen in the first dropdown. The subsequent dropdowns form variables that I need to be sent to the page so that the data the user sees on that page is relevant.

ie if the user has chosen bikes then a specific manufacturer then a specific price range the page they will be sent to will be the bike.php page with all the manufacturer specific bikes in their chosen price range visible. Can anyone tell me the best way to go about doing this please?

I had thought about using the php header script along with an if statement but how do I then go about getting the variables sent to the page to be recognised?

Would I be better looking at the window.location in js to do this?

Any help and advice would be greatly appreciated on this. I can post the code for the form if that makes any difference.

Hello,

I have very little knowledge of javascript, other than modifying existing scripts, and I can't find anything about this particular problem. I need some help on creating a simple script that will display a div ONLY if the user comes from a certain page within the same site.

Not sure if that was clear, but let me try with specifics. There is a link to a page called 'Clients' on the 'About Us' page. If a user goes directly to 'Clients', they should have a normal experience. If, however, they come via the 'About Us' page, I want to display a div at the bottom of the page that will take them back to the 'About Us' page.

I know how to get a referrer, and I know how to show/hide divs. I just don't know how to combine the two. Can anyone help?

Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load.
Code:

<select name="Event_Type_ID">
    <option value="1">Choice A</option>
    <option value="2">Choice B</option>
    <option value="3">Choice C</option>
</select>

<div id="showme">
 Content to show if EITHER Choice B or C is chosen. Otherwise this div  should be hidden.
</div>

Can anyone lead me in the right direction?
Thanks!

Hi all,

I am trying to find out if it's possible to auto populate a text input based on the value of another.

e.g. there is an input called name.. the user completes this and enters something like John, then in the same form there is another input called username. Once the person enters John in the name field, the username automatically displays John.

I'm not sure how doable this is, I'm not very familar with Javascript, so any advice would be greatly appreciated.

Many thanks,

Greens85

I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document.
Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation)

On HTML form:
>drop down list (name courseName, value of selections 1,2,3,4)
> radio button (name returnStudent, value of selections 1,2)
> radio button (name bookNeeded, value of selections 1,2)


Table (name totalprice) at the bottom of the form:
price1: price of courseName plus returnStudent (td with name tuitionprice)
price2: price of bookNeeded (td with name bookprice)
Total of the above (td with name totalprice)

This is what I am trying to make work...
Code:

var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
	if (selectedCourse == "1" && selectedStudent =="1")
	{
		document.write("12345");
	}

	if (selectedCourse == "1" && selectedStudent =="2")
	{
		document.write("54321");
	}
}

Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script>

I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful!

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" />

I am facing an issue where a link on my website opens in a new window if you simply click on it. However, if you right click and say open in new window or new tab, it opens the same window (URL) again from where the link is clicked.

Self Service Option is a link and the JSP calls a function getSelfServSite() when the link is clicked. This is how the code flows in my case

function getSelfServSite()
{
getToTheLink("${myConfigInfo.selfServiceURL}");
// this is because the URL is configurable
}

function getToTheLink(url)
{
window.open (url, "currentWindow", "");
}
What am I doing wrong. I want it to go to the right link no matter how the user click it.

Please advise. Thanks