如何不在文本字段中显示文本

Question

我在这里有一个网站。

这是我的小表格中的代码...

<form method="get" action="https://www.google.com/search" target="_blank"> 
    <table border="0" cellpadding="0"> 
        <tr>
            <td> 
                <input type="text" name="q" size="25" maxlength="50" value="" id="google" /> 
                <input type="submit" value="Search" />
            </td>
        </tr> 


        <tr>
            <td align="center" style="font-size:75%">
                <input type="radio" name="search" value="google.com" onclick="act('public library ')"/> Libraries
                <input type="radio" name="search" value="google.com" onclick="act('subway OR FedEx ')"/> Fax
                <!--<input type="radio" name="search" value="google.com" onclick="act('ice cream ')"/> Ice Cream-->                    
            </td>
        </tr>
    </table> 
</form>

这是与上述HTML相关的Javascript（也许与我的问题有关）...

function act(change) {
    myOption = change;
    document.getElementById("google").value = myOption;
    }

有一个的jsfiddle 这里 。 （感谢@koala_dev）

在我的网站上 ，如果您单击“ 库 ”，则“ 公共库 ”将显示在文本框中。 我留了一个空格来输入邮政编码，然后单击“搜索”后，结果将显示在另一个窗口的Google页面中。

我想看到的发生...

我希望用户单击“ 库 ”，但不希望显示“ 公共库 ”文本。 我只希望用户输入他们的邮政编码并点击搜索。 我希望“ 公共图书馆 ”文本保持隐藏状态。

编辑：对不起...搜索字段是页面右上角的字段。 那里有一个标签，上面写着！ （输入邮政编码） ...

Answer 1

我想您想将功能绑定到“提交”按钮，并在其中将输入的ed值加上“ public library”或“ subway OR FedEx”

Answer 2

这是我的版本

现场演示

$(function() {
  $("form").on("submit",function(e) {
    var zip = $("#google").val();
    var what = $("input[name='what']:checked").val();
    what=what?zip+" "+what:zip;  
    if (what) $("#google").val(what);
    else e.preventDefault();  
  });
});    

您可能想通过在聚焦字段时从其中删除单选值来重置字段

Answer 3

为什么不只使用ajax将请求发送给Google，然后您就可以精确控制每次事件中的处理方式。 它还会消除对可能被弹出窗口阻止程序阻止的页面刷新或弹出窗口的需要吗？

$("input[name=search]").change(function () {
     //alert($(this).val());
     option = $(this).val();
     var $url = "https://www.google.com/search/" + option;
     $.ajax({
         url: $url,
         type: 'GET',
         beforeSend: function () {
             //do something before submitting
         },
         success: function (data, textStatus, xhr) {
             //success do something with the data you get back
             console.log(data);
             $("#results").html(data);
         },
         error: function (xhr, textStatus, errorThrown) {
             //something broke
             $("#results").html(errorThrown);
         }
     });
 });


    <form>
        <table border="0" cellpadding="0">
            <tr>
                <td>
                    <input type="text" name="q" size="25" maxlength="50" value="" id="google" />
                    <input type="submit" value="Search" />
                </td>
            </tr>
            <tr>
                <td align="center" style="font-size:75%">
                    <input type="radio" id='radiobtn1' name="search" value="Libraries" />Libraries
                    <input type="radio" id='radiobtn2' name="search" value="Fax" />Fax
                    <!--<input type="radio" name="search" value="google.com" onclick="act('ice cream ')"/>Ice Cream--></td>
            </tr>
        </table>
    </form>
    <div id="results"></div>

Answer 4

当您单击单选按钮search ，它会触发javascript代码act('public library ') 。 查看代码，您可以看到以下函数：

 function act(change) {
 myOption = change;
 document.getElementById("google").value = myOption;
} 

您的问题出在该代码的最后一部分document.getElementByID("google").value = myOption 。 似乎javascript并没有执行其他任何操作。 您是说要事后再做其他事情吗？ 如果不是，则不必首先触发该javascript。