Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Lucian Rotari
Lucian Rotari
12,007 Points

Ajax send value of button with name attribute

Hi everyone, I have simple HTML form and a PHP script, so when HTML form has been submited PHP script checks if form button with name="do_submit" has been clicked

For example 

<!--  HTML FORM -->
<form id="userForm" method='POST' action='myscript.php'  accept-charset='UTF-8'>

<input type='text' name='name' placeholder='Your Name'> 
<input type='text' name='surname' placeholder='Your Surname'> 

<button type='submit' name="do_submit">Submit form <button>

<?php 

// myscript.php file


if(isset($_POST['do_submit']))
{

// Do something with the form 

}

?>

So now I want to submit this form without reloading the page. I user jQuery ajax to send the data, I can send input data (name and surname) to the php script whit .serialize() method but I can't sent the button data.

Here is my ajax code it may be useful to understand my problem :)

$("userForm").submit(function(e){
    e.preventDefault();

    $.ajax({
       type: "POST",
       data: $(this).serialize(),
       url: "path/to/myscript.php"
    }).done(data){
      // Do something with the data 
    };


});

2 Answers

Daan Schouten
Daan Schouten
14,454 Points

Hi Lucian,

I think the reason things aren't going as planned is that you're taking a slightly unconventional approach. If I understand you correctly, you now wait for the user to click a button, check whether the button has been clicked with PHP, and then send the form with Jquery/Ajax?

Why would you include the middle step? Wouldn't it be easier to attach your Jquery script to the button, so that it executes immediately? There is no need to check whether the button has been clicked if the script only executes if it has been clicked, right?

Also, make sure to close your html tags -> <button> ... </button>, as well as a closing </form> tag.

Best, Daan

Lucian Rotari
Lucian Rotari
12,007 Points

Hi Daan, yes I know that is not the only or the best way to do this, I’ve resolved this problem in another way but I used to check click button with php when I didn’t use JavaScript or Ajax and that’s easily for me. I just wanted to know (just for me) if I could send the button name value via ajax.

About the script tags, it is not a copy paste from my original script, I just tipped it quickly and so I made mistakes, but thanks anyway :)

Daan Schouten
Daan Schouten
14,454 Points
Daan Schouten
Daan Schouten
14,454 Points

Fair, I hope it works out then! To be honest, I wouldn't put too much effort into learning / practicing Jquery. It used to be popular, but all surveys point to it being overtaken by various other libraries / frameworks in terms of functionality. In many ways, I think learning it is a dead end unless you want to apply to / work for projects where knowledge of jquery is an explicit asset.

If you're thinking of building a website yourself, I would think twice about jquery. I've included a link to a great article about modern front-end development that should give you an idea of 'useful' frameworks and libraries.

https://medium.com/tech-tajawal/modern-frontend-developer-in-2018-4c2072fa2b9c

Happy coding!

Lucian Rotari
Lucian Rotari
12,007 Points

Thanks, always happy to read good articles on medium.