Use javascript AND PHP in one <input> tag?

Question

I feel like I've looked around for the answer for this question, but most of the responses are very hacky: involving javascript that pops in via AJAX, redirects and other ways of modifying the DOM on the fly.

What I want to do is make the submit button disappear when a user submits a document (javascript) and submit the message via mail (php). The code I have is the following:

<form action="" method="post">
...
<input onclick="removeElements()" id="subButton" class="submit" name="submit" type="submit" value="submit">

The php mail function is in the same document.

Here is the removeElements() function:

var el = document.getElementById("subButton");
el.remove();
document.getElementById("thankYouMessage").setAttribute("style", "display:block");

The submit function works without the javascript call, but when I add the onclick="removeElements()" part, then the javascript part starts working, but the php is no longer executed.

I know that there are other methods for doing this, but in this case, I'm actually curious about why this doesn't function as I had planned. By removing the submit button, am I in effect killing the child PHP process mid(or pre)-execution?

Thanks!

because you just remove the Dom so there is no submit event ? If so, I think change el.remove(); to el.style.display="none" for a test. — Gary Liu
– Gary Liu, Commented Jun 12, 2015 at 1:52
I guess I should have mentioned that I tried all of these css tricks to disable the visibility of the id. They don't work. I feel like they remove the button, but then it just comes back fractions of a second later. So the button doesn't disappear and the email isn't sent. I'll look at it more to see if I can update the above with more relevant information. — ranvel
– ranvel, Commented Jun 12, 2015 at 3:04

Community · Accepted Answer · 2017-05-23 12:05:58Z

2

If you add onclick you will have to fire the submit manually.

The other option is add your javascript call code in onsubmit="removeElements()" on the form tag. This way, it will execute your code after executing submit

1 Comment

ranvel Over a year ago

I like this - I didn't know about the onsubmit event listener. I felt like this was progress, but it doesn't work for me.

Sami Kuhmonen · Accepted Answer · 2015-06-12 01:54:09Z

2

Don't remove the button, rather set visible: hidden or display: none for its style. This way it will still be in the document and will work, it just won't be shown.

answered Jun 12, 2015 at 1:54

Sami Kuhmonen

31.4k9 gold badges67 silver badges81 bronze badges

Comments

Gobea Alcoba Gonzalo · Accepted Answer · 2015-06-12 04:09:47Z

0

When you send the form reloads your page so I suggest:

Using Ajax and only delete button on the response, or
Not generate the button when reloads your page.

Jquery Ajax examples: You can see them here api.jquery.com/jquery.ajax/

Regards.

answered Jun 12, 2015 at 4:09

Gobea Alcoba Gonzalo

592 bronze badges

Comments

YaBCK · Accepted Answer · 2015-06-12 21:23:55Z

0

You could simple use the .hide functionality which JQuery gives you. It's very simple to use and very clean.

Example1 using JQuery:

$("#FormID").submit(function(e) 
{
   e.preventDefault();
   // Hide button
   $("#subButton").hide();
   // Display thank-you message
   $("#thankYouMessage").css("display", "block");
});

Example2 using JQuery:

$(document).ready(function() {
    $(".submit").click(function() {
       $("#subButton").hide();
       $("#thankYouMessage").css("display", "block");
       return false;
    });
});

edited Jun 12, 2015 at 21:23

answered Jun 12, 2015 at 21:14

YaBCK

3,0394 gold badges36 silver badges71 bronze badges

Collectives™ on Stack Overflow

Use javascript AND PHP in one <input> tag?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related