I have the following function for a jquery login form and want to run it when php detects that the user is not logged in by echoing a javascript function that clicks the login button automatically
jq Code:
<script type="text/javascript">
$(document).ready(function() {
$('a.login-window, a.log').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
HTML
<div id="login-box" class="login-popup">
<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" method="post" name="f" id="f" class="signin" action="login.php">
<fieldset class="textbox">
<label class="username">
<span>Username or email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="submit button" type="submit" name="Submit" value="<?php echo $lang['LOGIN'];" style="background:none;">Sign in</button>
<p>
<a class="forgot" href="#">Forgot your password?</a>
</p>
</fieldset>
</form>
</div>
if you want to auto click a button, you are looking for .trigger
$('#some-id').trigger('click');
.trigger( 'event' ) explanation:
Execute all handlers and behaviors attached to the matched elements
for the given event type.
(as you are already using jQuery, hence)
<?php
if (!$lang['LOGIN']) {
echo '<script type="text/javascript">';
echo '$(function() {';
echo '$("a.login-window, a.log").trigger("click")';
echo '});';
echo '</script>';
}
?>
var loggedIn = isUserLoggedIn(); // check login status
if(!loggedIn){
$('a.login-window, a.log').trigger('click');
}
.trigger Docs
Related
I used this script (https://www.webslesson.info/2020/02/instant-search-with-pagination-in-php-mysql-jquery-and-ajax.html) and I would like to add a form to directly access a page number.
I tried this but it doesn't work !
<div class="goto-page">
<form action="" method="POST" onsubmit="return pageValidation()">
<input type="submit" class="goto-button" value="Go to page">
<input type="text"
class="enter-page-no" maxlength="4" size="3"
name="goto" min="1"
required >
</form>
</div>
PHP Code modified
if (isset($_POST['goto'])) {
$start = (($_POST['page'] - 1) * $limit);
$page = $_POST['goto'];
}
else
{
if($_POST['page'] > 1)
{
$start = (($_POST['page'] - 1) * $limit);
$page = $_POST['page'];
}
else
{
$start = 0;
}
}
Consider the following example. This expands on the jQuery already in use in the example you linked to.
$(function() {
function load_data(page, query = '') {
$.ajax({
url: "fetch.php",
method: "POST",
data: {
page: page,
query: query
},
success: function(data) {
$('#dynamic_content').html(data);
}
});
}
load_data(1);
$(document).on('click', '.page-link', function() {
var page = $(this).data('page_number');
var query = $('#search_box').val();
load_data(page, query);
});
$('#search_box').keyup(function() {
var query = $('#search_box').val();
load_data(1, query);
});
$(".goto-page form").submit(function(evt) {
evt.preventDefault();
load_data(parseInt($(".goto-page input[name='goto']").val()));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br />
<div class="container">
<h3 align="center">Live Data Search with Pagination in PHP Mysql using Ajax</h3>
<br />
<div class="card">
<div class="card-header">Dynamic Data</div>
<div class="card-body">
<div class="form-group">
<input type="text" name="search_box" id="search_box" class="form-control" placeholder="Type your search query here" />
</div>
<div class="table-responsive" id="dynamic_content">
</div>
<div class="goto-page">
<form>
<button type="submit">Go To Page</button>
<input type="text" class="enter-page-no" maxlength="4" size="3" name="goto" value="1" required>
</form>
</div>
</div>
</div>
</div>
When Enter is hit or the Button pressed, the form is submitted. The submit callback will gather the value and use load_data() to load that page.
I've seen the other code for looping textbox, but it goesn't seem to apply in my form wizard form script.
What i need is a specific text box that loops when the user inputs a certain number of textboxes that he want to put.
Example:
there's a text box in which the user will enter the number of textboxes that he wanted to display, say 3. So after I click the submit button, there should be 3 textboxes as the output.
the following code when I put in form wizard not work properly
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-md-7">
<h2 class="fs-title">Item Detail:</h2>
</div>
<div class="col-md-5">
<h2 class="steps">Step 3 - 4</h2>
</div>
</div>
//CODE here
</div> <input type="button" id="next4" name="next" class="next action-button" value="Submit" onclick="validate3(0)"/>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
</fieldset>
You can use the following code sniffed to generate text boxes dynamically (using jquery).
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='text' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
My jQuery code is not sending a value from the textarea name="post_description"
<form id="post" method="post">
<div class="input-group">
<textarea name="post_description" class="form-control" placeholder="<?php echo $lang['description']; ?>" rows="4" ng-model="description"></textarea>
</div>
<div id="share_result"></div>
<a id="share" class="btn-custom">
<i class="fa fa-th-large"></i> <?php echo $lang['share']; ?>
</a>
</form>
$(document).ready(function() {
$("#share").click(function(e) {
e.preventDefault();
var postimg = $("#post").serialize();
$.post("posts/post_image.php", postimg).done(function(data) {
$("#share_result").html(data);
}).fail(function() {
//alert("Error submitting forms!");
})
})
})
On the backend:
$post_description = $_POST['post_description'];
It's returning as undefined index but the names do match
May be because you prevent event onclick you have to set event prevent on form submit like this :
<form id="post" method="post">
<div class="input-group">
<textarea name="post_description" class="form-control" placeholder="<?php echo $lang['description']; ?>" rows="4" ng-model="description"></textarea>
</div>
<div id="share_result"></div>
<a id="share" class="btn-custom">
<i class="fa fa-th-large"></i> <?php echo $lang['share']; ?>
</a>
<button type="submit" id="postform">Submit form</button>
</form>
When you click on submit button your form will submit and then
$("#post").submit(function (e) {
e.preventDefault();
// here is your code
});
Or if you don't want to add this button you have to change from
var postimg = $("#post").serialize();
to
var postimg = {post_description:$("textarea[name='post_description']").val()};
It was the Angular js conflict so I had to write my own jquery function to replace the angular and keep the same angular beraviour on the page, here is my jquery solution for angular replacement:
<script type="text/javascript">
$(document).ready(function(){
$("#post_description").keyup(function(){
// Getting the current value of textarea
var currentText = $(this).val();
// Setting the Div content
$("#text_output").text(currentText);
//$("#text_output").value(currentText);
$("#text_output").attr("value", currentText);
});
});
</script>
I am developing a chat program using jquery, php and ajax. and my problem is that when user puts msgs and when the chat box is overflowed it should auto scroll down when new msg enter and chat box overflowed. What I tried to achieve is this.
CODE
$.ajaxSetup ({
cache: false
});
$(document).ready(function(e) {
setInterval (function() {
$('.main').load('display_messages.php');
},1000)
$(function() {
//Function for press Return button
$('#newMessageContent').keypress(function(e) {
if (event.keyCode == 13 || !event.keyCode == all ) {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
}
});
// Functions for click button
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = setInterval(function(){
$('.main').one('DOMSubtreeModified',function(){
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
})
},1000)
$('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
});
});
});
it has some bugs. it will auto scroll down but it repeat itself again and again and not stoping, and you cant scroll up to see older msgs if u want.
so then I used this function $('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
}); to control it but its useless.
here is html.
code
<div class="chatBox">
<div class="chatlogo">
<embed src="test2.swf" play="true" class="vid2" loop="true" width="180" height="50" salign="C" scale="ShowAll" id="vid_2" quality="High" wmode="transparent" name="vid_2" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</div>
<div class="user">
<form name="signIn" id="signInForm" action="signout_delete_content.php" method="post" onSubmit="return false">
<span class="error animated">Invalid uername</span>
<input name="username" type="text" id="username" placeholder="Enter username" size="13px" onClick='document.username.value = "" '>
<input type="submit" id="signIn" value="SING IN">
</form>
<span class="welcome"></span>
<input type="button" id="signOut" value="SIGN OUT" onclick="window.location.reload();">
</div>
<div class="main">
<p>Admistrator: Hello msgs here.</p>
</div>
<div class="messageBox">
<form name="messageBoxSignInForm" id="messageBoxSignInForm" onSubmit="return false">
<input type="submit" id="messageBoxSignIn" value="Sign In to Enter Chat">
</form>
<form name="newMessage" class="newMessage" action="" onSubmit="return false">
<textarea name="newMessageContent" id="newMessageContent" placeholder="Enter your message here.">Enter your message here</textarea>
<input type="submit" id="newMessageSend" value="Send">
</form>
</div>
</div>
any help would be appreciated. thanks
You can't scroll up because you keep triggering load('display_message.php'), which will trigger 'DOMSubtreeModified' event. So, you can't rely on 'DOMSubtreeModified' and have to check for a new message by other means. For example, you may count the number of messages for each 'display_message.php' and check for difference.
var old = 0, new = 0;
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php', chckIt);
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = function(){
new = $('.main').children().length;
if (new > old)
{
old = new;
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
}
};
You were right,my previous answer doesn't works..
$('.messageBox').scrollTop($('.messageBox')[0].scrollHeight)
this works well:
jsfiddle:
http://jsfiddle.net/Lh4TN/6/
I have 9 pictures on each page, and when someone clicks on a picture the picture is opened in a fancybox, then if a person wants more information about the piece the click on a link inside the fancybox and the form opens inside a modal box.
All of the code works and the form is send through ajax then php.
The problem that I have is that all 9 pictures open the same form and when I client fills out the request form with their contact information, there is no way of me knowing which photo they are looking at.
It would be nice to add a "Hidden" value that is sent with the form so I can know which photo they are requesting the information.
I have looked around SO but to no avail
basic form
<div id="inline">
<form id="contact" name="contact" action="sendmessage.php" method="post">
<label for="name">Your Name </label>
<input type="text" id="name" name="name" class="txt">
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="msg">Enter a Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send Request</button>
</form>
link to photo
<a class="fancybox" rel="gallery" href="inventory/inv_pictures/pic4.jpg"><img
src="inventory/inv_thumbs/thumb4.jpg" alt="Antique Furniture - Pic 4"
id="gallery"/></a>
I figured that maybe there is away to add a title tag or use the alt tag under the tag
that the form can pick up and send it as a "hidden" item. That way each photo can still access the same form but then I can know which item they are requesting for.
Sorry for not posting the whole code for fancy box.
but here it is:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<link rel="stylesheet" href="../js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="../js/source/jquery.fancybox.pack.js?v=2.1.5"> </script>
<script type="text/javascript">
$(".fancybox").fancybox({
afterLoad: function() {
this.title = '<a class="modalbox" href= "#inline" >Request more information</a> ' + this.title;
},
helpers : {
title: {
type: 'inside'
}
}
});
</script>
<!-- Hidden inline form -->
<div id="inline">
<form id="contact" name="contact" action="sendmessage.php" method="post">
<label for="name">Your Name </label>
<input type="text" id="name" name="name" class="txt">
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="msg">Enter a Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<input type="hidden" id="link" name="link" value="">
<button id="send">Send Request</button>
</form>
</div>
<script type="text/javascript">
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\ [[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var nameval = $("#name").val();
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
var namelen = nameval.length;
if(namelen < 2) {
$("#name").addClass("error");
}
else if(namelen >= 2) {
$("#name").removeClass("error");
}
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}
if(msglen < 4) {
$("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}
if(mailvalid == true && msglen >= 4 && namelen >= 2) {
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<em>sending...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact").fadeOut("fast", function(){
$(this).before("<p> <strong>Success! Your request has been sent. We will respond to it as soon as possible. </strong></p>");
setTimeout("$.fancybox.close()", 3000);
});
}
}
});
}
});
});
</script>
As I can see the link you are giving to fancybox is a direct link to a picture.
I am confused how you get a link to the form inside the modal as it doesn't seem to be coded here.
What I would suggest is, instead of giving direct picture link, create another page and code that page to collect a pic url/id from by GET/POST and display the corresponding pic and then embed this page into the fancybox.
So basically what I am saying is, pass the pic id/path from url that you pass to the fancybox, collect it and then further pass it to the form link