call javascript a function in html submit button

Question

I have a form which I want to hide or show dependent on the users decision. I got following functions in an external javascript file:

function hide_element() { 
    $("form").hide(); 
};

function show_element() {
    $("form").show();
};

and this is how I call those functions:

<button type="submit" onclick="show_element;">show</button>
<button type="submit" onclick="hide_element;">hide</button>
<form>
...
</form>

Unfortunately this does not work. Do you have any clues why this is the case?

replace this show_element; with show_element() & hide_element; with hide_element() — stanze
– stanze, Commented Mar 24, 2015 at 8:44
I found something similar here: stackoverflow.com/questions/11226489/… Hope it helps? — TOmmy.Jidex
– TOmmy.Jidex, Commented Mar 24, 2015 at 8:51
this $("form") indicates that you are using jQuery my friend :) but I see your problems are solved. — Piotr Dajlido
– Piotr Dajlido, Commented Mar 24, 2015 at 10:20
@ZedWhatSheSaid The answer you marked as solves is terrible and bad practice. — Piotr Dajlido
– Piotr Dajlido, Commented Mar 24, 2015 at 10:23

Community · Accepted Answer · 2020-06-20 09:12:55Z

Since we are using jQuery I would like to propose this approach:

HTML:

<button id='toggleMyForm'>hide</button>
<form id='myForm'>First name:
    <br>
    <input type=" text " name="firstname " />
    <br>Last name:
    <br>
    <input type="text " name="lastname " />
    <br>
    <input type="submit" value="Submit"/>
</form>

jQuery:

var myForm       = $('#myForm');
var toggleMyForm = $('#toggleMyForm');

toggleMyForm.on('click', function(){
    myForm.toggle();
    myForm.is(":visible") ? $(this).html('hide') : $(this).html('show');
});

Test here: http://jsfiddle.net/urahara/obm39uus/

NOTE: don't put yourself in the position where you have multiple submit buttons in a <form>, you can distinguish between them by using value attribute, but still in my opinion it's better to keep clean design with one submit per form.

don't repeat jQuery fetching calls. make a handle of a element: var myForm = $('myForm'); then use it like this e.g: myForm.show()

Vivek Gupta · Accepted Answer · 2015-03-24 08:46:38Z

5

replace show_element with show_element() & hide_element with hide_element() like below:

  <button type="submit" onclick="show_element();">show</button>
  <button type="submit" onclick="hide_element();">hide</button>

answered Mar 24, 2015 at 8:46

Vivek Gupta

1,0455 silver badges7 bronze badges

Comments

pavel · Accepted Answer · 2015-03-24 08:48:04Z

2

Now you try to call variables named show_element and hide_element. These doesn't exist.

Function has to be called with brackets. If you have no params, use ().

<button type="submit" onclick="show_element();">show</button>
<button type="submit" onclick="hide_element();">hide</button>

answered Mar 24, 2015 at 8:48

pavel

27.3k11 gold badges47 silver badges63 bronze badges

Comments

ThibaultV · Accepted Answer · 2015-03-24 08:49:16Z

1

I recommend you to use <button type="button" class="hide">Hide</button>

And, in the js file :

$('button.hide').click(function() {
    $('form').hide();
}

Same thing for the show button.

answered Mar 24, 2015 at 8:49

ThibaultV

5691 gold badge6 silver badges24 bronze badges

Comments

OddDev · Accepted Answer · 2015-03-24 08:51:59Z

You've to replace "show_element;" with "show_element();".

 <button type="submit" onclick="show_element();">show</button>
 <button type="submit" onclick="hide_element();">hide</button>

But why? The () Operator Invokes the Function. Using the example above, show_element refers to the function object, and show_element() refers to the function result.

Example:

Accessing a function without () will return the function definition:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

http://www.w3schools.com/js/js_functions.asp

With "show_element" you are able to store the function itself (in a variable for example), but you don't execute it.

Borja · Accepted Answer · 2015-03-24 14:11:23Z

1

is this pseudo-code?

If not I would rewrite it like:

$form = $('#form_id');

function hide_element() {
    $form.hide();
    $form.submit();
}

function show_element() {
    $form.show();
    $form.submit();
}

And then:

<button onclick="show_element();">show</button>
<button onclick="hide_element();">hide</button>
<form>
...
</form>

I removed the type submit because it is not good to have more than one submit. Actually both are outside the form. In case you want to submit it I would put it like this:

<button onclick="show_element();">show</button>
<button onclick="hide_element();">hide</button>
<form>
...
</form>

edited Mar 24, 2015 at 14:11

answered Mar 24, 2015 at 8:49

Borja

9911 bronze badges

2 Comments

Piotr Dajlido Over a year ago

This is bad. One submit action per form is a good practice. You also unnecessarily call $('#form_id') 4x times instead of making a handle to the object.

Borja Over a year ago

Yes, right. A handler would make it better. I edit it. I don't get why are you saying this about the submit's. I said it is not a good idea to have more than one submit per form.

Collectives™ on Stack Overflow

call javascript a function in html submit button

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related