Reputation:
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!'); }
});
}
});
});
Upvotes: 1
Views: 56
Reputation: 5953
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>
Upvotes: 2
Reputation: 2002
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!'); }
});
}
});
Upvotes: 0