CODEWITHSUNDEEP
javascriptphpjquery
rockyraw
rockyraw

Reputation: 1145

Automatically add a certain class, whenever <Form> code contains a certain value?

I want to add a special class to each form that contains the word special as part of its action URL.

But I have many forms, and I can't think of an automated way to do this.

The only way I came up with was to create the following code, but I will have to create such code for each and every form, using a different index number:

<?php
$case1 = "special"; 
$case2 = "none"; 

if($case1 == "none") { 
  $class1 = ""; // don't add any class
}
else {
  $class1 = "effect"; // add `effect` class
}

if($case2 == "none") { 
  $class2 = ""; // same goes here
}
else {
  $class2 = "effect"; // and here
}
?>

HTML:

   <form action="/go/<?= $case1 ?>" method="POST" target="_blank">
   <input type="submit" class="<?= $class1 ?> general-class" value="submit">
   </form>
   <form action="/go/<?= $case2 ?>" method="POST" target="_blank">
   <input type="submit" class="<?= $class2 ?> general-class" value="submit">
   </form>

OUTPUT:

   <form action="/go/special" method="POST" target="_blank">
   <input type="submit" class="effect general-class" value="submit">
   </form>
   <form action="/go/none" method="POST" target="_blank">
   <input type="submit" class="general-class" value="submit">
   </form>

Is there any automated way to do this?

Basically I have two types of forms, one should be opened using a jquery plugin (henace the special class), and the other should open in a normal way.

My way to differentiate between them is to insert the $case[i] variable into the action url, as this is something that I have to do either way.

Perhaps there's a complete different way to achieve this, I don't know.

EDIT:

Real Form is generated mostly manually, with this code:

    <form action="/go/<?= $item ?>/<?php echo $case1 ; ?>" method="POST" target="_blank">
      <input name="a" type="hidden" value="<?php echo $a; ?>"/>
      <input name="b" type="hidden" value="<?php echo $b; ?>"/>
      <input name="c" type="hidden" value="<?php echo $c; ?>"/>
      <input name="d" type="hidden" value="<?php echo $d; ?>"/>
      <input type="submit" class="<?= $class1 ?> general-class" value="Click Me"></form>

(all variables are being given values at the start of the PHP block you see above)

Upvotes: 1

Views: 55

Answers (1)

random_user_name
random_user_name

Reputation: 26150

There's two ways - PHP and jQuery. Based on your code, we don't have enough info to know if we can use the PHP way or not, so here's the jQuery way:

// wait until the document is ready
jQuery(function($) {
    // find all forms that have "special" in the action
    $('form[action*="special"]').each(
        function() {
            // within the form, find the submit button, and add the "effect" class
            $(this).find('input[type="submit"]').addClass('effect');
        }
    );
});

And, the shorter / less verbose way:

jQuery(function($) {
    // find all forms that have "special" in the action, find their input, and add the class
    $('form[action*="special"] input[type="submit"]').addClass('effect');
});

The PHP Way

So, to do this in PHP, I would recommend writing a simple function, then calling it.

function get_class( $slug ) {
    $class_map = array(
        'special' => 'effect',
        'none'    => '',
        // .. you could add others here if appropriate

    return ( isset( $class_map[ $slug ] ) ) ? $class_map[ $slug ] : '';
);

Then you could use it in your php like so: 

<form action="/go/<?= $item ?>/<?php echo $case1 ; ?>" method="POST" target="_blank">
  <input name="a" type="hidden" value="<?php echo $a; ?>"/>
  <input name="b" type="hidden" value="<?php echo $b; ?>"/>
  <input name="c" type="hidden" value="<?php echo $c; ?>"/>
  <input name="d" type="hidden" value="<?php echo $d; ?>"/>
  <input type="submit" class="<?= get_class( $case1 ); ?> general-class" value="Click Me"></form>

While that may not seem like a big value, if you started applying those concepts to your code, you would quickly see the value start adding up.

Upvotes: 2

Related Questions