When submitting a form using the <span> button, redirect to a new site

Question

I need to submit the form below and redirect the page to another site in order to display the search result according to the input search string.

<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>

I am wondering how I can handle it using javascript, jquery or ajax. Please provide your valuable materials. Since I have a submit button as a span, I'm not sure how I can use it to submit a form. I thank people in advance for valuable information.

Answer 1

js inline solution

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

but since you also included the jquery tag for your question :)

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

Answer 2

onlclick jquery

script:

$(document).ready(function(){
$('#searchButton').click(function(){
$("form").submit()//assuming you have a form tag with an action specified
})
})

Answer 3

var SearchedItem=$(".expand").text();      

$.ajax({
    type: "POST",
    async: false,
    dataType: 'json',
    url: "/MyController/Index",
    contentType: 'application/json',
    // processData: false,
    data: JSON.stringify({ SearchedItem: SearchedItem}),
    success: function (data) {
        ...
    }
});

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), for id .