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

时间:2013-08-21 19:15:23

标签: javascript html

我有一个网站 here

以下是我的小表格中的代码......

<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 here 。 (感谢@koala_dev)

在我的网站上,如果您点击“图书馆”,则会在文本框中显示“公共图书馆”。我留下了一个空格来输入邮政编码,然后当点击搜索时,结果会显示在另一个窗口的Google页面中。

我希望看到的是什么......

我希望用户点击“图书馆”,但我不希望显示“公共图书馆”文字。我只想让用户输入他们的邮政编码并点击搜索。我希望隐藏“公共图书馆”文字。

修改抱歉...搜索字段位于页面右上角。那里有一个标签,上面写着在这里找到它! (输入邮政编码) ...

4 个答案:

答案 0 :(得分:2)

我认为你想把一个函数绑定到提交按钮,并在那里用“公共图书馆”或“地铁或联邦快递”输入ed值前缀

答案 1 :(得分:2)

这是我的版本

Live Demo

$(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();  
  });
});    

您可能希望在聚焦字段时通过从中移除无线电值来重置字段

答案 2 :(得分:2)

为什么不使用ajax将您的请求发送到谷歌,然后您可以准确控制每个事件的处理方式。它还会消除弹出窗口阻止程序可能阻止的页面刷新或弹出窗口的需要吗?

$("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>

答案 3 :(得分:0)

当您点击单选按钮search时,它会触发javascript代码act('public library ')。查看代码,您将看到以下函数:

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

您的问题在于该代码document.getElementByID("google").value = myOption的最后一部分。它似乎不是javascript做任何其他事情。之后你还有什么意思吗?如果没有,您不必首先触发该javascript。