Develop Reference

Why isn't my simple Javascript to enable and disable a button based on Recaptcha success & timeout working?

I think I'm going a little mad.
I have a working re-captcha div and submit button:
<div class="g-recaptcha" data-sitekey="LALALALALAL" data-callback="enableBtn"></div>
<br />
<button id="getJSON" type="button" class="btn btn-primary">Save Form</button>
The Save Form button is disabled on page load.
I have the following function:
<script>
function enableBtn(){
var submit = document.getElementById('getJSON');
if (submit.disabled) {
document.getElementById("getJSON").disabled = false;
} else {
document.getElementById("getJSON").disabled = true;
}
}
</script>
The callback works fine for the initial enabling of the button on successful recaptcha response, but when the recaptcha times out the button doesn't get disabled.
As I said, I think I'm going a little mad.

I think that you can use data-expired-callback attribute.
<div class="g-recaptcha" data-sitekey="LALALALALAL" data-callback="enableBtn" data-expired-callback="enableBtn"></div>
<br />
<button id="getJSON" type="button" class="btn btn-primary">Save Form</button>

Event on ok cancel button in JavaScript

I am stuck with a small issue.
<input class="btn btn-home" type="submit" name="discard" id="discard" onclick="return confirm('Are you sure you want to discard changes?')" alt="Discard" value="Discard Changes"/>
$('document').ready(function(){
var subm = "";
$('input[type="submit"]').click(function(e) {
subm = e.target.id;
if(subm == 'discard')
window.location = "http://www.weblink.com/manager.php";
})
});
When user click on button a confirmation box will appear with ok cancel. When user click on ok it will redirect to other page and if user click on cancel then it will stay on this page.
Problem is it is redirecting if user click on cancel. I don't want to redirect the page if cancel button clicked.

Two problems here:
You're trying to combine inline and external JS, which is always a bit messy
You're not suppressing the native behaviour of submit buttons, which is to submit a form (which I assume you have in your HTML, even though it's not shown). In fact, you don't even need the button to be of type submit.
HTML:
<button class="btn btn-home" name="discard" id="discard">Discard Changes</button>
JS:
$('#discard').on('click', function(evt) {
evt.preventDefault(); //don't submit the form, which a button naturally does
if (confirm('Are you sure you want to discard changes?'))
location.href = 'http://www.weblink.com/manager.php'; //redirect only on confirm
});

Put confirm dialog inside onsubmit listener instead. No need to use click listener.
<form onsubmit="return confirm('whatever your confirmation message')">
<input class="btn btn-home" type="submit" name="discard" value="Discard Changes"/>
</form>

You need to remove the inline script,
and the modification to the code should be something like the below -
$('document').ready(function()
{
var subm = "";
$('input[type="submit"]').click(function(e) {
var isConfirmed = confirm('Are you sure you want to discard changes?');
if(isConfirmed){
subm = e.target.id;
if(subm == 'discard'){
window.location = "http://www.weblink.com/manager.php";
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-home" type="submit" name="discard" id="discard" alt="Discard" value="Discard Changes"/>

call javascript a function in html submit button

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 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()

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>

How to click on an input type"submit" button without submiting the whole form

I am trying to click the following line of code:
<input title="Add To Cart" name="pdp_addtocart" value="Add To Cart" type="submit" class="active_step">
I have tried the .click() form and it doesnt work. I need the code in javascript.

With Jquery:
var my_btn = $('input[name="pdp_addtocart"]');
my_btn.click(function(event){
event.preventDefault(); //This avoid the default behavior of the button
//Your Stuff
});
In case your form still sending add this line:
$('form').submit(function(event){
event.preventDefault(); //This avoid the behavior of sending the form
});

Try adding the onclick event to the button:
<input onclick="return false;".... />
return false in the event will halt the form submission.
or using pure javascript:
theButton.onclick = function() {
return false;
};
Edit:
jQuery version:
$theBtn.click(function() {
return false;
});

Does it have to be a <input type="submit" />?
You could use a <input type="button" /> instead.

Accessing HTML form elements with same name from javascript

I am using the following solution (How to best implement Save | Save and Close | Cancel form actions in ASP.NET MVC 3 RC) of multiple submit buttons to allow cancel and save from my MVC form:
<form action="Xxxx" method="post" onsubmit="return validatePost()">
...
<input type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
With javascript called onsubmit:
function validatePost() {
if(Blah blah){
return true;
}
}
I only want to do this javascript validation if 'Save' is clicked, but cannot tell which button was clicked from the javascript.
I tried getting the actionType value using document.forms[0].elements["actionType"].value but could not, as there is more than one item named actionType on the form.
Can anyone help?
Thanks

You can use id (http://jsfiddle.net/7p5N5/)
<form method="post">
<input id="save" type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
function validate() {
alert('Validate');
return false; // cancel click, true will submit
}
$("#save").click(function () {
return validate();
});
If you don't want to use id, you can use $('input[name="actionType"][value="Save"]') to select the Save button

Are you able to listen to the onclick event of only the 'Save' input and have it use your validatePost function.
Then you could have a different function for the onclick of 'Cancel' to do appropriate action.