自动填写表单字段

时间:2017-10-16 05:21:15

标签: javascript html

我的管理面板中有一个表单,我希望管理员有权创建新页面。

在此表单中有两个字段,类别名称和URL。

我希望当管理员填写类别字段时,URL字段会自动填充。

假设管理员输入类别名称作为审核和报告,则URL应填写为audits-and-reporting.php。

这是我的代码:

$constraint = new Assert\Collection(array(
                'fields' => array(
                    'guest_fname' => new Assert\All(array(
                        'constraints' => array(
                            new Assert\NotBlank(),
                            new Assert\Length(array(
                                'min'   => 3,
                                'minMessage' => 'Your name must have at least {{ limit }} characters.',
                            ))
                        )
                    )),
                    'guest_lname' => new Assert\All(array(
                        'constraints' => array(
                            new Assert\NotBlank(),
                            new Assert\Length(array(
                                'min'   => 3,
                                'minMessage' => 'Your name must have at least {{ limit }} characters.',
                            ))
                        )
                    ))
                ),
                'allowMissingFields' => true
            ));

如何做到这一点?

3 个答案:

答案 0 :(得分:1)

您可以创建一个用连字符“ - ”替换空格的JavaScript事件方法。这将在文本框的更改/模糊时触发。 e.g。

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

您可以根据自己的要求更改连字符。

答案 1 :(得分:-1)

使用像这样的html,你可以像使用data-timestamp一样使用data- *。

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

然后你可以使用jQuery的数据函数来获取它,你可以使用它:

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

在这种情况下。只有当您的类别输入元素出现所需的事件(可能是焦点或模糊)时,才会使用它。它可能就像

<input type="text" class="form-control" placeholder="Search" id="searchbox">

<强> --- --- EDIT

如果必须动态生成网址,请使用javascript's encodeURI而不是数据 - *。

答案 2 :(得分:-2)

<强> 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;
}