make button disapear when clicked even when visited next time - javascript

I have a problem i am making a website with a button on it.
The problem is that i only want this pressed once by the user who visits the site.
So when ever the user refreshes or comes back it isn't possible to press it again.
I think i should use a combination of PHP with AJAX but unfortunally i am not good enough to get it together. In the hope somebody here can push me in the right direction :)
the html code:
<form action="" method="POST">
<input id="banana_button" type="submit" name="button_press" value="Add banana's!">
</form>
the javascript:
$('input[name="button_press"').click(function(){
$('#banana_counter_text').append($banana+1);
$(this).attr('disabled',true).css('width','180px').attr('value','thanks for adding a banana');
});
What i want to get is that when they pressed the button next time they visit they won't see the button.
Is it possible and how could i best do this. I hope you guys can help me
Update:
Well i was trying the last few days to resolve this problem and i got it working.
I am using a session_cookie with a custom name. Everytime the site is loaded it checks if that cookie is available if not than it wil show the button. Else it will delete the whole button.
the code looks like this:
PHP
//this is what checks everytime if the cookie is set
if (isset($_COOKIE['banana_added'])) {
//code for disabling the button
}
//this is what makes the cookie and checks if the submit button is pressed.
//because people where wondering how the data is stored. It is just a simple XML file
if(isset($_POST['buttonsubmit'])){
/*when submit is pressed */
session_name("banana_added");
session_start();
$xml = simplexml_load_file('../banana.xml');
$prev_count = $xml->banana_count;
$new_count = $prev_count +$_POST['buttonsubmit'];
echo $prev_count;
echo $new_count;
$xml->banana_count = $new_count;
file_put_contents('../banana.xml', $xml->asXML());
header("location:../landing.php");
Thank you all for your help. I don't know how i can close this thread ?
This is the solution for this particular problem

In order to remember that change you should either put that value in COOKIE/SESSION or in DATABASE. The second variant ofcourse is preferd.
So lets say in example you have table called buttons and in it you have a column 'checked' with type tinyint (accepting values 0 and 1) and default value of 0.
In your html you should do this:
<button <?php ($thisButtonQuery->checked == 'checked')? 'disabled' : '';?>>button text </button>
Regards and i hope i resolved your roblem! :)

Well i was trying the last few days to resolve this problem and i got it working. I am using a session_cookie with a custom name. Everytime the site is loaded it checks if that cookie is available if not than it wil show the button. Else it will delete the whole button.
the code looks like this:
PHP
//this is what checks everytime if the cookie is set
if (isset($_COOKIE['banana_added'])) {
//code for disabling the button
}
//this is what makes the cookie and checks if the submit button is pressed.
//because people where wondering how the data is stored. It is just a simple XML file
if(isset($_POST['buttonsubmit'])){
/*when submit is pressed */
session_name("banana_added");
session_start();
$xml = simplexml_load_file('../banana.xml');
$prev_count = $xml->banana_count;
$new_count = $prev_count +$_POST['buttonsubmit'];
echo $prev_count;
echo $new_count;
$xml->banana_count = $new_count;
file_put_contents('../banana.xml', $xml->asXML());
header("location:../landing.php");
Thank you all for your help.
This is the solution for this particular problem

Related

How do i add a form submission counter?

so I'm working on a taking a pledge page and I was wondering how can i implement a counter on the page when a user has submitted the form. For instance,
I want to have it display as this.
[ Thank you for taking your time to take the pledge. So far, 5 people have pledged.]
then if another user submitted the form, then it'll add 1 to the counter.
Thank you all <3
I think adding some PHP code as follows, on the same page as your javascript/html should work. Just note that this should be above all html.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$counter = isset($_POST['counter']) ? $_POST['counter'] : 0;
if(isset($_POST["button"])){
$counter++;
echo $counter;
}
}
This is essentially a button click counter, so anytime a button is pressed the count will increment. When a form is submitted I'm assuming a button is pressed.

Need to check value of hidden input field related to clicked element (multiple with same name)

Title isn't that clear, so let me see if I can explain what I'm doing.
I'm listing off users' posts, and have a like/comment button with those posts.
What I need to do, is capture when the like button is clicked (<span> tags), and then grab the post id from the hidden input field, and use that to post to the PHP script.
The PHP is doing all of the checking for if they're friends, privacy level is correct, etc. before actually submitting the like to the database, but I am currently just having the javascript/jquery be generated when the post is shown (naming each js variable/DOM element according to post id), but that's not very efficient and looks messy when viewing the source (But, it's the only way I can get it to work).
I want to be able to use an external javascript file to check when just the like button is clicked, and know what post that is being liked, and work that way.
I've been looking into this for quite some time, and it's to my understanding that this might work, but I have had no luck. I'm generating multiple posts on one page using foreach() loop, so the names/ids/classes of the elements are the same.
For a little better understanding, here's an example of what a post might look like:
<div class="feedPost">
<img src="#" class="feedProfile"/>
FirstName LastName
<div class="feedPostBody">Hello, world!</div>
<input type="hidden" value="24772" name="feedPostID">
<span class="feedLikeButton">Like</span> | Comment | 2 mins ago
</div>
and, using javascript/jquery, I want to be able to do something like this in an external js file:
$('.feedLikeButton').on('click',function(){
var post_id = 0; //I need to get the ID from the post that the like button is related to.
//If I just did $('.feedPostID').val() it wouldn't work
$.post("https://mysite/path/to/like.php", {post: post_id}).done(function(data){
if(data == "success"){
//This will set text from "Like" to "Unlike"
//Again, I can't just do $('.feedLikeButton') to access
//I guess I could do this.innerHTML? Would still need to access feed post id
} else {
//Probably will just flash error to user if error, or something similar
}
});
});
You should get the like button
var likeButton = $(this);
Then get it's container
var container = likeButton.parent();
Then find the hidden field
var idInput = container.find('[name="feedPostID"]');
Then get it's value:
var id = idInput.val();
With all these references you can do whatever you want.

AutoIt using _IEFormElementGetCollection

I am trying to select a button and submit by index instead of by name in AutoIt. The reason why I can't use _IEFormElementGetObjByName is because there are two buttons on the page, and they both have the same name when I inspect element:
Button 1: <input type="submit" name="fsubmit" value="New Upload">"
Button 2: <input type="submit" name="fsubmit" value="Return to Login Page">
I need to differentiate between the two when selecting one or the other. I'm fairly sure I am supposed to be using _IEFormElementGetCollection to select the button by the form element index number. If there is another way that will work, I'm open to suggestions as well.
Thanks!
Edit: Here's what I ended up doing, it seems to work fairly well.
Local $oIE = _IEAttach("WEBSITE NAME")
Local $oForm = _IEFormGetCollection($oIE, 0)
; _IEFormElementGetCollection 4 is New Upload, use caution!
Local $oSubmit = _IEFormElementGetCollection($oForm, 4)
; Set to focus only for now, when ready to really upload, change "focus" to "click"
_IEAction($oSubmit, "focus")
_IELoadWait($oIE)
Most secure way in this situation will be,
Local $oInputs = _IETagNameGetCollection($oIE, "input")
For $oInput In $oInputs
if $oInput.name == "fsubmit" And $oInput.value == "Return to Login Page" Then
; your code here
Endif
Next
Or, as you suggested,
_IETagNameGetCollection($oIE, "input", 1); returns second input

cakephp - Javascript

We are working on an application using the CakePHP framework
Basically, its a questionnaire application and it has a few dependant questions, i.e. based on a response to a specific question, it needs to show or hide the next one
For e.g.
Question: Are you married? Yes/No
If the user selects Yes, then using javascript the next question gets displayed for user input
Question: Spouse's name
Saving this information is fine, but when editing, when populating the form, we would want to be able to display the fields for which user has inputted data - in this case, it needs to show the field that has the spouse's name
Since by default we are hiding the spouse name field, when editing, it doesn’t display the field, even though there is a value to it
Is there some way that CakePHP can handle this or does it require us to write some javascript to take care of this?
Thanks in advance.
CakePHP does not manage this for you. While CakePHP is very powerful and a great framework, it will not write this kind of logic for you. You must write it.
I would suggest making the EDIT screen different from the ADD screen. Build the list of values from the database and display the fields that have values (and include any empty fields that should require values).
Keep in mind reusable does not necessarily mean that all CRUD actions fit into the same view.
Like others I advise you use differents EDIT and ADD screens.
But you can try make it with Javascript like this:
<script>
function enableDisableField(targetFieldId){
var targetField = document.getElementById(targetFieldId);
var checkbox = event.target;
console.log(checkbox.checked);
if (checkbox.checked){
targetField.disabled = false;
targetField.value = "empyt";
}else{
targetField.disabled = true;
targetField.value = "empyt";
}
}
</script>
<label><input type="checkbox" onchange="enableDisableField('married')"/> Merried</label>
<?= $this->Form->input('married',['label' => false, 'disabled']); ?>
It works well for ADD, but if you and EDIT you have to change de disable value according a field value:
<label><input type="checkbox" onchange="enableDisableField('married')"/> Merried</label>
<?= $this->Form->input('married',['label' => false, !isset($user->married) ? 'disabled' : '' ]); ?>

jQuery checkbox script as facebook invite friends window

I'm looking for a jQuery script or idea on how to create a similar window to the one facebook uses when you invite friends to an event.
So basically a dialog window that has a list of people inside and when you select your friends it changes the background color and checks the checkbox of that friend so when they submit the form I can collect the data.
Thanks,
How about something like this? Oversimplified, but this should get the point across...
Markup:
<div class="member">
<span class="member_name">Mike</span>
<input type="checkbox" class="member_checkbox" />
<input type="hidden" value="002" class="member_id" />
</div>
Member Select javascript:
// .member-selected would set a new background color
$(".member").click(function() {
$(this).addClass("member-selected");
// Find the checkbox
var checkbox = $(this).find('.member_checkbox');
// If the checkbox is checked, uncheck it, and
// if it's not, then check it
if( $(checkbox).attr("checked") != true) {
$(checkbox).attr("checked", true);
} else {
$(checkbox).attr("checked" false);
}
});
Form submission javascript:
// Create an array to hold ID numbers to submit
var add_members = [];
$(".member").each(function() {
if( $(this).find('.member_checkbox').is(":checked") ) {
add_members.push( $(this).find('.member_id').val() );
}
});
You would end up with an array of member IDs that you could then post using AJAX.
** EDIT **
In the click function (see above) there should be additional lines that check or uncheck the checkbox based on its current state.
EDIT: I made a JSBIN out of Mike's suggestion. May help you solve your problem. When a checkbox is clicked its class is alerted then changed (member-selected is added or removed, I'm using toggleClass()) and then its class is alerted again. Check it out: jsbin.com/uxuxu3/4/edit
I don't know how facebook's 'invite friends to an event' window looks these days, but I believe you will find Facebox a similar modal. Check Facebox and other, perhaps even better options, at 19 jQuery Modal Boxes to improve your UI.

Categories

Resources