Hiding an HTML Form's Submit Button [duplicate]

Question

Possible Duplicate:
Getting a form to submit when the enter key is pressed when there is no submit button

I'm trying to implement a text input box with an invisible submit feature. As such, the field has no submit button attached and is submitted when the "enter" key is pressed.

Here's an example of how I want the code to function:

<form method="get" action="<?php bloginfo('home'); ?>/"><p>

<input class="text_input" type="text" value="SEARCH: type &amp; hit Enter" name="s" id="s" onfocus="if 
(this.value == 'SEARCH: type &amp; hit Enter') {this.value = '';}" onblur="if (this.value == '') 
{this.value = 'SEARCH: type &amp; hit Enter';}" />

<input type="hidden" id="searchsubmit" value="" /></p></form>

Here's the code I can't get to work:

<p>Have us call you. Input your number:</p>
<input type="text" id="phone" name="phone" maxlength="10" size="10">
<input type="submit" value="Click-to-Call"  onclick="window.open('http://secure.ifbyphone.com/clickto_status.php?click_id=34124&phone_to_call=' + getElementById('phone').value + '&key=asdfjknj3459dj38sdka92bva', 'Clickto' , 'width=200,height=200,toolbar=no,location=no, menubar=no, scrollbars=no, copyhistory=no,resizable=no')">

I've tried adding the form attribute with a GET request to the URL in the "onclick" portion to no avail.

Any thoughts on how to make this work?

Answer 1

add this to your css regarding ID searchsubmit:

    #searchsubmit
    {    
        visibility: hidden;
    }

The button will still work but will not be visible. The enter action should work by default if the form's input is focused/used.

---

The onBlur function could be triggering the actions you want to. onBlur occurs when the user leaves the input field (clicking away)

You could try using JQuery:

$(function() {
$('form').each(function() {
    $('input').keypress(function(e) {
        // Enter pressed?
        if(e.which == 10 || e.which == 13) {
            this.form.submit();
        }
    });

    $('input[type=submit]').hide();
});

});

This will trigger the onSubmit event of your form, but you could change

this.form.submit

for

$('#phone').blur()

http://api.jquery.com/blur/

---

Try adding a javascript script block with this:

   document.getElementsById('phone')[0].onkeydown= function(event)
{
    if (event == undefined)
    {    
        event = window.event;
    }

    if (event.keyCode == 13)
    {
        var js_phone = document.getElementsByName('phone')[0].value;
        window.location = 'myPage.php?phone='+js_phone;
        return false;
    }
};

Answer 2

To hide something, you could use the following code:

input[type=submit]
{
    display:hidden;
}

The input[type=submit] is just there as an example, replace it with selector for you submit button.

Hope this helps.