JavaScript - Input Field Clear But Onblur Will Not Reload

Hello there,

I want to build a form which invokes an ajax-function and therefore the page shouldn't reload.

The problem is I don't want to avoid the autocompletion of the browser. But to save the input i have to submit the form regularly, which means 'onSubmit="return false;"' doesn't work.

Is there any possibility or is this technique just impossible?

Thx for reading and thinking about it!


This is the current code, which works fine, but the browser doesn't save the (non-)submitted input.
(The submit will be invoked by the "getSuggests()"-function.)
Code:

        <form id="mytaste-selection" name="mytaste-selection" autocomplete="on" onSubmit="return false;">
            <fieldset>
                <legend>
                Search
                </legend>
                <div style="padding: 0px 0px;">
                    <label class="standard">Artist:</label>
                    <input id="mytaste-artist" name="mytaste-artist" class="standard text" type="text" autocomplete="on"/>
                    <label class="standard">Title:</label>
                    <input id="mytaste-title" name="mytaste-title" class="standard text" type="text" autocomplete="on"/>
                </div>
                <div class="button" onclick="getSuggests(urlEncode(getElementById('mytaste-artist').value),urlEncode(getElementById('mytaste-title').value),(getElementById('top').checked)?'top':'similar');">
                Search
                </div>
                <div>
                    <label class="standard">Top Tracks</label>
                    <input class="standard radio" name="method_type" id="top" type="radio" checked="checked"/>
                    <label class="standard" style="margin: 2px 2px 2px 20px;">Similar Tracks</label>
                    <input class="standard radio" name="method_type" id="similar" type="radio"/>
                </div>
            </fieldset>

        </form>

PS: If anything isn't clear please inform, if you also think that this issue is tricky, just answer with "Tricky"
PPS: you can have a look at the page at http://mytaste.alitility.com

Hi, basically it's a simple postcode validator.

It checks to see whether the postcode is in UK format, then tells you if it isn't with an alert box, then I want it to clear the field. The input field's ID is postcode.

Code:

function testPostCode () {
	var myPostCode = document.getElementById('postcode').value;
	if (checkPostCode (myPostCode)) {
    document.getElementById('postcode').value = checkPostCode (myPostCode)
	} 
	else {alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.")};
	document.postcode.value="";
	}

Anyone able to help me?

Hello,
i Have problem about clear value when ppl input data on text field
Any idea?

Code:

 
<form action="http://www.packagetrackr.com/track/" method="get" name="track" target="_blank">
<div class="form-field-error-message hidden" style="display: none; ">
<div class="CommonEmptyTrackingNumber"></div>
</div>

<div id="track-form-tracking-number-container">
  <div id="track-form-tracking-number-inner-container" class="track-form-control-boxer"><input id="track-form-tracking-number" class="track-form-element " type="text" name="n" value="Type a tracking number" title="Type a tracking number..." onFocus="if(/^Type a tracking number...$/i.test(this.value)){this.value='';}" onBlur="if(this.value==''){this.value='Type a tracking number...';}">
  <input value="Track!" name="submit" type="submit" title="Track your package" class="track-form-submit-button sprite-master">
</div>
</div>
<div id="track-form-jss-carrier-container" class="hidden" style="z-index: 1000; display: none; ">
<div id="track-form-jss-carrier-content">
<label id="jss-carrier-auto" class="track-form-jss-carrier-label jss-carrier-label">
<input id="jss-carrier-auto-value" value="" type="radio" name="c" checked="checked"> <span>Auto Detect Carrier</span>
</label>
</div>
</div>
</form>

<-------------------------
-edit- Nevermind
<-------------------------
Functions: O_o

Code:

function write_client_data()
{
	clearLine();
	
	var msg = document.getElementById("textbar").value;
	msg = document.getElementById("hide").value + " says: " + msg;
	var url = "process.php";
	var uri = "msg=" + msg;
	ajax1.open("GET", url + "?" + uri, true)
	
	ajax1.send(null);
}

function check_log_size()
{	
	var myform = document.getElementById("form1");
	var input = myform.elements["size"];
	var val = input.getAttribute("value");
	
	var url = "size.php";
	var uri = "sz=" + val;
	
	ajax3.open("GET", url + "?" + uri, true);
	
	ajax3.onreadystatechange = function()
	{
		if(ajax3.readyState == 4 && ajax3.status == 200)
		{
			if(ajax3.responseText == false)
			{
				
			}
			else if(ajax3.responseText == true)
			{
				updateChat();
				get_initial_size();
			}
		}
	}
	ajax3.send(null);
}

function get_initial_size()
{
	var url = "init.php";
	ajax4.open("GET", url, true);
	
	ajax4.onreadystatechange = function()
	{
		if(ajax4.readyState == 4 && ajax4.status == 200)
		{
			var myform = document.getElementById("form1");
			var input = myform.elements["size"];
			input.setAttribute("value", ajax4.responseText);
		}
	}
	
	ajax4.send(null);
}


function updateChat()
{
	var url = "update.php";
	
	ajax5.open("GET", url, true);
	
	ajax5.onreadystatechange = function()
	{
		if(ajax5.readyState == 4 && ajax5.status == 200)
		{
			var newmsg = ajax5.responseText;
			var box = document.getElementsByTagName("div").item(1);
			box.innerHTML += "<p>" + newmsg + "</p>";
			scroller();
		}
	}
	
	ajax5.send(null);
}

function scroller()
{
	var container = document.getElementById("chatbox");
	var maxTop = container.scrollHeight - container.clientHeight;
	var aoe = container.scrollHeight - container.clientHeight - 150;
	
		if(container.scrollTop < aoe)
		{
			//what should I do here?  O_o
		}
		else
		container.scrollTop = maxTop;
}

function clearLine()
{
	var myForm = document.getElementById("form1");
	var element = myForm.elements["textbar"];
	
	element.setAttribute("value", "");
}

Chat page:
Code:

<?php
include_once('globals.php');

session_start();

if(empty($_SESSION['user']))
{
	echo 'YOU ARE NOT AUTHORIZED'.'<br /><br />'.'<a href = "login.php" /> Click here To login </a>'.'<br />'."$www";
	exit();
}

?>

<!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>ChatRoom v1</title>

<link rel="stylesheet" type="text/css" href= "css/chat.css" />
<script type="text/javascript" src="js/client.js"></script>
<script type="text/javascript">


get_initial_size();
setInterval("check_log_size()", 1000);

</script>
</head>

<body bgcolor="#CCCCFF" >

<form action="logout.php" method="post" name="form2" id="form2">
<input name="logout" type="submit" id="logout" value="Logout Now" />
</form>

<h1 style="color:#CCCCFF"> POSITION </h1>
<h1 style="color:#CCCCFF"> POSITION </h1>
<h1 style="margin-left:670px"> Chatroom v1.0 </h1>
<div id="pos">.</div>
<div id = "chatbox">
</div>
<div id = "users"><em>Users Online:</em></div>


<div align="center">
<form id="form1" name = "form1" method="post" action="#">
  <br /><input name="textbar" id="textbar" type="text" value="" size="60" />
  <br /><input type="button" name = "snd" id="snd" value="Send Message" onclick="write_client_data();" />
  <input name="size" type="text" id="size" value = "" />
<input type="hidden" id="hide" name="hide" value="<?php echo $_SESSION['user'] ?>" />
</form>
</div>

</body>
</html>

Why doesn't my clearLine function work. I tried several different ways to access but it won't clear the textbar.

Anyone see anything wrong? ;o

Hey,

I currently have an input box which submits my input box value to php script with a bit of JS:
Code:

<input type="text" 
class="cssShoutForm" 
name="sbText" 
onSubmit="this.disabled=true; shoutIt()">

<input type="button" 
name="Shout" 
value="Submit" 
class="cssShoutButton" 
onClick="this.disabled=true; shoutIt()">

Now when a use clicks the submit button and submits the text - input box clears which is perfect but if a user hits enter the value stays in the input box which is a pain cos you have to delete it to type in the next line. Why is this?

This is my JS:

Code:

function shoutIt() {
  document.fShout.admin.value = "";
  document.fShout.submit();
  setTimeout("document.fShout.sbText.value=''", 1000);
  setTimeout("document.fShout.Shout.disabled=false", 1000);
}

How can i get it to also clear on a user hitting enter?

I dont know if this is a coding or browser based issue (FF 3.6) but when i click on a input box i want it to clear its current default value, that works, but when i refresh my browser the default value doesn't come back, here's what i have.

Code:

function clearMe(theText) {
	
     if (theText.value == theText.defaultValue) {
         theText.value = ""
     }
 }


<input type="text" name="searchBar" id="searchBar" value="Search Here" onblur="restoreMe(this)" onclick="clearMe(this)" />

Anyone able to help me sort this?

I have an ajax dependent drop down set up for location fields and am having trouble figuring out how to clear the dependent selects if the parent select is changed to blank.

I set up a function to clearFields:
Code:

<script>
function clearFields() {
 document.getElementById('cb_state').value = "";
}
</script>

And then set the parent to clearFields onchange:
Code:

onchange='ajaxFunction();clearFields();'

This doesn't clear the field, but even if it did it would clear the field on change regardless of what's selected, what I need is for the function to fire only if the blank option is selected.

How do I need to go about this?

Hello i am using a simple calendar date picker in which when u click a date is displayed in an input field.
Using a javascript i am trying to retrieve data from a second page using this value but probably i am doing something wrong.

1st page:
Code:

<script type="text/javascript">
 function showCustomer(str)
 {
 if (str=="")
   {
   document.getElementById("txtHint").innerHTML="";
   return;
   }
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","check6.asp?q="+str,true);
 xmlhttp.send();
 }
 </script>
</head>
<body>
<form>
    Check in: 
    <input onchange="showCustomer(this.value)" size="22" id="f_date1" /><button id="f_btn1">...</button> 
    <script type="text/javascript">//<![CDATA[
      var cal = Calendar.setup({
          onSelect: function(cal) { cal.hide() },
          showTime: true
      });
      cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d");
    //]]></script>
</form>
 <br />
 <div id="txtHint">here...</div>
</body>
 </html>

and in second one i am trying to get date like this:


Code:

sql_cmd.CommandText = "SELECT dbo.rooms.id, type, image, price,details FROM dbo.rooms, dbo.transactions WHERE dbo.rooms.id=dbo.transactions.roomid and '" & request.querystring("q") & "' not between checkin and checkout"

I'm new in web-development. I've searched it but it's not found. I make a input then how i get value of it for javascript value?

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>

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 have a script where I move randomly users from one multiple selectfield to another and that part works perfectly, but...

When I want to submit the form I don't get any users passed along, course they are not "selected". I have then read around on the net and I need to create an elemet with a hidden input field where all the randomly selected users is inserted to with comma separation, but dont know how?!?!

This is what I got:
Code:

function randomusers(){
	
	var given = 3, used = {}, randnum, opts = $('#select1 option'), olen = opts.length;
		function ran() { // generate a unique random number
		  randnum = Math.floor(Math.random() * olen);
		  return used['u'+randnum] ? ran() : randnum;
		}
		for (var i = 0; i < given; i++) { // get the correct quantity of randoms
		  used['u'+ran()] = true;
		}
		opts.filter(function(index) { // remove all options that are not one of the randoms
		  return !!used['u'+index];
		}).appendTo('#select2');
	
}

I have tryied to insert this: appendTo('#select2' + '<input type="hidden" name="test[]" value="" />'); but that didn't seem right...

Please help :-)

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);
}