Question

我需要提交以下表单并将页面重定向到另一个站点，以根据输入的searchString显示搜索结果。

<a href="#" class="button search">
    <span class="spanclass"></span>
    <input class="expand" name="searchString" type="text">
    <span id="searchButton" class="search icon-small open-btn"></span>
</a>

我想知道如何使用javascript，jquery或ajax处理它。请提供宝贵的意见。由于我有提交按钮作为span，我不知道如何使用它来提交表单。感谢大家提前获取有价值的信息。

Answer 1

内联js解决方案

<span id="searchButton" class="search icon-small open-btn" onclick="document.forms['form-name'].submit();"></span>

但是因为你还为你的问题包含了jquery标签：）

$(document).ready(function(){
   $('#searchButton').click(function(){
     $("#form-id").submit();
   });
})

Answer 2

使用jquery将onlclick函数附加到span，并在函数

中提交表单

脚本：

List<string> contacts =     new List<string>();
contacts.Add("contact 1");
contact.Add("contact 2");

Answer 3

jQuery(document).ready(function($) {
  $("div.ehtm ul li:has(ul)").addClass("dropdown");
  $('div.ehtm > ul > li.dropdown > a').click(function(e) {
    e.preventDefault();

    $("div.ehtm ul li.dropdown").click(function() {
      $("li.open").removeClass("open");
      $(this).addClass('open');
    });

  });
});

Answer 4

由于iframe中的同源策略

，代码在堆栈上不起作用

$(function(){
  var searchString = $('.expand'),
      searchButton = $('#searchButton');
  
  searchButton.on('click', function(e){
    window.location.href = searchString.val();
  });
})

* {
  box-sizing: border-box;
}

.search-box {
  width: 300px;
  height: 2em;
}

.expand {
  width: 260px;
  height: 100%;
  float: left;
}

.search {
  width: 40px;
  height: 100%;
  background: teal;
  float: left;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-box">
<input class="expand" name="searchString" type="text" value="http://google.com">
<span id="searchButton" class="search icon-small open-btn"></span>
</div>

Answer 5

只需在元素中添加onclick事件：

<span id="searchButton" class="search icon-small open-btn" onclick="location.href = 'www.yoursite.com';"></span>

你也可以在JavaScript块中使用它。

<script type="text/javascript">
document.getElementById("searchButton").onclick = function () {
        location.href = "www.yoursite.com";
    };
</script>

Answer 6

如果您在span处于此表单内时正在寻求提交表单，那么label实际上可以帮助不涉及JS，以及跨浏览器支持：

<label>
  <span id="searchButton" class="search icon-small open-btn"></span>
  <input type="submit" style="display:none"/>
</label>

确保标签中存在提交输入字段（input type=submit），否则只要使用字段id的{{3}}属性即可。

在表单提交上使用<span>按钮重定向到新网站

6 个答案: