Change url in realtime

**Mr Jojo** · Sep 10, 2007, 04:16

I have a form, and in his action i have "action=search.php?s="

And then i have a text box.

I want to write into the action url the text the user tipes in the text box.

For example, the user writes "banana", the url would be "search.php?s=banana".

How can i do that?

**DeadPencil** · Sep 10, 2007, 10:07

I'm not sure what you're trying to do, but you'd be better off having a hidden/standard input form field containing the variable "s" rather than having it in the form action.

**Kailash Badu** · Sep 10, 2007, 10:29

Untested.

Code:

myForm = document.getElementById('formId');
textValue = document.getElementById('textboxId').value;
myform.onsubmit = function {
    this.action = 'search.php?s=' + textValue;
    myForm.submit();
}

**Mr Jojo** · Sep 10, 2007, 15:05

Its not working

I'm sooo noob in JS :'(

I have this in the <header>:

Code JavaScript:

<script language="JavaScript">
 
Function dominaURL(formid){
myForm = document.getElementById(formId);
textValue = document.getElementById('textboxId').value;
myForm.onsubmit = function {
    this.action = 'search.php?s=' + textValue;
    myForm.submit();
}
}
</script>

And here's the form:

Code HTML4Strict:

<form id="busca1" method="POST" action="search.php?s=" onSubmit="dominaURL('busca1')" >
<p><input type="text" id="s" name="s" size="14"><input type="hidden" name="submit" value="ya">
<input type="submit" value="Procurar" name="B1">&nbsp;</p>
</form>

But no errors, no nothing. it just doesnt work

Can you help me again?

Thanks!

**wysiwyg** · Sep 10, 2007, 22:09

Why not just use GET instead of POST?

<form method="get" action="search">
<input type="text" name="q" value="mystring">
</form>

will become: search.php?q=mystring

**Ruben K.** · Sep 10, 2007, 23:55

I would do something like this:

Code:

window.onload = function()
{
	document.getElementById( 'txt' ).onblur = function()
	{
		if( this.value != '' || this.value != 'Put Keyword Here' )
		{
			window.location = 'search.php?s=' + this.value
		}
	}
}

<input type="text" id="txt" value="Put Keyword Here" />

**Kailash Badu** · Sep 11, 2007, 02:04

Ok i wrote it up for you:

Code HTML:

<html>
<head>
<title>Test</title>
<script language="JavaScript">
function mySearch(){
    var myForm = document.getElementById('busca1');
    var textValue = document.getElementById('s').value;
    myForm.action = 'search.php?s=' + textValue;
    myForm.submit();
    return false;
}
</script>
</head>
<body>
<form id="busca1" method="POST"  onSubmit="mySearch()" >
  <p>
    <input type="text" id="s" name="s" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </p>
</form>
</body>
</html>

**Mr Jojo** · Sep 11, 2007, 13:54

It works!

Thanks everyone!

**Mr Jojo** · Sep 11, 2007, 14:33

Originally Posted by Kailash Badu

Ok i wrote it up for you:

Code HTML:

<html>
<head>
<title>Test</title>
<script language="JavaScript">
function mySearch(){
    var myForm = document.getElementById('busca1');
    var textValue = document.getElementById('s').value;
    myForm.action = 'search.php?s=' + textValue;
    myForm.submit();
    return false;
}
</script>
</head>
<body>
<form id="busca1" method="POST"  onSubmit="mySearch()" >
  <p>
    <input type="text" id="s" name="s" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </p>
</form>
</body>
</html>

One more simple question, i know this will sound silly, but is the fastest way for a PHP page to work with multiple ways of showing the same form..

I have 2 forms, one named "busca1" and other named "busca2".

So i made your script more versatil, like this:

Code HTML4Strict:

<script language="JavaScript">
 
function mySearch(myid){
    var myForm = document.getElementById(myid);
    var textValue = document.getElementById('s').value;
    myForm.action = 'search.php?s=' + textValue;
    myForm.submit();
    return false;
}
</script>

myid will be used here:

Code HTML4Strict:

onSubmit="mySearch('busca1')"

OR

Code HTML4Strict:

onSubmit="mySearch('busca2')"

This way still works fine, but there's a problem, since both forms (busca1 and busca2) are "clones", they'll have the same inputbox called "s".

So how can i identify wich inputbox "s" will JS use?

I tried like this:

Code JavaScript:

    var textValue = document.myForm.getElementById('s').value;

AND

Code JavaScript:

    var textValue = document.myid.getElementById('s').value;

And didnt work.
How can i access the right "s" box knowing the "parent" form?

Thanks for the help! And sorry for the really newbie questions :P

**Kravvitz** · Sep 11, 2007, 19:45

IDs must be unique.

Why does it seem like everyone is ignoring wysiwyg? I agree with him. I see no reason to make this require JavaScript to work.

Here's how to do it with JavaScript:

Code:

<script type="text/javascript">
function mySearch(myid){
  var myForm = document.getElementById(myid);
  var textValue = myForm.getElementsByName('s')[0].value;
  myForm.action = 'search.php?s=' + textValue;
  myForm.submit();
}
window.onload = function(){
  document.getElementById('busca1').onsubmit = fucntion(){
    mySearch('busca1');
  }
  document.getElementById('busca2').onsubmit = fucntion(){
    mySearch('busca2');
  }
}
</script>
<form id="busca1" method="post">
  <div>
    <input type="text" name="s" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </div>
</form>
<form id="busca2" method="post">
  <div>
    <input type="text" name="s" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </div>
</form>

However, I recommend you just do this:

Code:

<form id="busca1" method="get" action="search.php">
  <div>
    <input type="text" name="s" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </div>
</form>
<form id="busca2" method="get" action="search.php">
  <div>
    <input type="text" name="s" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </div>
</form>

**Mr Jojo** · Sep 12, 2007, 02:55

I didnt use the GET method because the search page also receives form data from other sites trought the POST method, so i need to make it compatible with both methods.

**Mr Jojo** · Sep 12, 2007, 03:21

Kravvitz I copy your function but it still doesnt work..

I think he is with a problem identifying the textbox in this line:

var textValue = myForm.getElementsByName('s')[0].value;

Why do you treat textValue as an array if each form has only one text box called "s" ?

is the sintaxe right? myForm.getElementsBy... ?

The only function that worked until now was Kailash Badu's one, but it only detects the first textbox called "s" that appears in the HTML code. If you could only add a way to tell myForm.getElementsBy... to your function.

I tried to do it here so:

function mySearch(myid){
var myForm = document.getElementById(myid);
var textValue = myForm.getElementById('s').value;
myForm.action = 'search.php?s=' + textValue;
myForm.submit();
return false;
}

But this way it stops working for any textbox.

JS is very strange..

By the way Kravvitz, this part of your code is very interesting:

window.onload = function(){
document.getElementById('busca1').onsubmit = fucntion(){
mySearch('busca1');
}
document.getElementById('busca2').onsubmit = fucntion(){
mySearch('busca2');
}
}

Interesting way to add a function to objects, nice!

**Mr Jojo** · Sep 12, 2007, 14:58

Here it is, the whole concept.. it doesnt work yet.

Code HTML4Strict:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
 
<script language="JavaScript">
 
function mySearch(myid){
    var myForm = document.getElementById(myid);
    var textValue = myForm.getElementById('s').value;
    myForm.action = 'search.php?s=' + textValue;
    myForm.submit();
   return false;
}
 
 
 
 </script>
 
</head>
 
<body>
<form id="busca1" method="POST" action="merda.php?s=" onSubmit="mySearch('busca1')" >
						<p><input type="text" id="s" name="s" size="14"><input type="hidden" name="submit" value="ya">
						<input type="submit" value="Procurar" name="B1">&nbsp;</p>
		</form>
 
 
 
 
		<form id="busca2" method="POST" action="merda.php?s=" onSubmit="mySearch('busca2')" >
						<p><input type="text" id="s" name="s" size="14"><input type="hidden" name="submit" value="ya">
						<input type="submit" value="Procurar" name="B1">&nbsp;</p>
		</form>
 
</body>
 
</html>

**Kravvitz** · Sep 13, 2007, 00:22

My code wasn't working because I mistyped "function" once and then copied it without noticing it.

getElementsByName() is correct. It always returns a NodeList, so you have to specify which node in that list you want. Since IDs should be unique document.getElementById() only ever returns one element (unless of course the ID is not in use and it returns null).

Here's what the JavaScript should be:

Code:

function mySearch(myid){
  var myForm = document.getElementById(myid);
  var textValue = myForm.getElementsByName('s')[0].value;
  myForm.action = 'search.php?s=' + textValue;
}
window.onload = function(){
  document.getElementById('busca1').onsubmit = function(){
    mySearch('busca1');
  }
  document.getElementById('busca2').onsubmit = function(){
    mySearch('busca2');
  }
}

**Mr Jojo** · Sep 13, 2007, 02:13

I still doesnt work..

JS is hard to do without a good debug possibility...

Try to copy this code into a HTML file and see what happens.

It doesnt change anything in the form's action.

In this example you'll find 2 forms, cloned, but each one has the id of "busca1" and "busca2".

Code HTML4Strict:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
 
<script language="JavaScript">
 
function mySearch(myid){
    var myForm = document.getElementById(myid);
    var textValue = myForm.getElementById('s')[0].value;
    myForm.action = 'search.php?s=' + textValue;
 
}
 
window.onload = function(){
  document.getElementById('busca1').onsubmit = function(){
    mySearch('busca1');
  }
  document.getElementById('busca2').onsubmit = function(){
    mySearch('busca2');
  }
}
 
 </script>
 
</head>
 
<body>
<form id="busca1" method="POST" action="merda.php?s=">
						<p><input type="text" id="s" name="s" size="14"><input type="hidden" name="submit" value="ya">
						<input type="submit" value="Procurar" name="B1">&nbsp;</p>
		</form>
 
 
 
 
		<form id="busca2" method="POST" action="merda.php?s=">
						<p><input type="text" id="s" name="s" size="14"><input type="hidden" name="submit" value="ya">
						<input type="submit" value="Procurar" name="B1">&nbsp;</p>
		</form>
 
</body>
 
</html>

Some hints:

You see that the first action that each form has is action="merda.php?s=" and the JS says:

myForm.action = 'search.php?s=' + textValue;

So, if you press the form's button you'll see that the action keeps "merda.php?s=" but it should be "search.php?s=". So it redirects you to the "http://merda.php?s=" and not to "http://search.php?s=" has it should be if the JS didnt crash.

It means that the script crashes in the line that comes before that statement:

var textValue = myForm.getElementById('s')[0].value;

Its about 3 days trying to solve this problem, will this day be The One?

Thanks.

**Kravvitz** · Sep 13, 2007, 03:33

Oops!

This is very strange. I was convinced that getElementsByName() was a method of all HTML element nodes. I was wrong. It's only a method of document, the same as getElementById().

Why are you using a doctype? Why are you using the deprecated language attribute on the <script> element instead of the type attribute?

Try this:

Code:

<script type="text/javascript">
function mySearch(id1,id2){
  var myForm = document.getElementById(id1);
  var textValue = document.getElementById(id2).value;
  myForm.action = 'search.php?s=' + textValue;
}
window.onload = function(){
  document.getElementById('busca1').onsubmit = function(){
    mySearch('busca1','s1');
  }
  document.getElementById('busca2').onsubmit = function(){
    mySearch('busca2','s2');
  }
}
</script>
<form id="busca1" method="post" action="search.php">
  <div>
    <input type="text" name="s" id="s1" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </div>
</form>
<form id="busca2" method="post" action="search.php">
  <div>
    <input type="text" name="s" id="s2" size="14">
    <input type="hidden" name="submit" value="ya">
    <input type="submit" value="Procurar" name="B1">
  </div>
</form>

**Mr Jojo** · Sep 13, 2007, 04:28

It works!!

Thanks!

Answer to your questions:

Why are you using a doctype?

What? Ah you mean this? "<meta http-equiv="Content-Language" content="pt">"
Is there any disadvantage?

Why are you using the deprecated language attribute on the <script> element instead of the type attribute?

Cuz i'm a noob in JS lol

Thanks again!

**Kravvitz** · Sep 13, 2007, 20:47

You're welcome

Wow. I'm surprised that you don't know what a doctype is after you've been here for several months.

It's used to put browsers into standards compatibility mode and to tell X/HTML validators which version of X/HTML you are using. This is the best one:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

it should go right before the <html> tag in your HTML pages.

For more information, check these out:
Activating the Right Layout Mode Using the Doctype Declaration
Fix Your Site With the Right DOCTYPE!
Choosing a DOCTYPE
Doctype switching
Rendering Mode and Doctype Switching
http://www.w3.org/QA/2002/04/valid-dtd-list.html

**Mr Jojo** · Sep 14, 2007, 06:51

Thanks for the explanation!

I'll read the tutorials!

**Mr Jojo** · Sep 14, 2007, 06:57

Btw, i tried your doctype line, the site loads a bit faster now! How can it be? Those little details that we dont care about make the difference. I really need to study this deeply

The SitePoint Forums have moved.

User Tag List

Thread: Change url in realtime

Thread Tools

Display

Change url in realtime

Bookmarks

Bookmarks

Posting Permissions