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.
Related
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>
I have a intranet-website here that checks if an employee has used the form correctly and (via php) calls then a JavaScript part:
<script type="text/javascript">alert("Error!"); history.back(-1);</script>
Now, there is a php-variable with a huge amount of text. how can I call the site and give the variable with it, instead of using a simple history.back, where every variables are deleted instantly? Someone an idea how to make this without jQuery?
I think this is what you need:
<script type="text/javascript">alert("Error!"); location.href="page.php?yourvar=<?php echo $var; ?>";</script>
This will show the alert box and then redirect user to "page.php", where you can get your variable value using $_GET['yourvar'].
Hmm, not entirely sure what you mean but you could try something like this?:
if ($error) {
echo '<script type="text/javascript">alert('.$error.');</script>';
header('Location: page.php?var='.$myVar);
}
They should still get alerted with the error and then get sent back to the previous page, if this is what you were asking.
I have a contact form which initially "onsubmit" calls a javascript function to validate the content. If this function returns true it then posts the data to a php file.
At the end of this file I would like to return to the contact page, currently I am using this:
header('Location: ' . $_SERVER['HTTP_REFERER']);
is there a better way?
I would also like to change the css on an element on the contact page to display when I return (a thank you message), is this possible? I can set it to display using jQuery in the initial javascript function but that gets wiped out when it goes to the php file.
Thanks
Post to self then you if statement after post has been handled to redirect.
Do you redirect like you have said, using headers.
So make it post to self on the action part of your form
<form action="yourpage.php">
Then added PHP to handle post on yourpage.php
if(isset($_POST)){
//Handle POSTed data.
//if handled correctly
{
header("Location: somewhere.com")
}
}
The HTTP_REFERER is not the best solution to accomplish a history -1 in PHP.
As stated in the documentation :
The address of the page (if any) which referred the user agent to the current page. This is set by the user agent. Not all user agents will set this, and some provide the ability to modify HTTP_REFERER as a feature. In short, it cannot really be trusted.
The best solution is to explicitly write the page to return in the header function.
For the second question, you can redirect with a query parameter:
header('Location: script.php?valid=1');
And then test it in your view:
if (isset($_GET['valid']) && $_GET['valid'] == '1') {
// display the message
}
Make the form submit the data to the same page of the contact form.
Then from the PHP script check if a form has been submitted, do your processing code and return a div with your thank you message.
Say the name of your contact page was index.php. You could setup your form with the correct action (although it should be this way by default) and then check in the header for a submission parameter. Code below
<?php
if (array_key_exists("submit_btn",$_REQUEST) {
//display a thank you
}
?>
<!-- more code here-->
<form action="index.php">
<input name="whatever" type="text">
<input type="submit" name="submit_btn">
</form>
I found a few ways to do this in the end thanks to various peoples answers. Thanks all.
The simplest way was just to re-direct to a contact thank you page using the following header:
header("Location: http://{$_SERVER['SERVER_NAME']}/contact-thankyou.html");
I changed to using SERVER_NAME as HTTP_REFERER wasn't a great solution.
The second solution, which was a bit uglier but did the job was to return to the same page with a header like this:
header("Location: http://{$_SERVER['SERVER_NAME']}/contact.html?submitted");
Then use the following Javascript to detect the query parameter and change the css:
if (window.location.search.substring(1) == "submitted")
{
$("#message-sent").css({"display": "block"});
}
This is NOT a great solution, as I'd prefer to get the query parameter using php but I'm restricted to html and Javascript on pages with the template system I'm having to build on.
Thanks all.
Simple HTML form:
<form action="test.php" method="post" name="my_form" id="my_form" >
<input name="c_name" type="text" id="c_name" maxlength="90"/>
</form>
test.php with the following code:
<?php
$name=$_POST['c_name'];
if ((!isset($name)) || ($name==''))
{
echo 'Fill in the name';
}
else
{
echo $name;
}
?>
Now, I want the following upon form submission:
1) Not to leave the current browser window as PHP to display the corresponding message.I want the form window to stay there.
2)I do not want just a simple response message. For example, I want instead of "Fill in the name" a more graphical way to interact like making a hidden div to appear; in other words I want to write Jquery inside PHP and make it execute. Is it possible and how?
I know I have to use AJAX, however I do not know what to do exactly! Could you give me some code as to realise the above two things?
I believe that if you're new to all of this, as you seem to are, you are best of using jQuery indeed. An ajax example can be found here: http://api.jquery.com/jquery.ajax/
Code in this case is q bit extensive. Cause you would not only want to check if it is in fact empty, but you also want to preg_match it. Which means you want to make sure that what your users send you actually want (and not break or hack or inject your server, which is important).
So seeing this I would recommend to read a tutorial, something like this (fast google search): http://code.tutsplus.com/tutorials/5-ways-to-make-ajax-calls-with-jquery--net-6289
And familiarize yourself with some basics before getting into the next steps.
To get the effect you are wanting. I like to use the jQuery Form Plugin, it makes it easy to create an AJAX form out of any existing form. Then simply echo your results in the .php file you submit to (Hint: you can echo div's with styling too.) The below example, assuming you have the jQuery Form Plugin included on your page, will submit the form using AJAX and return the echoed results to a div with id=status.
$(document).ready(function(){
var status = $('#status');
$('#my_form').ajaxForm({
beforeSend: function() {
status.empty();
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
});
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