Disable button by clicking button - javascript

So I was trying to disable a certain button on the entire page and every page onwards by clicking the same button. Meaning the user can only use it once. Now it just doesn't seem to work out :/ I've tried to create a variable and make this variable occur on every single page with $SESSION, and if the variable does not equal to '' it would disable the button, but it doesn't work.. The button is on page A and needs to be disabled on page A when the user reloads the page/submits a form. My code:
My session start:
<?php
session_start();
$hulplijn = $_SESSION['hulplijn'];
$_SESSION['hulplijn'] = $hulplijn;
?>
My button that disables the button once it is clicked:
<script>
function get_accept(input)
{
alert(input);
}
function changeText(el)
{
el.innerHTML = 'Al gebruikt!';
}
</script>
<button onclick="changeText(this); get_accept('<?php echo $hulplijn;?>'); this.disabled='disabled';">Hulplijn</button>
Anyone that can help me out here? Would be much appreciated!

So the thing I wanted to do isn't possible, too bad.. Instead I was better of just allowing users to use the button more than once.

Related

php - prevent back button

This is a part of my payment.php code.
$f=1 when the values got stored in database correctly.
if($f==1){
echo "<script>alert('Rooms Successfully Reserved')</script>";
echo "<script>window.location.replace('home.php')</script>";
}
Now we all know window.location.replace() replaces the current page, removing the previous one from the back button history.
But the back button is working.
I do not want the user to press the back button and enter the payment.php again.
So, what should i do with it?
Same goes for my login.php page, it redirects to home.php but again one can press back button and get to login.php.
How should i prevent it?
I even tried this:
window.history.forward()
But even it isn't working.
Please help
I think you can work with the Unload Event and the History Function.
<script type="text/javascript">
function back() {
window.history.forward();
}
// Force Client to forward to last (current) Page.
setTimeout("back()", 0);
window.onunload = function () { null };
</script>
Add this before your Body Tag gets closed.

SharePoint 2013: Redirect to different page after cancel button is hit

I am using SharePoint 2013. I have a custom list form for Feedback and Suggestions. Currently, to access the form, a user clicks on a link that takes them directly to the New Item form.
What I am trying to accomplish:
- When a user clicks save, they are taken to a "Thank You" page.
- When a user clicks cancel, they are taken back to the home page.
Things I have done:
- On the link to the new form, I have added "?source=(URL for Thank You Page" - This accomplished the Save button task, but not the Cancel button task.
What I need help with:
I need to know how to override the default cancel button. Right now it also redirects to the Thank you page. I need it to go to the Home Page.
The only thing I can do to edit the form is add code snippets.
Thanks in advance!
SharePoint out of the box behavior is to send the user to the url in the Source querystring parameter WHEN THEY CLICK EITHER THE SAVE BUTTON OR THE CANCEL BUTTON on the new form.
Since the OP is experiencing different behavior, it is possible (maybe even likely) that someone has added code to the master page of her site to override the oob behavior.
Anyone coming here looking for how to redirect the Cancel button, PLEASE PLEASE PLEASE check the behavior in your own site before spending hours hunting for some esoteric solution like one of my user's did. I showed him how to use the source parameter, and we solved his issue in <1 minute.
To accomplish this I did the following:
To redirect after Save button is pushed:
Create a Thank You page and copy the URL. Save for Later.
Add "?source=" then the url from step 1 to the end of the link that takes you to your new item page.
EX: https://NewItemForm.aspx?Source=https://ThankYou.aspx
That will redirect to the Thank you page, if you hit save or cancel.
To Fix the Cancel button, do the following as well:
Go to your list > Form Web Parts (in the ribbon) > Default New Form
Insert Script Editor Web Part
Add the following code:
<script>
function goToByePage(){
window.location.assign("https://SitePages/Home.aspx");
}
function overrideCancel()
{
//Custom input button
var input = document.createElement('input');
input.type = "button";
input.name = "Cancel";
input.value = "Cancel";
input.id = "custominput";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].parentNode.appendChild(input);
document.getElementById("custominput").setAttribute("class", "ms-ButtonHeightWidth");
//Hiding already implemented cancel buttons
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[0].style.display = "none";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].style.display = "none";
//this is main logic to move history back
document.getElementById("custominput").setAttribute("onclick", "goToByePage();");
}
_spBodyOnLoadFunctionNames.push('overrideCancel');
</script>
<style>
#Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
{
display:none;
}
</style>
This will remove the upper cancel button that was in the ribbon, and make the cancel button on the form take you back to whatever page is listed in the goToByePage function.
The code for this comes from 2 different sources:
https://sharepoint.stackexchange.com/questions/190776/basic-custom-list-how-to-redirect-to-different-page-on-cancel-and-on-save-butto
https://social.msdn.microsoft.com/Forums/office/en-US/5036ab40-2d9b-4fe5-87a2-5805268eea07/how-to-override-behavior-of-the-cancel-button-in-the-ribbon-and-the-form?forum=sharepointdevelopment
Hope this helps someone else in the future!

How to clear the text of asp:TextBox when user again open the pop up window?

I follow How to clear a textbox using javascript but my scenario is little change. I have a login button and when user click on login a pop-up window is open. He fill the textbox and for some reason he go back to main page. When he again come to login popup window he previous value is not cleared. May be this is because the page is not loaded. And I do not want to load page again. I want to use JQuery/JavaScript to remove the entered text. I has idea that I write code inside Close button but I don't know how to clear the textboxes. Please help.
Here is the code, scenario is that I used popup for login and sign up. In login popup there is link "Don't have login Id" when user click on it the sign up pop up with form is open.
Don't have Login Id
And the JavaScript method is
<script type="text/javascript">
function function_deletePreviousData(){
document.getElementById("signUp").value = "";
}
</script>
But nothing happened. I think this is because I don't give element id, I just give id of element which I used to land on sign up pop up form. Any idea for clear all form without accessing all elements and give it null value.
Instead of including code in close button click event, we should write code in login button click.This is one of my suggestion.
Try this once:
Javascript:
<script type="text/javascript">
function LoginButtonClick() {
document.getElementById`("TextBox_Id").value = "";
}
</script>
JQuery:
jQuery("#LoginButton_Id").Click( function()
{
$('#TextBox_Id').val("");
} );
Finally I find the method in JQuery to reset all fields. Just Trigger reset.
$('#form').trigger("reset");
Thanks all for help.

Have a pop up window with checked box list when click on an icon

I have a table in my page, for which I get the data from database. In some cells I have an edit icon.I want when users clicks on it, they see a pop up window.
In the pop up window, I want to show three option(check boxes), that user can select only one of them, and then click on OK button, and return the value of the selected option to the data variable.(as you see in the code below)
I have to mention, that right now when the user clicks on the edit icon, some information are sent to another file. Because I need to update database.
$(".SSO").click(function () {
var id = $(this).attr("data-id");
var data= HERE I NEED TO GET THE VALUE OF THE SELECTED OPTION IN THE POP UP WINDOW
}
So SSO is the value of class attribute for the image icon. data-id value helps to update the correct record in the database.
Right now this is the code in one file:
$(".SSO").click(function()
{
var id = $(this).attr("data-id");
// open popup window and pass field id
window.open('sku.php?id=' + encodeURIComponent(id),
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
and this is the code in sku.php
<script type="text/javascript">
function sendValue (s){
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, s);
window.close();
window.close();
}
</script>
<form name="selectform">
<input type=button value="OK" onClick="sendValue(document.querySelector('.messageCheckbox:checked').value);"
</form>
Mu form right now has only OK button, when when I click on teh edit button, nothing happens. Should not I see a pop up window, with OK button inside it?
Typically a popup windows is shown with alert() or something similar, which causes the browser to make an actual popup window. That kind of popup window cannot have HTML elements added to it. You could do something like this http://www.codeproject.com/Tips/170049/Pure-HTML-CSS-Modal-Dialog-Box-no-JavaScript
I used those in a website and I liked them a lot, but I am not a fan of the css :target selector, so I opened it with Javascript instead, but it is pretty much the same thing.

Button change after page reload

So I have a button that I want to control a process. The process can be run/pause/stop.
<div>
<button class="buttonAction" id="run" onclick = "sendData()" >Run</button>
<button class="buttonAction" id="pause" onclick = "sendData1()" >Pause</button>
</div>
So the buttons are in the same position and what I want is when the the run button is clicked the pause button appears and visa versa.
function sendData(){
//some values
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db + '&fsvalue=' + fs;
document.getElementById("run").style.visibility="hidden";
document.getElementById("pause").style.visibility="visible";
}
Whats happens is it appears for a second but then reverts back to run because of the page reload window.location.href which I am using to send values back to my controller.
Dos anyone know a way to fix this or a better way of implementing it.
Thanks in advance
Reloading the page is like erasing a whiteboard and starting over again. The next page is not going to remember the state of the JavaScript you run after it. Setting of the buttons needs to take place on the next page load. Ideally your serverside code should be setting the state of the buttons.
Try below code:
function sendData(){
//your implementation
$("#run").css("visibility","hidden");
$("#pause").css("visibility","visible");
}
function sendData1(){
//your implementation
$("#pause").css("visibility","hidden");
$("#run").css("visibility","visible");
}
You will need to use cookies or sessions to keep the changes after a page reload.
By clicking on run, sendData function will be called in that run will be displayed and pause will not displayed, as I kept style.display="none" in the same way if we click on pause, run button will not display as we are using style.display="none"
function sendData(){
document.getElementById("run").style.display="block";
document.getElementById("pause").style.display="none";
}
function sendData1(){
document.getElementById("run").style.display="none";
document.getElementById("pause").style.display="block";
}
So i solved the problem. A few of the answers didnt take into account that the page reloaded.
When the user clicked run I send this back to the controller
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db+ '&buttonValue=' + "hideRun"
Then in the controller I took the hideRun and send it back to the page
String button = params.buttonValue
render view:'run.gsp', model:[button:button]
Then I had a a function that gets called on each page load
window.onload = function()
Which checked the value of
"${button}"
Then if it ssaid "hideRun" it would hide the urn button which would display the pause button.
And visa versa...

Categories

Resources