JavaScript - Get Value From Input Field

I'm building a template editor and need some help changing some of the variables.

Part 1.

Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s

I need to be able to fill out two fields to change DEALERNAME and 00/00/00.
I found a way to do this but it required the output to be in a field. I need it the output to look no different than before.


Part 2.

I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3.

Head
Code:

<script language="javascript" type="text/javascript">
        function detail1a(){
        document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
        }
        function detail1b(){
        document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
        }
		function detail1c(){
        document.getElementById("detail1").innerHTML = "Lube Chassis";
        }
		function detail2a(){
        document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
        }
        function detail2b(){
        document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
        }
		function detail2c(){
        document.getElementById("detail2").innerHTML = "Lube Chassis";
        }
		function detail3a(){
        document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
        }
        function detail3b(){
        document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
        }
		function detail3c(){
        document.getElementById("detail3").innerHTML = "Lube Chassis";
        }
        </script>

Body
Code:

					
<span style="font-weight: bold;">Offer Details</span><br />
					<p style="margin: 8px 10px">
					Detail 1<br />
					<input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 2<br />
					<input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 3<br />
					<input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br />
					</p>

Output
Code:

										
<ul>
<li><span id="detail1">Detail 1</span></li>
<li><span id="detail2">Detail 2</span></li>
<li><span id="detail3">Detail 3</span></li>
</ul>

i was wondering what event would clear an input field that has a value in it...

so a user can type their own value....

any examples?

Hi all,

I have a complicated (well to me it is!) problem with a form I am creating for my site. The form has three sections with the ability to add another field unlimited times. There is one for adding ingredients, one for equipment and one for steps

The name and id does increment on all 3 however the problem is they seem to all be using the same count, by this I mean that if I add 2 steps (which brings the count to 3) and then add an ingredient, the ingredient id goes to ingredient4 - obviously because it is taking the count that step has set. I am no javascript guru, I am more a designer so I'm really struggling, Ive been working on this one for days..

There is also another problem in that if I create say 3 steps bringing the count up to step4 and then remove the second step, I cant see how I can bring the other steps after step2 count down by one, at the moment step4 and step3 are staying as step3 and step4 but because step2 was removed they should drop down to becoming step2 and step3. My php that inserts the data into my db isnt working because the ids keep getting messed up

I have a demo URL up on ajburchell.com/form.html

If anyone can help me with this I will be extremely grateful

Thank you in advance

can someone help me isolate this input script to 1 designated input field? it just removes any pre-existing value in the field but does so to all input text types now.

Code:

// Home Page Search Box Input Clear 
function initInputs () {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++ ){
        if(inputs[i].type == "text" ) {
            inputs[i].valueHtml = inputs[i].value;
            inputs[i].onfocus = function (){
                this.value = "";
            }
            inputs[i].onblur = function (){
                this.value != ""? this.value = this.value: this.value = this.valueHtml;
            }
        }
    }
}

if (window.addEventListener){
    window.addEventListener("load", initInputs, false);
}
else if (window.attachEvent){
    window.attachEvent("onload", initInputs);
}

How do I insert this javascript: <script language="JavaScript" type="text/javascript" src="http://www.ABC.com/members/display.php?token=email"></script>

Into the values of this:
<input id="Email" name="Email" type="text" size="30" /><input name="emailagent" type="HIDDEN" class="textfield" id="emailagent" value=''INSERT JAVASCRIPT" />

hey friend i am trying to use automatic html input creation using java script for my new project ....


my problem is the field "type propositon 1:is it answer? ignore this one:" not come into input variable such as $_POST['prop1']


i used PHP Code:
pint_r($_POST) 


and the result was
Code:

Array ( [radio1] => on [cid] => 65 [desc] => dfdfdfdfd [submit] => Submit )

why my javascript created input field come into role?


my php html code is

PHP Code:
<table>
  <form  action="new.php" method="post">
   
   
 <tr><td>
 question type:<br />
True or False:<input type="radio" name="radio1">
Objective:<input type="radio" name="radio2">
Other:<input type="radio" name="radio3" >
</td></tr>
<textarea name="desc" rows="6" cols="35" ></textarea> <br />
<a href="javascript:add()" ><b>add proposition</b></a> 
<div id="cat"></div>
<div id="num" style="display:none;"></div>
<br> </table> 


and the java script is ...

PHP Code:
  <script language="javascript" type="text/javascript">
   
    function add()
    {   
        k=document.getElementById("num").innerHTML
        k=parseInt(k);
         if(!k)
        {document.getElementById("num").innerHTML=1;
        k=1;} 
        else{
           document.getElementById("num").innerHTML=k+1;
           k++;
        }  
         document.getElementById("cat").innerHTML+="<tr><td>type propositon "+(k)+":<input type=\"text\" name=\"prop"+k+"\"><td>is it answer? </td> <td> <input type=\"checkbox\" name=\"ans"+k+"\"></td><td><td>     ignore this one:</td><input type=\"checkbox\" name=\"ign"+k+"\"></td></td></tr><br>"            
       
    }


</script> 

I've not really an idea how to do this. I know how to do it in PHP, but I need it dynamic

<input type="checkbox" name="facebook" value="1" />
if($_POST['facebook'] == 1)
echo "<input type='text' name='facebook_url' />";

Could someone tell me how I should do this.

Thanks.

I have an existing form with radio buttons and a text input field:

<input type="radio" name="recurringEnd" value="yes"> End after <input type="text" name="numberOccurrences" size="1"> occurrences

<input type="radio" name="recurringEnd" value="date"> End on <input type="text" name="endDate" size="8">

My client now wants it setup so that if the text field is filled in, the radiobox is automatically selected.

Any help on this would be greatly appreciated as I am not a JS programmer.

Hi, I am trying to write some code that will test if a user enters a non-numeric character in an input text field, and if so, replaces it with a '0'

Code:

<script type="text/javascript">
function IsNumVal (){
	for (J=1; J<=3; J++){
		if (isNaN(Number(document.getElementById('Intext' + J).value))){
			document.getElementById('Intext' + J).value = 0;
		}
	}
}
</script>

<Body>
<table border="1" cellspacing="1" id = "Numbers">
  <tr id="RowNum1">
    <td ><input type="text" size = "5" name="Intext1" id="Intext1" value = "3" 
 onkeyup="IsNumVal()" /></td>
  </tr>
  <tr id="RowNum2">
    <td><input type="text" size = "5" name="Intext2" id="Intext2" value = "9" 
 onkeyup="IsNumVal()" /></td>
  </tr>
  <tr id="RowNum3">
    <td><input type="text" size = "5" name="Intext3" id="Intext3" value = "18"
  onkeyup="IsNumVal()" /></td>
  </tr>
</table>
</Body>

document.getElementById('Intext' + J).value = 0; doesn't work
document.Schedule.'Intext' + J.value = 0; doesn't work
document.Schedule.Intext2.value = 0; works, but I need to test each text field while looping, so I can't "hard code" the ID.

Suggestions?

Hi,

I'm struggling with all this DOM stuff so I hope someone can help.

I have a form with multiple input fields and I'm trying to identify the specific input field that is in focus so that I can display a relevant status bar message.

I have a message array with various entries in it and I'm calling a showStatus() function with an onfocus function from the form itself e.g.

The code in the input form =
Code:

<input type="text" name="first" size="31" maxlength="20" class="entry" onfocus="showStatus()"/>

The showStatus() function so far is =
Code:

function showStatus()
{
	var message = ['Please provide your First Name.', 
plus loads of other properley formatted status messages......]

var x=document.getElementById().focus();
window.status = message[x];
}

I'd like to access the array variable of the item that is in focus not only for the message but also for an onblur function to validate input.

Any ideas?
My thanks
R

I need some help as this is driving me crazy.

I have a onblur, focus with this code for the columns of footer filter.

Code:

$("tfoot input").keyup( function () {
		/* Filter on the column (the index) of this element */
		oTable.fnFilter( this.value, $("tfoot input").index(this) );
	} );
	
	$("tfoot input").each( function (i) {
		asInitVals[i] = this.value;
	} );
	
	$("tfoot input").focus( function () {
		if ( this.className == "search_init" )
		{
			this.className = "";
			this.value = "";
		}
	} );
	
	$("tfoot input").blur( function (i) {
		if ( this.value == "" )
		{
			this.className = "search_init";
			this.value = asInitVals[$("tfoot input").index(this)];
		}
	} );

I am clearing the input fields with this.

Code:

$("input:button").click(function(e) {	$('#col1').val(''); 
					$('#col2').val('');
					$('#col3').val(''); 
					$('#col4').val('');
 					$('#col5').val('');

Including a reset of the filters, but won't bore with that, it works, the filters for the columns are all released and reset.

My issue is the tfoot fields are cleared just fine, but remain blank. The onblur values do not refill the fields until I click in, then click out of the input field. Do I need to adjust for the clearing of the input field in the original focus and onblur? Or do I need a better reset of the the .val('') statement with a tweak to let the onblur function to show.

Thanks, any help really appreciated.
Tom

Hello All,

Below is my code, I am needing to get to where the label name will match the behavior that my field currently does. If nothing is entered the field is changed to a red background. If it is focused it goes back to white. I am needing the font color of the label to match color of the field and match the same behavior.

Code:

<!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" />
<title>Lab06 - Form Validation</title>
<script type="text/javascript" charset="utf-8">



	function passcheck(){
		var pw1 = document.forms[ 0 ].password.value;
		var pw2 = document.forms[ 0 ].passcomf.value;
		
		if ( pw1 != pw2 ) {
			alert ("You did not enter the same new password twice. Please re-enter your password.");
			return false;
		}else{
			return true;
		}
	}


	function validate( ) {
		var errors = new Array( );
		
		for( var i = 0; i < document.forms[ 0 ].elements.length ; i++ ){
			
			if( document.forms[ 0 ].elements[ i ].type == "text" ) {
				if( document.forms[ 0 ].elements[ i ].value == "" ){
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");
					
					document.forms[ 0 ].elements[ i ].className = "in_error";
					
					
					
				}
				
			
			}
		
			if( document.forms[ 0 ].elements[ i ].type == "select-one") {
				if(document.forms[ 0 ].elements[ i ].selectedIndex == 0 ) {
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
						
					document.forms[ 0 ].elements[ i ].className = "in_error";
				}
		 }
		 
		 	if( document.forms[ 0 ].elements[ i ].type == "select-one") {
				if(document.forms[ 0 ].elements[ i ].selectedIndex == 2 ) {
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
						
					document.forms[ 0 ].elements[ i ].className = "in_error";
				}
		 }
		 

			




	}
		if( errors.length == 0 ) {
			return true;
		} else {
			clear_errors( );
			show_errors( errors );
			
			return false;
		}
		

	}
	

	
	function clear_errors( ){
		var div = document.getElementById( "errors" );
		while( div.hasChildNodes( ) ){
			div.removeChild( div.firstChild );
		}
	}
	
	function show_errors ( errors ) {
		var div = document.getElementById( "errors" );
		for( var i = 0; i < errors.length; i++ ){
			var error = document.createTextNode( errors[ i ] );
			var p = document.createElement( "p" );
			p.appendChild( error );
			div.appendChild( p );
		}
	}
	

	window.onload = function( ) {
		document.forms[ 0 ].onsubmit = validate;
		
	}



</script>


<style type="text/css" media="screen">
	#errors {
		color: #F00;
	}
	.in_error {
		background-color: #F00;
	}
	input:focus {
		background-color: #FFF;
	}
	select:focus {
		background-color: #FFF;
	}
</style>

</head>

<body>

	<h1>Form Validation</h1>
    
    <div id="errors"></div>
    
    <form action="" method="post" onsubmit="return passcheck()">
    	 <p>
        	<label for="firstname" id="labelfirstname">First name:</label>
            <input type="text" name="First name" value="" id="firstname" />
        </p>
         <p>
        	<label for="lastname" id="labellastname">Last name:</label>
            <input type="text" name="Last name" value="" id="lastname"/>
        </p>
         <p>
        	<label for="middlei" id="labelmiddlei">Middle initial:</label>
            <input type="text" name="Middle initial" value="" id="middlei"/>
        </p>
         <p>
        	<label for="address" id="labeladdress">Street address:</label>
            <input type="text" name="Street address" value="" id="address"/>
        </p>
         <p>
        	<label for="city" id="labelcity">City:</label>
            <input type="text" name="City" value="" id="city"/>
        </p>
         <p>
        	<label for="State" id="labelstate">State:</label>
            <input type="text" name="State" value="" id="state"/>
        </p>
         <p>
        	<label for="zipcode" id="idzipcode">Zipcode:</label>
            <input type="text" name="Zipcode" value="" id="zipcode"/>
        </p>
         <p>
        	<label for="username" id="labelusername">Username:</label>
            <input type="text" name="Username" value="" id="username"/>
        </p>
         <p>
        	<label for="password" id="labelpassword">Password:</label>
            <input type="text" name="Password" value="" id="password"/>
        </p>
         <p>
        	<label for="passcomf" id="labelpasscomf">Password comfirmation:</label>
            <input type="text" name="Password comfirmation" value="" id="passcomf"/>
        </p>
         <p>
        	<label for="agreement" id="labelagreement">User Agreement</label>
            <select name="User Agreement" id="agreement">
            	<option></option>
                <option>Yes, I agree!</option>
                <option>No, I do not agree!</option>
                </select>
        </p>
		<p><input type="submit" value="Register &rarr;" onclick="return passcheck(); return true;"/></p>
        </form>
</body>
</html>

Hi! I want to insert flash player on my page, that user can change flv source. But I dont know how to make input field that change flv source. I tried to insert input field and button but dont know how to make it working, please help me Here is my flvplayer embed code:

<script type="text/javascript" src="http://flvplayer.com/free-flv-player/flvplayer/swfobject/swfobject.js"></script>
<div id="embed_player">
<h1>Please Upgrade Your Flash Player</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

<script type="text/javascript">
var flashvars = {
flvpFolderLocation: "http://flvplayer.com/free-flv-player/flvplayer/",
flvpVideoSource: "http://flvplayer.com/media/audi_tdi_commercial.mp4",
flvpWidth: "640",
flvpHeight: "375",
flvpInitVolume: "50",
flvpTurnOnCorners: "true",
flvpBgColor: "#FFFFFF"
};
var params = {
bgcolor: "#FFFFFF",
menu: "true",
allowfullscreen: "true"
};
swfobject.embedSWF("http://flvplayer.com/free-flv-player/FlvPlayer.swf", "embed_player", "640", "375", "9.0.0", "http://flvplayer.com/free-flv-player/flvplayer/swfobject/expressInstall.swf", flashvars, params);
</script>

Hi, my first question on this forum is I hope a simple one.

I have an input text field that I would like to have either the user fill out but also I would like to be able to fill it with text, which I can do, via javascript or a variable which I don't seem to be able to manage.

I have tried lots of options, converting to a string first and much more but it will not work, maybe it is a syntax error or maybe I am just doing it plain wrong. I think it should be simple but I have only been using javascript for a few weeks so who knows, hopefully one of you!

Here is my code for displaying a variable which does not work:
Code:

<html>
<head>
<script type="text/javascript">
function myfunction()
var mynumber = 101;
	
	document.getElementById("myinput").value = mynumber;
        
</script>
</head>
<body>


<p id="demo">Web Page 1</p>

<button type="button" onclick="myfunction()">JS</button>
<input type="text" value="00000000" id="myinput">
</body>
</html>

I would be very grateful for any help.
Thanks Simon

Hi,

I have a JQuery modal window and I am trying to pass the value of its input field to a hidden input field within a form but I can not seem to get the value when it is in the modal window.

Modal Window Code:
Code:

<div id="modal-content" class="clearfix">

<h2> enter a name</h2>
	<div>
		<input id="enteredName" name="enteredName" type="text" value="" />
		<a href="javascript:submitform(true)" name="save" id="save" class="btn"><span>Save</span></a>
	</div>
	<a href="javascript:submitform(false)" id="close" class="close-link">No thanks just carry on</a>
</div>

Javascript to set the value of the hidden field to equal the value of the modal input field
Code:

<script type="text/javascript">
    function submitform(assignName) {
      
        if (assignName) {

            var hiddenfield = document.getElementById("hiddenfieldid");
            hiddenfield.value = document.getElementById("enteredName").value;
        }

        
        var form = document.getElementById("formTest");
        form.submit();
     
    }
    

</script>

Any help would be much appreciated.