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

Question

I have a site here .

Here's the code from my little form...

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

Here's the Javascript related to the above HTML (maybe it has something to do with my question)...

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

There's a JSFiddle here . (Thanks to @koala_dev)

On my site , if you click ' Libraries ', then " public library " will display in the text box. I left a space to enter the zip code, and then the results are displayed in a Google page in another window when Search is clicked.

What I would like to see happen...

I want the user to click ' Libraries ', but I don't want the text " public library " to display. I just want the user to enter their zip code and hit search. I want the " public library " text to stay hidden.

Edit: Sorry... The search field is the one on the top right-hand side of the page. There's a label there that says Find it here! (Enter Zip Code) ...

Answer 1

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

Answer 2

Here is my version

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

You may want to reset the field by removing the radio value from it when focussing the field

Answer 3

Why not just use ajax to send your requests to google, then you could control exactly how things are handled in every event. It also would remove the need for a page refresh or pop-up window that could be blocked by pop-up blockers?

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

When you click on the the radio button search , it fires the javascript code act('public library ') . Looking through your code, you have a function act, below:

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

Your issue lies with the last part of that code document.getElementByID("google").value = myOption . It doesn't seem like that javascript does anything else. Did you mean for it to do anything else afterwards? If not, you don't have to fire that javascript in the first place.