SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change url in realtime

    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?

  2. #2
    SitePoint Enthusiast DeadPencil's Avatar
    Join Date
    Dec 2004
    Location
    England
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,561
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Untested.
    Code:
    myForm = document.getElementById('formId');
    textValue = document.getElementById('textboxId').value;
    myform.onsubmit = function {
        this.action = 'search.php?s=' + textValue;
        myForm.submit();
    }

  4. #4
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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" />

  7. #7
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,561
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works!

    Thanks everyone!

  9. #9
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kailash Badu View Post
    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

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  13. #13
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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');
      }
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  15. #15
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  17. #17
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  18. #18
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  19. #19
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation!

    I'll read the tutorials!

  20. #20
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •