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，例如引导程序，只需确保您设置正确的col-md- col-xs- width值我也发生了同样的事情，在浏览器开发人员模式的“元素”标签中，我注意到其中之一仅当我减少表单组div时才覆盖提交按钮的区域浏览器的宽度或在移动设备上查看的页面。

提交表单不适用于Mobile

3 个答案: