提交表格在手机上不工作

Question

我在移动设备上提交表单时遇到了一个问题。使用了一个表单，并设置了 method="post"，并在提交时调用一个函数onsubmit="return OnSubmitForm();. 我没有使用Jquery或Jquery Mobile，是否可以在移动端使用javascript设置表单动作，即使在移动端也无法提醒值，而在桌面端却可以提醒所有的内容。

目的是什么？

当提交表单时，会重定向到另一个页面，并在那里显示搜索结果。

结果：在桌面浏览器中工作正常。

在桌面浏览器上可以正常工作，但在手机浏览器上浏览时就不行了。

Javascript:

<script type="text/javascript">
    function OnSubmitForm() {
        alert('Searching');
        //document.search_form.action = "/SearchConvention.aspx?SearchString=" + document.getElementById("search_term").value;
        document.search_form.action = "/SearchResults.aspx?terms=" + document.getElementById("search_term").value;
var staticStr = "/SearchResults.aspx?terms=";
    alert(staticStr);
    var searcTxt = $('#search_term').val();
    alert(searcTxt);
    var urlSet = staticStr + searcTxt;
    alert(urlSet);
        return true;
    }
  </script>

HTML。

<div class="form" >
    <div class="input-group">
        <form id="search_form" name="search_form" method="post" class="searchform" onsubmit="return OnSubmitForm();">
            <input id="search_term" name="search_term" type="text" value="" type="text" class="form-control" />
            <button type="submit" value="go"><span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span></button>
        </form>
    </div>
</div>

Answer 1

<script>

function formSubmit() {

var searchCriteria = document.getElementById("search_term").value;

if ( searchCriteria.length == 0 )
{
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false; // for IE as dont support preventDefault;
     }

     return;
} 
    document.search_form.action = "/SearchResults.aspx?terms=" + searchCriteria;
    document.search_form.submit();
}

    </script>

    <div class="form">
    <div class="input-group">
        <form id="search_form" name="search_form" method="post" class="searchform"  >
            <input id="search_term" name="search_term" type="text" value="" type="text" class="form-control" />
            <button type="button" value="go" id="SearchSubmit" onclick="formSubmit()">Go!</button>
        </form>
    </div>
</div>

Answer 2

你应该添加jQuery或者修改urlSet变量的定义为document.getElementById('search_term').value。

Answer 3

如果你使用的是响应式API，比如Bootstrap，只要确保你设置了正确的col-md-col-xs-宽度值就可以了我也发生了同样的情况，我在浏览器开发者模式的元素选项卡中注意到，其中一个form-group div只有在我降低浏览器的宽度或者在手机上查看页面时才会覆盖提交按钮的区域。