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.
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 searchbox in my website like below:
<div style="" class="col-sm-8">
<div class="wrapda">
<div class="searchda">
<a href="https://google.com">
<input type="text" class="searchTermda" placeholder="Search Image">
<button type="submit" class="searchButtonda">
<i class="fa fa-search">Search</i>
</button>
</a>
</div>
</div>
</div>
am trying to pass the user entered keyword in the input box to next page , is there anyway to do this using anchor tags, please help. thanks in advance
Instead of using anchor tag, the more standard way is to use form.
<div style="" class="col-sm-8">
<div class="wrapda">
<div class="searchda">
<form method="POST" action="your target url">
<input type="text" name="searchInput" class="searchTermda" placeholder="Search Image">
<button type="submit" class="searchButtonda">
<i class="fa fa-search">Search</i>
</button>
</form>
</div>
</div>
</div>
You have to specify the action attribute in the form tag which will be your target url.
You also have to specify the name attribute in the input tag.
This way your input will be sent to your target url.
You can use form for this purpose.
<form action="https://www.google.com/search" method="GET" />
<input type="text" placeholder="Search Image" name="q" />
<input type="submit" value="Search Image" />
</form>
Been having trouble with a form not submitting data to a page (Change Password) when on any page of the website apart from the index page (Which is working as it should). The website is built using CodeIgniter.
The code currently used on all pages for the form is the following:
<div class="modal-body">
<form role="form" id="change_password_form" action="<?php echo base_url('auth/change_password')?>" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Old Password" name="old" type="password" autofocus>
</div>
<div class="alert alert-danger" id="old" role="alert" style="display:none"></div>
<div class="form-group">
<input class="form-control" placeholder="New Password - minimum 8 characters" name="new" type="password" value="">
</div>
<div class="alert alert-danger" id="new" role="alert" style="display:none"></div>
<div class="form-group">
<input class="form-control" placeholder="Confirm New Password" name="new_confirm" type="password" value="">
</div>
<div class="alert alert-danger" id="new_confirm" role="alert" style="display:none"></div>
<input type="hidden" name="user_id" value="<?php echo $user_id;?>" id="user_id" />
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="changepassword" value="Submit">Submit</button>
</form>
</div>
On the index page, this successfully goes to the change_password function and will check the details to see if they meet the rules. An error message is shown below the text box when submit is clicked. However on other pages using the same code, nothing happens when submit is clicked. when I go into Main.php and change the page of index.php in the index function to any other page (view_inventory.php for example), The change password works correctly on the new index page, but will not work on the old index page.
I can get the change password to work on other pages if I replace the submit button with the code below (Doesn't show the results under the text boxes, but on a new blank page), but I didn't really want to have to edit so many pages if it can be fixed in a smaller amount.
<input type="submit" value="Submit" class="btn btn-primary">
Any help would be gratefully appreciated.
I had the same error last week. you have to use a Submit inside form instead of button.
You can use form_submit for example:
echo form_submit('mysubmit', 'Submit');
// Would produce: <input type="submit" name="mysubmit" value="Submit" />
Here is the documentation:
http://www.codeigniter.com/user_guide/helpers/form_helper.html
Regards.
I cant get the two forms to play with each other.. - meaning I have one form that sends an email - and another that is using a search function. The email form is working ok. Validates just fine, but when I click on the search button, it doesn't do anything. ( the search form is working fine if I remove the email form )
What am I missing ??.. ugh..
I've been working on this, but my brain is fried. I am sure it is something simple.
Any help from you guys would be much appreciated.
<form method="post" action="contact.php" name="contactform" id="contactform">
<div class="full-lenght">
<div class="to-left">Name<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<input name="name" type="text" id="name" value="" class="contact-field" />
</div>
</div>
<div class="clear"></div>
<div class="full-lenght">
<div class="to-left">Email<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<input name="email" type="text" id="email" value="" class="contact-field" />
</div>
</div>
<div class="clear"></div>
<div class="full-lenght">
<div class="to-left">Phone<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<input name="phone" type="text" id="phone" value="" class="contact-field" />
</div>
</div>
<div class="clear"></div>
<div class="full-lenght">
<div class="to-left">Message<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<textarea name="comments" rows="3" id="comments" class="contact-message"></textarea>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="human">3 + 1 = ?<br>
<input name="verify" type="text" id="verify" size="4" value="" style="width: 30px;" />
<input name="e" type="submit" class="contact-button" id="submit" value="Submit" />
</div>
</form>
<div class="search">
<form class="form" action="search_results.php" method="get">
<input name="q" type="text" class="search_field" value="Search.." onfocus="if (this.value=='Search..') this.value='';">
<a onclick=" document.forms[0].submit();return false" href="#"><img class="search_button" title="Search Button" src="images/search_button.jpg" alt="" width="24" height="24"></a> <br>
<br>
</form>
</div>
This is the code. The second form starts in search div. The first one is an email form with ajax validation.
try this,
in the second form
<form class="form" id="searchform" action="search_results.php" method="get">
<input name="q" type="text" class="search_field" value="Search.." onfocus="if (this.value=='Search..') this.value='';" />
<a onclick=" document.getElementById('searchform').submit();return false" href="#"><img class="search_button" title="Search Button" src="images/search_button.jpg" alt="" width="24" height="24"/></a> <br/>
<br/>
</form>
This doesn't have anything to do with PHP, but does have everything to do with JavaScript.
Change:
<a onclick=" document.forms[0].submit();return false" href="#">
to:
<a onclick="document.forms[1].submit();" href="#">
You're using legacy DOM notation in your JavaScript, which is OK but outdated. When you have forms[0] you're referring to the first form in the DOM which isn't the search form (the contact form is), forms[1] is the search form. Clicking the icon will fail without the change, but you could type in the box and hit enter and it will work, since the JavaScript you have won't be triggered (no click). I also see no need to keep the return false statement in there.
<form class="form" action="search_results.php" method="get">
<input name="q" type="text" class="search_field" value="Search.." onfocus="if (this.value=='Search..') this.value='';">
<input type="submit" value='Search'> <br>
<br>
This problem you used anchor tag as button form and it doesn't work for submitting form so you can either replace anchor tag with input tag "submit type" as you see in code or you can use JavaScript to make anchor tag when you click on it, it fires a submitting form.
Enjoy :)
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.