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?

Answer 1

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>

Answer 2

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 eg: myForm.show()

Answer 3

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>

Answer 4

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.

Answer 5

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.

Answer 6

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>