Filling out a form field automatically

Question

I have a form in my admin panel through which I want the admin to have the rights to create a new page.

In this form there are two fields, category name and URL.

I want that when the admin fills out the category field the URL field gets automatically filled.

Suppose the admin enters the category name as audits and reporting then the URL should be filled as audits-and-reporting.php.

Here is my code:

  <td height="26" align="right" ><span class="required">*</span> Name :</td>
  <td>
    <input type="text" name="category_name" value=""   placeholder="Your Catgeory Name" size="40" /> <a href="#" class="url_from_title">Create URL</a><br />

    <div id="error_url_creator" class="red"></div>
  </td>
 </tr>
 <tr class="trOdd">
<td height="26" align="right"><span class="required">**</span> Page URL :
</td>
</tr>

How can this to be done?

Answer 1

You can create a JavaScript event method which replace spaces with hyphen "-". This will be fired on change/blur of textbox. eg

   function getUrl(txtBoxText){
    return txtBoxText.toLowerCase().replace(/ /g,"-")+”.php”;
}

You can change hyphen as per your requirement.

Answer 2

Use an html like this in which you use data-* as you would use with data-timestamp.

    <input class="category-input" type="text" data-category-url="audits-and-reporting.php" name="category_name" value="" placeholder="Your Catgeory Name" size="40" /> 

And then you can fetch it with jQuery's data function which you would use like:

   $(input).data("category-url");

In this case. Only that you would use it whenever your desired event (posibly focusout or blur) arises on your category-input elements. It could be like

$(".category-input").on("focusout blur", function(){
       var url = $(this).data("category-url");
       // Now you can place that url wherever you want
});

---EDIT---

If the url has to be dynamicly generated use javascript's encodeURI instead of the data-* thing.

Answer 3

HTML

<table>
    <tr>
        <td><span class="required">*</span> Name :</td>
        <td>
            <input type="text" name="category_name" value="" placeholder="Your Catgeory Name" size="40" id="Catname" />
            <a href="#" class="url_from_title" onclick="CreateURL()">Create URL</a><br />

            <div id="error_url_creator" class="red"></div>
        </td>
    </tr>
    <tr class="trOdd">
        <td>
            <span class="required">*</span> Page URL :
            <input type="text" id="CreatedURL" name="URL" />
        </td>
    </tr>
</table>

Javascript

 function CreateURL() {
    var CatName = document.getElementById("Catname").value;
    var URL = CatName.toLowerCase();
    var replacedString = URL.replace(/ /g, "-");
    var FinalURL = replacedString + ".php";
    document.getElementsByName('URL')[0].value = FinalURL;
}