Convert Input Text To Lowercase On Submitting A Form

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

Solution 1:

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...

<formaction="submit.php"method="get"><inputtype="text"name="search"id="search"  /><inputtype="submit"value="submit"onclick="convert();" /></form><scripttype="text/javascript">functionconvert() {
        alert("hi");
        var str;
        var srch=document.getElementById("search");
        str = srch.value;
        srch.value=str.toLowerCase();
    }
</script>

Solution 2:

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.

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

3) Finally javascript to:

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

Fiddle

Solution 3:

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 inputboxname="search" and access this value by this way, document.form1.search.value.toLowerCase();

Check this Demo jsFiddle

JavaScript

functionconvert() {
    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 >

Solution 4:

try like this:

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

Fiddle Live

Share

You may like these posts

• 
  Backbone.js State Management / View Initialization Based On Url Fragment
• 
  Loading External URL In Angular2 Router-outlet
• 
  How Can I Conditionally Send Templates And Javascript Files To The Client In Meteor?
• 
  FlexSlider 2 Resizing On Window Resize