Closing featherlight upon submitting form - javascript

I have a demo-employee.php page that retrieves all the users of the system alongside specific actions that can be performed:
<td><table>
<tr>
<td><i class="fa fa-pencil-square-o"></i></td>
<td></i></td>**
<td><i class="fa fa-trash-o"></i></td>
</tr>
</table>
</td>**
I am using data-featherlight to pop up the page demo-change-passowrd.php, upon clicking the link the user gets this form:
<form id="changePwd" name="formPwd" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" accept-charset="UTF-8">
<p>Please fill all the mandatory (*) fields.</p>
<div class="question">
<input type="password" name="new_pwd" pattern="^.*(?=.{6,})(?=.*[a-zA-Z])[a-zA-Z0-9]+$" title="Your new Password is required" required/>
<label><?php echo "<font color='red'>New Password(*):</font>" ?></label>
</div>
<div class="question">
<input type="password" name="confirm_pwd" pattern="^.*(?=.{6,})(?=.*[a-zA-Z])[a-zA-Z0-9]+$" title="Confirm Password field is required" required/>
<label><?php echo "<font color='red'>Confirm Password(*):</font>" ?></label>
<span class="required" id="doesNotMatch"></span>
</div>
<center>
<input type="submit" name="submit" onclick="checkPwdMatch();" onsubmit="return closeSelf(this);" value="Submit" />
<input type="hidden" name="user_id" id="user_id" value="<?php echo $user_id; ?>" />
</center>
</form>
I have a method to check if the pwdmatches, and upon successfully submitting the form, it should close with this method which is appended # the bottom of the page
function closeSelf(f){
f.submit()
window.close();
}
Also I moved this from the button to the form onsubmit="return closeSelf(this);", still no luck. Upon submitting the form, it just stays on the demo-change-passowrd.php. I also used window.location.replace to the demo-employeed page instead of window.close(), no luck as well. Can someone help please, I did
$("#myform").submit(function(e) {
//prevent Default functionality
e.preventDefault();
window.close();
Still no luck? am I missing something please?

I added an onsubmit attribute to form that would call 'click' on the close button (which has the class featherlight-close).
<form ... onsubmit="$('.featherlight-close').click()">

Related

Submitting multiple HTML forms with one button (JQuery/Ajax)

I've seen many of the other questions that involve this concept, however many of them suggest just using JQuery, which I tried multiple ways with no success.. I've never used Ajax, and this seems to be the best way to go about this, can anyone help me out with how to implement this? (Ajax or JQuery or however..) Below is the code of the two forms I'm using; following it will be general Javascript idea I was trying to implement, however, I did try many variations of it. I tried using timeouts, and functions such as preventDefault(); and stopPropagation(); all with no luck..
<div container="row-fluid">
<!-- This button appears if there are any items in stock within this warehouse -->
<div class="span2" style="<?php if($row_pending['Wh'.$row_pending['DefaultWh'].'Net'] > 0){}else{echo "display:none;";}?>">
<form method="post" name="ATCForm" id="ATCForm1">
<input id="qtywh1" type="hidden" name="qty" value="">
<input type="hidden" name="wh" value="<?php echo $row_pending['DefaultWh'];?>">
<input type="hidden" name="ot" value="ship">
<input type="hidden" name="net" value="<?php echo $row_pending['Wh'.$row_pending['DefaultWh'].'Net']; ?>">
<button class="btn btn-primary btn-ac" name="ATC" id="ATC1" type="submit" onclick="submitBoth()" value="ATC">Add to Cart</button>
</form>
</div>
<!-- This button appears if there are ZERO items in stock within this warehouse -->
<div class="span2" style="<?php if($row_pending['Wh'.$row_pending['DefaultWh'].'Net'] <= 0){}else{echo "display:none;";}?>">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="ATCForm" id="ATCForm1b">
<input id="qtywh1b" type="hidden" name="qty" value="0">
<input type="hidden" name="wh" value="<?php echo $row_pending['DefaultWh'];?>">
<input type="hidden" name="ot" value="backorder">
<input type="hidden" name="net" value="<?php echo $row_pending['Wh'.$row_pending['DefaultWh'].'Net']; ?>">
<button class="btn btn-primary btn-bo" name="ATC" id="ATC1b" type="submit" value="ATC">Add to Backorder</button>
</form>
</div>
</div><!-- row-fluid -->
Basic Javascript Logic:
<script>
$(document).ready(function{
function submitBoth(){
document.getElementById('ATCForm1').submut();
document.getElementById('ATCForm1b').submit();
}
});
</script>

how to show login first alert and fade or disable the current page if not login and if login then don't show alert

suppose i have this post a job page
<?php include_once "session.php" ;?>
<div id="wraper">
<?php include_once 'header.php'; ?>
<?php include_once 'navigationjp.php'; ?>
<div id="main">
<div id="content">
<div >
<form class="form" action="" method="post" >
<div class="lbl"><label><h2>Job Title: </h2></label></div>
<input class="inpu" type="input" name="title" required placeholder="HR Manager" /><br>
<div class="lbl"><label><h2>Degree: </h2></label></div>
<input class="inpu" type="input" name="degree" placeholder="MBA (HR)" /><br>
<div class="lbl"><label ><h2>Posts: </h2></label></div>
<input class="inpu" type="input" name="posts" placeholder="03" /><br>
<div class="lbl"><label><h2>Company: </h2></label></div>
<input class="inpu" type="input" name="company" required="" placeholder="Diamond Pvt Ltd Company" /><br>
<div class="lbl"><label><h2>Contact No: </h2></label></div>
<input class="inpu" type="text" name="contact" id="contact" required placeholder="0423121212" /><br><br>
<div class="lbl"><label><h2> </h2></label></div>
<input class="inpu" type="submit" name="submit" value="Post job" />
</form>
</div>
</div>
<?php include_once 'sidebar.php'; ?>
</div>
<?php include_once 'footer.php'; ?>
</div>
and i want that when someone click on form to write something it should check either user is signed in or not , if not signed in then i want to show an alert to user to login first if user is not signed in. how can i do it by using jquery or php ? can somebody tell me the example code please i don't know how to do it?
Well, you have 2 ways to do it, first is check this when the user enter the page above with php, something like this:
<?php if (!$user) { >?
<script>alert("Please log in first")</script>
<?php }?>
this will check the user right after he entered the page, you should provide us with more info about your login method and code so we can help you more specifically.
if you want to check if he is logged in after he already visited the page, you will need to use AJAX for that, php runs once after the page is loaded, so your way to talk with the php code after the page is loaded is with AJAX.
<script>
$("input.inpu").click(function() { //when the user clicked on the input
//do your ajax here.
});
</script>
you should read more about ajax here: http://api.jquery.com/jquery.ajax/

Hide and Show Input Mask

When running this solution to hide and show an input mask, on page load I am seeing both input boxes. My script has been placed on the bottom of the page as last script. I am basically hiding and showing one or the other input box based on the checkbox. All appears to be working perfectly on jsfiddle and this code snippet, yet on Chrome, Android browser, Firefox and Safari both input boxes display on page load. After I toggle the checkbox, then it works properly. Not sure what is causing it to show both input boxes on page load. Any help wold be appreciated.
var showPass=false;
$('#c').change(function(){
showPass = ($('#c:checked').length>0);
if (showPass){
$('#p').hide();
$('#transaction_id').show();
}else{
$('#transaction_id').hide();
$('#p').show();
}
});
$('#p').change(function(){
if (!showPass) $('#transaction_id').val($('#p').val());
});
$('#transaction_id').change(function(){
if (showPass) $('#p').val($('#transaction_id').val());
});
#transaction_id{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js"></script>
<div class="bs-example">
<form role="search" class="navbar-form navbar-left" id="form2" name="form2" autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or </label>
<input type="checkbox" id="c">
<span class="phonenum">Phone Number</span>
<div class="input-group">
<input type="text" name="transaction_id" id="p" class="form-control" placeholder="receipt or ID" autofocus>
<input type="text" name="transaction_id" id="transaction_id" class="form-control" placeholder="(999) 999-9999" style="display:none" autofocus />
<input type="hidden" id="activity_id" name="activity_id" value="<?php echo $_GET['recordID']; ?>" />
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default" onclick="this.disabled = true;
this.value = 'Saving...';
this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>
</div>
After trial and error, I found the solution. Just needed to initially hide the 2nd input:
<input type="text" name="transaction_id" id="transaction_id" class="form-control"
placeholder="(999) 999-9999" style="display:none" autofocus />
Simple solution. I have also fixed the code snippet for anyone who wants to use it.

Codeigniter submit function not working

on my http://localhost/qconsolidated/login_controller/login this error appears:
Object not found!
The requested URL was not found on this server. The link on the
referring page seems to be wrong or outdated. Please inform the author
of that page about the error.
I always get this error everytime i click the submit button on my form. I have checked my it back and forth for 2 days now, and still could't get it right. please help me. Here are the codes that I made:
login_controller.php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login_controller extends CI_Controller {
public function index(){
$this->load->view('template/header');
$this->load->view('login_view');
$this->load->view('template/footer');
}
public function login(){
echo "<script> alert('Working!'); </script>";
}
login_view.php
<div class="container">
<form class="form-login" method="post" action="/login_controller/login">
<img src="<?php echo base_url(); ?>public/img/q_logo.png">
<label class="sr-only">Email address</label>
<input type="email" name="email" class="form-control" placeholder="Email address" required autofocus>
<label class="sr-only">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
</div>
Please help me
change your action url.
<form class="form-login" method="post" action="<?php echo base_url()?>/login_controller/login">
change form action.Use something like this
<form class="form-login" method="post" action="<?php echo site_url('login_controller/login');?>">
you can also achieve this by using form_open('login_controller/login');
Try like this used base_url
<form class="form-login" method="post" action="<?php echo base_url("login_controller/login");">

Can't pass a text area value to my form

I'm currently re-designing a page on my site that allows registered users to send messages to the administrators. All the code I'm using is already fully functional on the other page but after moving everything across, it has stopped working, which has baffled me.
<textarea name="content" id="msgs" class="convo" ></textarea>
The text area is as simple as it gets, the form is wrapped around TR tags.
I know the form is working because I also submit to the form the date/time and the email address' of the sender and receiver. The form executes 'compose.php', writes to the database successfully and re-directs back to the customer's profile. The problem is that the "new" message is blank. Everything was sent to the form apart from the contents of the text area.
If I use a plain text area then everything works, so the problem has to be the 'WYSIWYG Content Editor' that I apply to the text area, even though it works fine on the other page?
bkLib.onDomLoaded
(
function()
{
new nicEditor({buttonList : ['bold','italic','underline','left','center','right','ol','ul','fontFamily','fontSize','fore color','link','unlink']}).panelInstance('msgs');
}
);
Does anyone have any idea where I can start? I've been troubleshooting this for a good few hours and it's starting to get the best of me! If you need any other snippets of code, let me know.
EDIT
Maybe this will help...
<textarea name="content" id="msgs" class="convo" >TEST MESSAGE</textarea>
When the page loads, "TEST MESSAGE" is written to the text area. If I submit it, the value is passed to the form and then to the database etc... But if I remove it and type my own words, nothing is sent across?
I have managed to fix the problem!
The old code was:
<form name="send" id="sndmsg" method="post" action="compose.php">
<tr>
<td width="90%" class="tab"> Compose New Message</td>
</tr>
<tr>
<td>
<textarea name="content" id="msgs" class="convo" ></textarea>
</td>
</tr>
<tr>
<td>
<input name="user_s" type="hidden" id="user_s" value="<?PHP echo $user;?>" />
<input name="user_r" type="hidden" id="user_r" value="<?PHP echo $email;?>" />
<input name="fname" type="hidden" value="<?PHP echo $fullname;?>" />
<input type="image" src="/send.png" />
</td>
</tr>
</form>
Which was clearly, not working. The new code does work, which is the following:
<tr>
<td width="90%" class="tab"> Compose New Message</td>
<form name="send" id="sndmsg" method="post" action="compose.php">
<textarea name="content" id="msgs" class="convo" ></textarea>
<input name="user_s" type="hidden" id="user_s" value="<?PHP echo $user;?>" />
<input name="user_r" type="hidden" id="user_r" value="<?PHP echo $email;?>" />
<input name="fname" type="hidden" value="<?PHP echo $fullname;?>" />
<input type="image" src="/send.png" />
</form>
</td>
</tr>

Categories

Resources