I'm using a shortcode as part of my membership setup which allows users to upload files directly to their contact record in my CRM. This displays a multi-upload form which I have then styled:
Once the files are uploaded the page refreshes and a success message appears. On refresh I also need to display a hidden div (#hiddendiv) underneath the success message.
From what I've read there is a JS/PHP combination that could potentially achieve this (such as this example - although this is quite vague and difficult to adapt).
Can anyone assist me/point me in the right direction to achieve this?
Since your form page is refreshing then you obviously not using AJAX, therefore instead of putting the div as html what you can do is echo a assign a variable initially it should be empty then, then echo that variable where you wanna show the div, this will echo empty message at the begging... then upon successfully validating your form and on success then assign the content of that div to the empty variable once the page loads its gonna show the div content u just assign
<?php
$hiddenDiv = "";
if(isset($_POST['submitButton'])){
//validate what you need to validate on
//On success assign value to hidden div
$hiddenDiv="<div class=\"whatever\">What ever dv content you need to display</div>";
}
?>
<!-- the place you wanna show the div -->
<?= $hiddenDiv?>
You could use the jquery switch class. This will allow you to do CSS transitions to make the appearance of the element smoother. This could be part of 'a' ajax response.
You could also just do something as simple as
$('#hiddendiv').css({"display":"inline"})
EDIT ** changed the to 'a' in reference to ajax.
Try like below:
<?php
if(isset($_POST['whatever'])
{
$display='';
}
else
{
$display='none';
}
?>
<div style='display:<?=$display?>'></div>
Related
I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/.
However, in the implementation from the page, the pop-up is triggered by the click of a button:
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:
<?php
if (isset($group)) {
?> ......HTML code.....
So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?
Thanks in advance!
I understand that you reload the page after said data was inserted into database?
If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup, like that:
<div class="popup center active">
...
</div>
BUT
in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
note: It doesn't change the fact that, as said above - it would be better to handle this with XHR (e.g. via ajax)
I am using some github jquery code https://github.com/viralpatel/jquery.shorten to automatically shorten a paragraph and add a read more button, so i made the div element and it works fine when i use normal text, but i tried to add some sql (inside php) to show a value of something in a sql table, but when i load the page it just says "more" and when i click it, it loads the value from the sql, but it is supposed to just shrink the value and then when you click more it is supposed to show the rest instead it shows nothing and then when you click "more" it shows all of it, I am really stuck on this, have been trying to find an answer already for a few days.
example code
<div class="example">
<?php echo $sql_query; ?>
</div>
<script>
$(document).ready(function() {
$(".example").shorten({showChars: 100});
});
</script>
I figured out why it was causing such problems, I had comments inside the div element before the php echo, so it was counting the comments as chars, so when i removed the comments it all worked.
I have troubles to change content in my HTML document with javascript after submitting a form with a POST method. I need to change the color of a div inside my HTML document to yellow, I have already done it, but the problem is that after it changes to yellow then the HTML website gets refreshed in the navigator and then it goes back to normal(white). It kind of flashes the yellow and then goes to white again.
Here is my HTML code:
<form action="" method="post" onSubmit="return changeColor()">
.
.
.
<div id="divColor">
.
.
And this is my javascript code to change the div color:
function changeColor()
{
var div = document.getElementById("courselist");
div.style.backgroundColor='yellow';
}
I need to do it this way because is part of the assignment, so I cannot change the color with CSS and so far we can only use HTML and javascript. This is not the whole assignment in case somebody thinks I want to cheat, this is the part that I am stucked with. I cannot make the div keep the yellow color after the navigator has refreshed the HTML website after the POST method.
Thank you!
When you submit a form, it goes to the next pages specified in action="". Therefore, when you click the submit button, it changes color, then the next page loads. Due to the lack of page specified in action="", it is reloading the same page so it turns yellow, then refreshes.
This is what you are probably looking for. You use AJAX to submit information to POST without actually loading a different page.
There are three ways to achieve your aim.
Using ajax to submit information, so that the page is not refreshed， and the status remain.Or you can do it like the following, it has the same effect as ajax:
< iframe name="myIfr" style="display:none">< /iframe>
< form method="post" target="myIfr">...< /form>
Changing "action" of "", record the status in the url, like this: "mypage.php?status=1", After the page is refreshed, you can get the status from the url.
Using Cookie. I think it's not a good idea.
You could separate it so that the form only prints out if other conditions are met. Use a variable called $output_form (or whatever you feel like naming it) and set it to false, then have the code print out one thing before the POST is sent, and something after the POST is sent. Here is a really stripped down version of some code I finished a little while ago, might help you see what you can do:
<?php
if(isset($_POST['Submit'])){
{SOME CODE HERE}
$output_form = true;
}
}
else{
$output_form = true;
}
if (!$output_form){
{SOME CODE HERE}
}
else{
{OTHER STUFF HERE}
$output_form = true;
mysqli_close($dbc);
}
}
if ($output_form){
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Hi guys I finally solved my problem.
I had to return false in my changeColor() function and the website will change color, but not refresh itself. I like the approach with cookies.
Thank you for your help, I could not use either AJAX or PHP because they have not taught us that yet.
I am using codeigniter to build a web app. I am having some problems with the following scenario.
The user clicks on submit button on 'home'
He is redirected to home/ok where I retrieve his info
from home/ok he is redirected back to home#final
But the thing is, final is hidden by default and it is not displaying. I have a JavaScript function that toggles final and it is displayed.
Is there anyway I can make the ok function redirect to the JavaScript function? I cannot add it on body onload since I don't want the success message to appear beforehand.
How about doing something like:
<? $display = ($_SERVER['HTTP_REFERER'] == base_url() . 'home/ok')? 'block': 'none'; ?>
<div id="final" style="<?=$display?>;">
OK
</div>
To set the default display style based on which way the page is displayed.
You could also look in to Flash data in the Session class, see. http://codeigniter.com/user_guide/libraries/sessions.html which I think is used for what I think you want to achieve
I am currently using a javascript code to make an entire row in my table clickable. Once the row is clicked a function is ran, I am wondering what I can use to redirect to a PHP page and preferably send a post variable along with it. My guess is AJAX but I am not sure how or if it would work.
Javascript
function DoNav(theUrl) {
document.location.href = theUrl;
};
HTML
<tr onclick="DoNav('myphpscript.php');">
I have access to jQuery so that is also an option. Any help is appreciated, Thanks!
If you need to POST the data (not use GET), One easy option is to create a form element on the fly, attach input elements with the values you need and submit it. You can do that like so if you use jQuery:
$(function() {
$('tr').click(function() {
var mail_id = /* get the mail id of this row... not sure where since I dont' have the HTML */
$('body').append('<form method="post" action="myphpscript.php" id="donavform" style="display:none;"></form>');
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
$('#donavform').submit();
});
});
Hope that makes sense. If not, let me know! It's, okay...
Explanation:
The very first line is a jQuery shortcut way of saying "when the document is done loading..." So, when the page is done loading, I'm going to attach an event listener to all elements in the document. When one of those elements is clicked, we can then extract the mail id (and whatever else you need) that is in relation to that particular table row. So, if you had HTML like this:
<!-- 8435 is the mail ID in this example. -->
<tr id="row3">8435</tr>
Then we could extract the mail_id variable like so:
var mail_id = $(this).html();
Now, we are going to attach a hidden form element to the end of the body of the HTML (it doesn't really matter where we put it since it is hidden... so, the end is fine). In this form element, we set the method to POST and the action to whatever php file you need to POST to. I also set an ID so it's easily referred to in the next step.
I'm now going to select the newly-created form element using its ID and I'm going to append a new hidden input element to it with the appropriate name value pair.
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
Finally, I'm going to use the jQuery JavaScript submit method to trigger the submit event on the form. This is basically equivalent to pressing the 'submit' button on a normal form.
Try it out, it should work flawlessly.
If you're going to a new page, just submit the form as usual. Put the data in form fields (hidden if required). No need to Ajax, jQuery or any other magic unless you want to stay on the same page and post in the background.
If the amount of data is not ridiculously large, use a query string...
<tr onclick="DoNav('myphpscript.php?key=value');">
Or if you need a natural HTTP post, you can programmatically submit the form with Javascript...
onclick="document.forms[0].submit();"
You could send the data along in a cookie. There's a nice jQuery plugin that helps with setting cookies in the jQuery namespace.
http://plugins.jquery.com/project/cookie