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?
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
submitbuttons in a<form>, you can distinguish between them by usingvalueattribute, but still in my opinion it's better to keep clean design with one submit per form.don't repeat
jQueryfetching calls. make a handle of a element:var myForm = $('myForm');then use it like this e.g:myForm.show()
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> 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> 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.
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.
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> 
submit action per form is a good practice. You also unnecessarily call $('#form_id') 4x times instead of making a handle to the object.
$("form")indicates that you are usingjQuerymy friend :) but I see your problems are solved.