When I click on a button to reveal a modal and then to make it disappear the flex-video iframes from that page disappears too , how can I fix this? (after I open the modal also the iframe reappears and when I close it..the iframe does the same thing )
The modal reveal button and modal content :
<a data-reveal-id="LoginModal" href="#" class="button">Login</a>
<div id="LoginModal" class="reveal-modal" data-reveal>
<h2>Login Form</h2>
<?php
// show negative messages
if ($login->errors) {
foreach ($login->errors as $error) {
echo $error;
}
}
?>
<form method="post" action="index.php" name="loginform">
<label for="login_input_username">Username</label>
<input id="login_input_username" class="login_input" type="text" name="user_name" required />
<label for="login_input_password">Password</label>
<input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
<input type="submit" name="login" value="Log in" />
</form>
<a class="close-reveal-modal">×</a>
</div>
And the flex-video
<div class="flex-video">
<iframe width="238" height="210" src="<?php echo $i["post_video1"];?>" frameborder="0" allowfullscreen></iframe>
</div>
The site link for the live example http://world-debate.net/index.php ( you can check with the login / register button on the top right corner )
The problem is class "flex-video". When I remove it, the frame stay on right place. Try to change class name to another or check attributes here.
Related
<form method="POST">
<div class="form-outline form-white mb-4">
<input type="password" name="password" class="form-control" required/>
<label class="form-label" for="form">Pass</label>
</div>
<button type="Submit" value="send" class="btn transparent btn-block" style="color: white;">Submit</button>
</form>
if (isset($_POST['submit'])) {
$password=$_POST['password'];
if ($password=='password') {
header("location:ari.html");
exit();
}
else
echo "Incorrect.";
}
I'm beginning php currently and I'm trying to use a login method, but whenever I press my submit button my code refreshes and doesn't move onto the next page I indicated. (location:ari.html)
If I could get help on what I did wrong that would be great thanks.
you should consider using action attribute in form tag and point into some POST url that retrieve your data
use action line this
<form method="POST" action="/ari.php">
submit button refresh the page without action attribute it just point to current URL if you dont fill it
<form method="POST" >
<div class="form-outline form-white mb-4">
<input type="password" name="password" class="form-control" required/>
<label class="form-label" for="form">Pass</label>
</div>
<button type="Submit" name="submit" value="send" class="btn transparent btn-block" style="color: white;">Submit</button>
</form>
<?php
if (isset($_POST['submit'])) {
echo $password=$_POST['password']=='password'?header("location:ari.html"):"Incorrect.";
}
?>
have updated this code and working fine for me...hope u got the answer
Take a look at this line:
<form method="POST">
What happening is that when you are submitting the form it is sending data to the same page.
In this line:
if (isset($_POST['submit']))
I found no tag with name='submit' attribute. You should put this in your submit button.
If you want to send it to another page then use the action attribute in form tag and point your data to that page like action=yourpage.php
i have a home page which has navigation sidebar and a search bar. if i modify the code to make search work navigation wont work and vice versa. Heres the code. Please help
<div class="w3-bar w3-black">
Home
Message
Friends
Notification
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
Settings
Log-Out
</div>
</div>
<form action="result.php" method="GET">
<input type="text" name="query" class="w3-bar-item w3-input" style="color:#000" placeholder="Search.."/>
<button class="w3-bar-item w3-button w3-green">GO</button>
</div>
right now when i click the navigation bar icon. it goes to search result. and with GET method and the form tag navbar will not open.
You should close the form tag
<form action="result.php" method="GET">
<input type="text" name="query" class="w3-bar-item w3-input" style="color:#000" placeholder="Search.."/>
<button type="submit" class="w3-bar-item w3-button w3-green">GO</button>
</form>
otherwise the form is not well formed and can't submit the values
and add the type submit to the button
Better, your code will be looks like this
<div class="w3-bar w3-black">
Home
Message
Friends
Notification
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
Settings
Log-Out
</div>
</div>
<?php if(isset($_GET['query'])): ?>
<form action="result.php" method="GET">
<input type="text" name="query" class="w3-bar-item w3-input" style="color:#000" placeholder="Search.."/>
<button class="w3-bar-item w3-button w3-green">GO</button>
</form>
<?php endif ?>
</div>
hope this answer will help you out from your problem
I have a login form inside a fancybox popup and for some reason the submit button doesn't work.
I tried using different html input types as show below.
With type="button" the form works but when i click enter is doesnt submit form
With type="submit" the form doesnt work at all when i click submit or press enter it just redirects me to mysite.com/?login=&pass=&submit=SIGN+IN+TO+YOUR+ACCOUNT closing the fancy box
This below is form code
<div style="display:none">
<div id="sign_in" class="fancybox_message sign_in_popup">
<div class="login_form_container">
<h1 class="semibold">SIGN IN TO YOUR ACCOUNT</h1>
<form>
<input type="text" name="login" id="login" class="regular" autocomplete="off" placeholder="Username or Email" />
<input type="password" name="pass" id="pass" class="regular" autocomplete="off" placeholder="Password" />
<div class="clear"></div>
<div class="squaredFour">
<input style="display: none;" type="checkbox" value="None" id="squaredFour" name="check" />
<label for="squaredFour"></label>
</div>
<span class="regular remember">Remember me</span>
Forgot your username/password?
<div class="errorHolder" style="float: left;margin-top:5px;color:red"></div>
<input type="button" name="submit" id="ajaxLogin" class="semibold submit" value="SIGN IN TO YOUR ACCOUNT" />
</form>
</div>
<div class="login_social_container">
<!--<img src="<?php echo $website_domain; ?>/assets/images/login_facebook.png" alt="Login from facebook" />-->
Login with Facebook
Login with Twitter
Login with Linkedin
Login with Google+
</div>
</div>
</div>
You should add
onclick="submitMyForm()"
to the submit button, then implement your ajax operation in a function called submitMyForm.
If you're not sure about ajax or don't want to juggle with the fields, you can use a hidden iframe and make your <form> target point there. This way you get the submitted info just as you normally would but no page reload will happen.
I just created a form submit without refreshing using this plugin : http://malsup.github.com/jquery.form.js
The simple example can be seen at
http://jquery.malsup.com/form/
I don't what I was doing, it was worked fine before until I modified something that I don't remember.
When I click SAVE, it should be processed on the background and it should stay on the same page. But now, it doesn't and it redirect me to the action page (process-001.php)
I created another page using the same method, and it works just fine.
Can you see if I'm doing it wrong?
Here is the form :
<div id="submit-form">
<form action="web-block/forms/process-001.php" id="select-block" class="general-form" method="post" enctype="multipart/form-data">
<div class="input-wrap">
<input class="clearme" name="Headline" value="<?php echo $Headline;?>" id="headline"/>
</div>
<div class="input-wrap">
<textarea class="clearme" name="Sub-Headline" id="subheadline"><?php echo $SubHeadline ;?></textarea>
</div>
<label>Bottom Left Image</label>
<div class="up-mask">
<span class="file-wrapper">
<input type="file" name="Pics" class="photo" id="pics" />
<span class="button">
<span class="default-txt">Upload Photo</span>
</span>
</span>
</div><!-- .up-mask -->
<input type="hidden" name="Key" id="Key" value="<?php echo $Key;?>"/>
<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your changed has been saved!</span>
</form>
</div>
The Javascript :
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#select-block').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
I have been having problems for the past two days trying to submit a form using jquery ajax, php to mysql database. I reused a code for an animation form which I found online. The html code as follows (file name: "Slider.html"):
<html>
<body>
<div id="form_wrapper" class="form_wrapper">
<form class="register" style="right:-500px;backgroundcolor:grey;">
<h3>Register</h3>
<div class="column">
<div>
<label>First Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Last Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" id="r_passwordField"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Send me updates</span>
</div>
<input type="submit" id="registrationform" value="register"/>
<a href="index.html" rel="login" class="linkform">You have an account already? Log in
here</a>
<div class="clear"></div>
</div>
</form>
<form class="login active">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot
linkform">Forgot your password?</a></label>
<input type="password" id="l_passwordField" size="10"/>
<span class="error">This is an error </span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" id="loginform" value="Login"></input>
<a href="register.html" rel="register" class="linkform">You don't have an account yet?
Register here</a>
<div class="clear"></div>
</div>
</form> <form class="forgot_password">
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" id="forgortform" value="Send reminder"></input>
Suddenly remebered? Log in here
<a href="register.html" rel="register" class="linkform">You don't have an account?
Register here</a>
<div class="clear"></div>
</div>
</form>
</div>
<div id="graph-wrapper" class="graph-container" style="display:none">
<h3>Standard Diviation Bell Curve<h3>
<div class="graph-info">
Visitor
<span></span>
</div>
<div class="graph-container">
<div id="graph-lines"></div>
<div id="graph-bars"></div>
</div>
</div>
</div>
</body>
</html>
jquery ajax code as follows (jquery script on the same file as the html code):
<script>
$(document).ready(function(){
//animated code and other codes omitted
("#registrationform").click(function(){
$.post("postdata.php",
{fname:"Ibrahim",lname:"Ahmadu",email:"ibrostay#yahoo.com",uid:"ibro2stay",pwd:"ibro2stay",mean:"0.1",varience:"0.1",sdev:"0.
1",duration:"0.1"},function(responce){
if(responce==0){
alert("There was an error updating the record");
}else{
alert("update successful");
}
});
});
});
</script>
Below is the php code (php code file name: "postdata.php"):
<?php
$fname=$_REQUEST["fname"];
$lname=$_REQUEST["lname"];
$email=$_REQUEST["email"];
$uid=$_REQUEST["uid"];
$pwd=$_REQUEST["pwd"];
$mean=$_REQUEST["mean"];
$varience=$_REQUEST["varience"];
$sdev=$_REQUEST["sdev"];
$duration=$_REQUEST["duration"];
$con=mysql_connect('localhost','root','');
if(!$con)
{
die("Error Connecting to database;"+mysql_error());
}
$database=mysql_select_db('mydb');
if(!$database)
{
die("Error Connecting to database;"+mysql_error());
}
$update = mysql_query("insert into users values('$fname','$lname','$email','$uid','$pwd','$mean','$varience','$sdev','$duration')");
if(!$update)
{
die("Update wasn't Success full"+mysql_error());
}
echo "update successfull";
mysql_close($con);
?>
Whenever I click the register button nothing happens. The page only refreshes back to the login form since it has class "active" as the default form, and the browser address bar changes from this url: "localhost/slider.html" to this url: "localhost/slider.html?".
I hope my question was explicit enough, because I need an urgent answer, as this is my thesis project and I am running out of options.
and the browser address bar changes from this url: "localhost/slider.html" to this url: >"localhost/slider.html?".
use e.preventDefault();
$("#registrationform").click(function(e){
^
|
|_______________ you forgot the $
then add,
`e.preventDefault();
check javascript console and you will see all the errors. you have to eliminate one by one. For the start, check above.
advice: when you copy/paste codes, atleast try to know the structures. sometimes it wil conflict with your code and may stop running your code.
Looks like your Javascript has some errors and not executing hence. So, the form submit resorts to its default behavior - that is, submit to the tag's action attribute. Since you have not specified the action attribute in the tag, it will post the parameters to the current page.
You are getting the url localhost/slider.html? because of two reasons:
You have not specified method="post" in your . So, the form is trying to submit as GET. That is why the appended "?"
You do not have names for the inputs. So, the query string is empty. You need to specify name attribute for every input.
What you have to do first is to debug your Javascript. Use Firebug in Firefox or the console in Chrome or any similar tools to capture your JS errors and also examine your Ajax requests and responses.
Also, make sure that the last statement in the "click" function is a :
return false;
to force the form to stay on the page.
Another important thing is, as #steve pointed out, add method and action attributes to your tag. This will make sure that your script will not fail entirely on a JS disabled browser or on any such conditions.