Convert input text to lowercase on submitting a fo

Question

I have a form in which there is one text field is provided with a submit button.On clicking submit button,it redirects to second php page from first php page. index.php

<form action="submit.php" method="get">

<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert()" />
</form 

<script type="text/javascript">
function convert() 
{
    alert("hi");
    var str ;
    str = document.getElementById("search").value;
    document.writeln(str.toLowerCase());
}
</script>

On submitting the form,i want the url to become like submit.php?search=text

I want this text to be in lower case,although if text entered is uppercase. Please guide me how to make this text lower case,I am using the above script for converting it to lower case.But its not converting the text in lower case in URL.

Please guide me on this..

Answer 1

You can do this only using javascript with a few extra stuff:

1) Give your <form> an id

<form action="submit.php" method="get" id="form1">

2) Make your <input> type as button. The reason for this is because we want to make sure the convert() function is executed first, and after that we will submit the form.

<input type="button" value="submit" onclick="convert()" />

3) Finally javascript to:

function convert() 
{
    alert("hi");
    var str ;
    str = document.getElementById("search");
    str.value = (str.value.toLowerCase());
    //get the form id and submit it
    var form = document.getElementById("form1");
    form.submit();
}

Fiddle

Answer 2

There was a few errors, you were missing the right angle bracket on </form> and you were trying to write the value rather than setting the field value, try this...

<form action="submit.php" method="get">

<input type="text" name="search" id="search"  />
<input type="submit" value="submit" onclick="convert();" />
</form> 

<script type="text/javascript">
    function convert() {
        alert("hi");
        var str;
        var srch=document.getElementById("search");
        str = srch.value;
        srch.value=str.toLowerCase();
    }
</script>

Answer 3

try like this:

alert("hi");
document.getElementById("search").value =  document.getElementById("search").value.toLowerCase();
return true;

Fiddle Live

Answer 4

You are use form element so you can get any elements inside form element access by name, Here Our form name is form1 and inside this form inputbox name="search" and access this value by this way, document.form1.search.value.toLowerCase();

Check this Demo jsFiddle

JavaScript

function convert() {
    alert("hi");
    var str = document.form1.search.value.toLowerCase();
    document.writeln(str);
    //console.log(str);
}

HTML

<form name="form1" method="get">
    <input type="text" name="search" id="search" />
    <input type="submit" value="submit" onclick="convert();" />
</form >