Creating Multiple jQuery Selectors

Question

So like other questions on here mine is a small bit different. I was on a few months break of coding so my mind has been melted. Could anyone help?

So I have multiple tags with the ID: #Feedback{1,2,3,4 e.t.c} The numbers at the end go on forever. I need to use 1 block of code to be able to execute Jquery on. The thing is, The reason I need this is because I have a custom Attribute Tag called "game", Where I use PHP to apply different Game Titles into this attribute tag for each of the Feedback tags. Example: #Feedback1's game="minecraft" #Feedback2's game="destiny" e.t.c.

I have this as I need to apply each of the different feedback tags' game to a Ajax form. But how? This is something thats pretty hard to explain.

Code im trying to do this on:

$('#Feedback').confirm({

    theme: 'supervan',
    title: 'Feedback',
    content: '<form id="FeedbackForm"><input name="feedback" type="text" class="form-control" style="color: #000;"><input name="username" value="<?= $_SESSION['username']; ?>" hidden><input name="game" value="{GAME TITLE HERE}" hidden></form><span class="help-block m-b-none" style="color: #fff;">If you have issues use the Report Issue button.</span>',
    confirm: function(){

        $.ajax({

            //Options
            type: "POST",
            url: "feedback.php",
            data: $("#FeedbackForm").serialize(),

            //If it posted Successfully, Alert the user;
            success: function(data) { $.alert('Feedback Saved!'); },
            error: function() { $.alert('Oh No! An Error!'); }

        });
    }

});

feedback.php:

<?php

file_put_contents('t.txt', $_POST['feedback'].$_POST['username'].$_POST['game']);

?>

The Feedback Tags/Buttons:

<th>
    <a id="Feedback1" game="{PHP For a Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

<th>
    <a id="Feedback2" game="{PHP For a DIFFERENT Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

EDIT: Ok so it seems doing Feedback{Numbers} isnt needed as the $('[class^=Feedback]').on('click', function() { works fine (I moved from id to class).

But when I click it once nothing happens click it again it opens 1 time click it again it opens 2 times 1 click, click again and it opens 3-4 times in one click its rlly strange.

Current Code:

//Feedback Button
$('[class^=Feedback]').on('click', function() {

    $(this).confirm({

        theme: 'supervan',
        title: 'Feedback',
        content: '<form id="FeedbackForm"><input name="feedback" type="text" class="form-control" style="color: #000;"><input name="username" value="<?= $_SESSION['username']; ?>" hidden><input name="game" value="' + $(this).data('game') + '" hidden></form><span class="help-block m-b-none" style="color: #fff;">If you have issues use the Report Issue button.</span>',

        confirm: function(){

            $.ajax({

                //Options
                type: "POST",
                url: "feedback.php",
                data: $("#FeedbackForm").serialize(),

                //If it posted Successfully, Alert the user;
                success: function(data) { $.alert('Feedback Saved!'); },
                error: function() { $.alert('Oh No! An Error!'); }

            });

        }

    });

});

$('[id^="Feedback"]').each(function(){ var game = $(this).attr('game'); });? — faino
– faino, Commented Mar 17, 2016 at 23:29
@faino Its not automated so I dont think that would work. Like the user clicks a Feedback Button and depending on which one they click it would be a different number at the end. So lets say I click the 3rd feedback button (#Feedback3) I need the jQuery ajax form to grab the game from Feeback3 then post the form. Any ideas? — user6079847
– user6079847, Commented Mar 17, 2016 at 23:32
@ShinyMK $('[id^="Feedback"]').on('click', function(){ var game = $(this).attr('game'); /* do AJAX */ });? — faino
– faino, Commented Mar 17, 2016 at 23:38
if you have Feedback class for all of the elements, you use $('.Feedback').on(... and can you insert console.log("clicked") so you can track in the console what is happending there — The Process
– The Process, Commented Mar 18, 2016 at 0:13

The Process · Accepted Answer · 2016-03-18 00:33:59Z

2

You can do it like this: in the game variable will be stored current clicked game attribute

$('[id^=Feedback]').click(function() {

  var game = $(this).attr('game');
 // $.confirm({
   // theme: 'supervan',
   //  title: 'Feedback',
   //...more code
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<th>
  <a id="Feedback1" game="{PHP For a Game Title}" style="height: 100%;">
    <div class="col-sm-12 center" style="background-color: #1AB394;">
      <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
    </div>
  </a>
</th>

<th>
  <a id="Feedback2" game="{PHP For a DIFFERENT Game Title}" style="height: 100%;">
    <div class="col-sm-12 center" style="background-color: #1AB394;">
      <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
    </div>
  </a>
</th>

edited Mar 18, 2016 at 0:33

answered Mar 17, 2016 at 23:39

The Process

5,9533 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user6079847 Over a year ago

Seems to work fine but how do I actually start the .confirm? It needs to be linked to whatevers being clicked for it to work (Its jquery-confirm btw).

The Process Over a year ago

you can do it by $(this).confirm inside that event handler, as this will refer to the clicked element

user6079847 Over a year ago

Alright but in the Confirms Content how do I actually like get it to grab the game. On the other answer he talks about data- which definitely seems like the good way to go but using ' + {Whatever} + ' in NP++ makes the formatting colours look off making me think that its not correctly formatted.

The Process Over a year ago

you mean this part? value="{GAME TITLE HERE}

user6079847 Over a year ago

Ok very strange. If I remove the $(this) from the .confirm and just put $.confirm and instead of .on('click', function() { doing .click(function(){ it makes it work fine :D Please edit your answer to be the same as my last edit on the Original Post but just change the things I explained in this comment. Thanks!

|

toomanyredirects · Accepted Answer · 2016-03-17 23:41:29Z

0

Personally, I would use a class selector on the individual buttons rather than an ID, as it's easier to select with jQuery as one block, then I'd change your game attribute to be a data- attribute instead, which you can then access with jQuery.data.

You'd end up with something like this for the button HTML:

<th>
    <a id="Feedback1" class="feedback" data-game="{PHP For a Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

<th>
    <a id="Feedback2" class="feedback" data-game="{PHP For a DIFFERENT Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

and this for the jQuery:

$('.feedback').confirm({
    theme: 'supervan',
    title: 'Feedback',
    content: '<form id="FeedbackForm"><input name="feedback" type="text" class="form-control" style="color: #000;"><input name="username" value="<?= $_SESSION['username']; ?>" hidden><input name="game" value="' + $(this).data('game') + " hidden></form><span class="help-block m-b-none" style="color: #fff;">If you have issues use the Report Issue button.</span>',
    confirm: function(){

        $.ajax({

            //Options
            type: "POST",
            url: "feedback.php",
            data: $("#FeedbackForm").serialize(),

            //If it posted Successfully, Alert the user;
            success: function(data) { $.alert('Feedback Saved!'); },
            error: function() { $.alert('Oh No! An Error!'); }

        });
    }

});

answered Mar 17, 2016 at 23:41

toomanyredirects

2,00216 silver badges23 bronze badges

3 Comments

user6079847 Over a year ago

The $(this).data('game') doesnt work seems to be because of the $(this) but im unsure.

user6079847 Over a year ago

It works when I use .on('click', function() { Thanks! Still has issues but not asking you for help as im mainly using the other guys answer but I moved from ids to class as you suggested it helped a ton.

toomanyredirects Over a year ago

No problem, happy to help.

Collectives™ on Stack Overflow

Creating Multiple jQuery Selectors

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related