CODEWITHSUNDEEP
javascriptphpjqueryhtmltwitter-bootstrap
Ronnel Martinez
Ronnel Martinez

Reputation: 165

Multiple "link" submit buttons in one form

I would like to create a form with multiple submit link buttons. I know it can be done by using and specifying the name of <button> or <input type="button"> something like this:

In HTML:

<form action="" method="get">
  Other form elements here...
  <button type="submit" name="activated">Activated</button>
  <button type="submit" name="pending">Pending</button>
  <button type="submit" name="suspended">Suspended</button>
</form>

In PHP:

<?php
if(isset($_GET["activated"])) {
  Activated codes here...
}
elseif(isset($_GET["pending"])) {
  Pending codes here...
}
elseif(isset($_GET["suspended"])) {
  Suspended codes here...
}
?>

I want the submit buttons to be done by using link, not <button> or <input type="submit"> something like this:

<a href="#">Activated</a>
<a href="#">Pending</a>
<a href="#">Suspended</a>

I heard that it can be done by using JavaScript or JQuery but I don't know how, anyone knows?

Update: What I want to happen is when I clicked the "Activated" link for example, I want only to process the logic under isset($_GET["activated"]).

The reason behind:

The reason why I want to have a submit link buttons instead of normal submit button tags is that, I want to use this bootstrap dropdown button style to change the status of user(s) on table:

and it is based on links, so that's why.

PS: Sorry for bad English, not my native language.

Upvotes: 1

Views: 3414

Answers (2)

Tricky12
Tricky12

Reputation: 6820

You could use data attributes on your anchors, then load that attribute into a hidden field to check in your PHP code.

<form action="" method="post">
    <a href="#" class="anchor-btn" data-name="activated">Activated</a>
    <a href="#" class="anchor-btn" data-name="pending">Pending</a>
    <a href="#" class="anchor-btn" data-name="suspended">Suspended</a>
    <input type="hidden" id="actionName" name="actionName" value="" />
</form>

$('.anchor-btn').click(function(e) {
    e.preventDefault();
    $('#actionName').val($(this).data('name'));
    $('form').submit();
});

<?php
    if($_POST['actionName'] == "activated") {
        Activated code goes here
    }
    ...etc.
?>

Upvotes: 1

jstuartmilne
jstuartmilne

Reputation: 4508

Yes you can submit the form using jquery just add a class to your buttons and add a click handler

$(document).ready(function() {

    $( ".buttons_class" ).click(function() {
      $( "#target_form" ).submit();
    });
});

so your buttons will look like this

  <button type="button" name="activated" class="buttons_class">Activated</button>
  <button type="button" name="pending" class="buttons_class">Pending</button>
  <button type="button" name="suspended" class="buttons_class">Suspended</button>

if using anchors

<a href="#" class="buttons_class">Activated</a>
<a href="#" class="buttons_class">Pending</a>
<a href="#" class="buttons_class">Suspended</a>

And in javascript 

$(document).ready(function() {

        $( ".buttons_class" ).click(function(e) {
             e.preventDefault(); //This will stop the default anchor action
       $("#target_form").attr("action", "yourphpfile.php?"+$(this).text()+"=true"); //This will send the text inside the anchor as a GET param. 
          $( "#target_form" ).submit();
        });
    });

However if I were you I would consider using POST instead of GET for this. and do something like this

  $( ".buttons_class" ).click(function(e) {
                 e.preventDefault(); //This will stop the default anchor action
                var paramName = $(this).text(); //get text inside anchor
                $( "#target_form" ).submit(function(eventObj) {
                   $('<input />').attr('type', 'hidden')
                     .attr('name', paramName);
                     .attr('value', "something")
                    .appendTo('#form');
                   return true;
                 }); //Add hidden field
           });

Upvotes: 1

Related Questions