Use javascript AND PHP in one 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, Jun 12 '15 at 01: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, Jun 12 '15 at 03:04

score 2 · Accepted Answer · edited May 23 '17 at 12:05

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

Related question here

edited May 23 '17 at 12:05

Community

1
1

answered Jun 12 '15 at 01:53

Gonzalo.-

12,512
5
50
82

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. – ranvel Jun 12 '15 at 02:58

score 2 · Answer 2 · answered Jun 12 '15 at 01:54

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 '15 at 01:54

Sami Kuhmonen

30,146
9
61
74

score 0 · Answer 3 · answered Jun 12 '15 at 04:09

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 '15 at 04:09

Gobea Alcoba Gonzalo

49
2

YaBCK · Answer 4 · 2015-06-12T21:23:55.653

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;
    });
});

Use javascript AND PHP in one tag?

4 Answers4