HTML表单输入中的空格将替换为URL中的+。我怎样才能得到+为%20?

时间:2014-08-11 08:23:21

标签: javascript jquery html forms

我制作了下面的HTML表单,但它创建的网址用+。

替换了空格
<div class="well well-sm">
    <form class="form-horizontal" role="form" action="http://example.com/init.html">
        <fieldset>
            <!-- Text input-->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="nickname">Nickname</label>
                <div class="col-sm-10">
                    <input id="nickname" name="init_user" type="text" placeholder="Nickname" class="form-control" required="required">
                </div>
            </div>
            <!-- Button -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="button"></label>
                <div class="col-sm-offset-2 col-sm-10">
                    <button id="button" class="btn btn-lg btn-primary" type="submit">Submit</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

我需要将init_user文字输入中的任何空格替换为%20而不是+。这有可能使用一些JavaScript吗?

2 个答案:

答案 0 :(得分:0)

使用encodeURI()

var uri = "url.php?name=a &car=blue";
var res = encodeURI(uri);

答案 1 :(得分:0)

您可以使用javascript提交表单。在提交表单之前,请手动创建URL并对其进行编码。

function submitForm()
{
    var urlParam = "init_user="+document.getElementById("nickname").value;
    var URL = "http://example.com/init.html";
    var encordedUrl = URL+"?"+encodeURI( urlParam );
    document.location.href = encordedUrl;
}

稍微更改您的HTML

        <div class="well well-sm">
            <form class="form-horizontal" role="form" action="http://example.com/init.html">
                <fieldset>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="nickname">Nickname</label>
                        <div class="col-sm-10">
                            <input id="nickname" name="init_user" type="text" placeholder="Nickname" class="form-control" required="required">
                        </div>
                    </div>
                    <!-- Button -->
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="button"></label>
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="button" class="btn btn-lg btn-primary" onclick="submitForm()" type="button">Submit</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>