How can automatically click on an hidden submint input tag when the user click on another shown input tag?

Question

I am absolutely new in JavaScript and I have the following problem.

For some reason in a web page I have 2 input tag having type=submit , these:

<input type="submit" onclick="return myTestFunction();" value="Submit" id="submitEventButton">

<input id="submitButton" type="submit" style="display:none" onclick="return validateForm();" value="Submit" name="action:projectCreationAction">

As you can see the second one is hidden by the use of style="display:none"

Clicking on the first one I can enter into the myTestFunction() JavaScript method (that actually simply perform an alert).

I need to do the following thing: when the user click on the first button (the one having id="submitEventButton" ) automatically the hidden second button have to be clicked.

How can I do it?

Thanks!

Answer 1

You could place the following inside your myTestFunction , after the alert:

$('#submitButton').trigger("click");

Below is snippet you can run to check this out:

 function myTestFunction(){ alert('hi from submit'); $("#submitButton").trigger("click") ; } function validateForm(){ alert('hi from validate form'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="submit" onclick="return myTestFunction();" value="Submit" id="submitEventButton"> <input id="submitButton" type="submit" style="display:none" onclick="return validateForm();" value="Submit" name="action:projectCreationAction"> 

Answer 2

Instead of simulating a click or even having a second hidden submit button at all, you can just call the function that the second button is hitting from the first function:

function myTestFunction() {
    // code here with alert
    validateForm();
}

function validateForm() {
    // code here
}

functions calling other functions is better practice than buttons triggering other click events.

this way is also pure javascript (no jquery) since i dont think with the implementation of your input code you are currently using jquery.

Answer 3

Your question is not so clear about it, but it seems like you don't really need the second button at least for what you're describing. What you can do to achieve what you're after is add a call to validateForm() in the body of myTestFunction .

If you do not want to change the function for some reason, you can also change the first button like so:

<input type="submit" onclick="myTestFunction();validateForm();" value="Submit" id="submitEventButton">

It ain't pretty, and note that i assume here that myTestFunction doesn't return something important otherwise you can't discard the return as i suggested here, but other than that it would probably do the trick.