Question

44

Hiding an HTML Form's Submit Button

rated 0 times [ 49] [ 5] / answers: 1 / hits: 56180 / 12 Years ago, tue, july 17, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kerryoliviaa

Add To Favorites

Follow

Total Points: 221

Total Questions: 102

Total Answers: 117

Location: Sint Maarten

Member since Tue, Mar 29, 2022

2 Years ago

kerryoliviaa questions

1 Using useContext and useReducer in NextJS and reading null as context

Sun, May 15, 22, 00:00, 2 Years ago

1 Material UI Input not detecting when enter key is pressed

Mon, Nov 16, 20, 00:00, 4 Years ago

1 Nodejs async/await mysql queries

Fri, Mar 6, 20, 00:00, 4 Years ago

1 How to trigger keydown event only for alphanumeric and special characters in Angular7?

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to create singleton classes in Javascript?

Tue, Jan 7, 20, 00:00, 5 Years ago

View All

answered 12 Years ago karolinab · Accepted Answer

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;

    }

};