如何在不提交表单的情况下在 php 中获取表单值？

Question

我在我的旧站点中使用表单提交。由于 SEO 的目的，我将其更改为 onClick() 函数，这样它会转到一个干净的 URL，但是当我使用此函数时，其他表单值不会进入php文件

下面是我的旧代码

 <form name="frmSearchTops" id="frmSearchTops" action="/womens/tops/" method="post">
        <select  name="cboCityNameRes" id="cboCityNameRes">
          <option value=''>City</option>
             {foreach from= $arritemCities item=foo}                      
               {if $smarty.post.hdnCityName eq $foo}                                
                  <option value="{$foo}" selected="selected">{$foo}</option>          
               {else}    
                <option value="{$foo}" {if $foo eq 'City'} selected="selected"{/if}>
                     {$foo}
                </option>
               {/if}    
             {/foreach}    
        </select>
    <select name="cboMaterial" id="cboMaterial">
      <option value="">Material</option>
      <option value="CT">Cotton</option>
      <option value="SL">Silk</option>
    </select>
     <input name="btnSearch" type="button" value="Search" id="btnSearch"/>       
 </form>

新代码如下 在这里，我在控制器操作中提供了一个虚拟 URL，它将重定向到 womens/tops.php 文件，但我没有得到所选类型的材料

JavaScript

 <script type="text/javascript">

          function searchitem()
          {
        $strCity    =   document.getElementById('cboCityNameRes').value;
        window.location.href = "http://www.legacy.com/womens-tops-"+$strCity+".php";
          }
    </script>   

HTML 代码

 <select  name="cboCityNameRes" id="cboCityNameRes" onchange="cityChanged()">
      <option value=''>City</option>                  
       {foreach from= $arritemCities item=foo}                        
          {if $smarty.post.hdnCityName eq $foo}                                 
             <option value="{$foo}" selected="selected">{$foo} </option>                      
          {else}    
             <option value="{$foo}" {if $foo eq 'City'} selected="selected"{/if}>
                 {$foo} 
            </option> 
          {/if} 
        {/foreach}    
    </select>                        
   <select name="cboMaterial" id="cboMaterial">
     <option value="">Material</option>
     <option value="CT">Cotton</option>
     <option value="SL">Silk</option>
   </select>                    
    <input name="btnSearch" type="button" value="Search" id="btnSearch" onclick="searchitem()"/>

Answer 1

当您像这样执行 window.location 时，您正在重定向页面，这是一个 GET 请求而不是一个 POST。

您需要将额外的变量添加到查询字符串中，例如

window.location.href = "http://www.legacy.com/womens-tops-" + strCity +".php?something=blah";

然后在调用的 PHP 中就会出现一些问题。

另一种更简单的方法是使用 jQuery（如果您愿意，也可以使用纯 JavaScript）来更改表单的操作，以便路径是您的“womens-tops-$strCity”，然后提交表单。

var strCity = document.getElementById('cboCityNameRes').value;
var frm = document.getElementById('frmSearchTops')
frm.action = "/womens-tops-" + strCity + ".php";
frm.submit();

或者 jQuery

var strCity = $('#cboCityNameRes').val();
$("#frmSearchTops").attr("action", "/womens-tops-" + strCity + ".php");
$("#frmSearchTops").submit();

虽然搜索引擎机器人根本不会运行任何 JavaScript。因此，这并没有真正为您做任何 SEO。至少从你的例子中我可以看出。不过，您可能还有其他理由这样做，所以答案仍然有效。

Answer 2

您有一个使用 onchange 事件调用函数 cityChanged 的选择，但您只发布了函数 searchitem。

不过，您可以传递为 select 选择的值，执行以下操作：

<select  name="cboCityNameRes" id="cboCityNameRes" onchange="cityChanged(this.value)">
...
</select>

然后使用函数参数的值，例如：

function cityChanged(city){
    var material = document.getElementById("cboMaterial").options[document.getElementById("cboMaterial").selectedIndex].value;
    // window.location.href = "http://www.legacy.com/womens-tops-"+city+".php"
    // add material to the URL somewhere?
}

Answer 3

试试这个

function cityChanged(val) {
var value = val.options[val.selectedIndex].value;  
window.location.href = "http://www.legacy.com/womens-tops-"+value+".php";
}

你的 HTML 应该是这样的，

<select  name="cboCityNameRes" id="cboCityNameRes" onchange="cityChanged(this)">

希望这对你有用