I have some HTML elements like these:
<form id="my_form" name="my_form" method="post">
Some of Form elements
</form>
<a id="open_dialog" href="#dialog">Open Dialog</a>
<div id="dialog">
Content
<a onclick="parent.$.fancybox.close();">Close and Submit Form</a>
</div>
<script type="text/javascript">
$("a#open_dialog").fancybox({
afterClose : function() {
$("#my_form").submit();
}
});
</script>
When I click the link "Close and Submit Form", the #dialog closed as expected but the form#my_form don't submit.
How can I submit the form when close a fancybox?
Related
I'm currently trying to implement a form which has multiple toggle button.
For example, something like this:
The number of the options will be different each time.
For example, if the title is Chef's pizza, the option may be "Add cheese", "Add extra tomato", and "Add black olive". There can be a large number of options (like 100s) depending on the item.
The text of the toggle button will be changed from "Select" to "Selected" or vice versa.
So far, I was able to implement toggle buttons with changing the text on it. However, I'm currently facing challenge how I can get the status of the toggle buttons via req.body.
I'm using node + express + Bootstrap 5 + EJS + mongoDB.
JQuery is also used to toggle the text on the switch.
I included console.log(req.body) to the controllers js file which is called from route js file but the result is as the following:
req.body
{ post: { comment: 'Please remove tomato' } }
As you can see, it only includes the input from text form("Please remove tomato"). How can I get the status of each toggle button (selected/unselected) via this req.body so I can use them in the next process(store those to mongoDB)?
As the number of the options are different (and can be large) for each item, I'm thinking to generate the toggle buttons with something like name="<%= optionIdFromMongoDB %>" for the name field of the form tag of for each options and was wondering how I can collect the result via req.body for each options.
Following is the code.
[selectItem.ejs]
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/javascripts/external.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
</head>
<body>
<div class="row">
<h1 class="text-center">Select Option</h1>
<div class="col-md-6 offset-md-3">
<form id="sub-form" action="/posts/<%= order._id %>/review" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Title</label>
<h3>Chef's salad</h3>
</div>
Add cheese
<span id="buttonsend" class="notsosmall pink button">
<input form="sub-form" type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="post[toggle]">
<span class="btn btn-primary" for="btn-check" name="post[toggleA]" value="unselected">Select</span>
<span class="btn btn-primary" for="btn-check" style="display:none" name="post[toggle]" value="selected">Selected</span>
</span>
<br>
Add bacon
<span id="buttonsend" class="notsosmall pink button">
<input form="sub-form" type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="post[toggle]">
<span class="btn btn-primary" for="btn-check" name="post[toggleB]" value="unselected">Select</span>
<span class="btn btn-primary" for="btn-check" style="display:none" name="post[toggle]" value="selected">Selected</span>
</span>
<div class="mb-3">
<button class="btn btn-lg btn-primary font-weight-bold border-white text-white">Post</button>
</div>
</form>
</div>
</div>
</body>
[external.js (used to toggle the text on the button)]
$(document).ready(function(){
$('span#buttonsend').click(function(){
$('span',this).toggle();
});
});
[/routes/posts.js]
const express = require('express');
const router = express.Router();
const posts = require('../controllers/posts')
router.route('/posts/:id/review')
.post(isLoggedIn, catchAsync(posts.review))
[/controllers/posts.js]
module.exports.review = async (req, res, next) => {
console.log("req.body")
console.log(req.body)
// some more codes here
res.render('posts/review')
}
Thank you,
I have inserted the following code in Sharepoint and each time I click on the button to open modal, it opens but only for a few moments, then it automatically closes. However, when using this exact same code outside of sharepoint, it works just fine.
Below is the code that I have been using:
<div class="icons">
<div class="icon-boxes">
<div class="icon-boxes-Asset">
<div class="zoom2">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.jpg" alt=""><p>Asset</p>
</button>
</div>
</div>
</div>
</div>
<!-- This is the MODAL section, this popup section for each icon -->
<!-- This is the Asset Forfeiture MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<div class="Asset-content">
<img class="image-icon" src="Asset.jpg" alt="">
<div class="Heading-Asset">
<div class="Heading-Asset-Name" alt="">
<h2>Asset Page</h2></div>
<div class="Heading-Asset-Address" alt="">
<h3>Washington State</h3></div>
</div>
<span class="close-Asset">×</span>
</div>
<div class="line"></div>
<div class="Asset-content-info">
<body>Lorem</body>
<br>
<br>
<body>Lorem.</body>
<p>Contact: (A) SOS Phillip (360) 333-3333</p>
<p>Asset Page</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
<!----------------------------------------->
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
I'm following the IdentityServer3 jsGettingStarted sample github sample
But I'm trying to do so using MVC.
(The IdentityServer itself is in a separate project and solution as per the sample documentation.)
Providing the index.html page is via a Controller-Action, which is fine.
The login popup "popup.html" which is actually "popup.cshtml" is also via a Controller action and it also displays, but it won't close and display the user credentials in the index page as shown in the Sample.
But putting a few alerts in, .. the user is definitely logged in.
I also tried moving the popup.html into the root of the project (as .html and not as .cshtml and changing the server's Client.cs' RedirectUris to reflect that change) but without success.
Is it because of the cshtml pages being served from my controller actions ?
The documentation says that this should display by calling the display function, but the "manager.events.addUserLoaded" function is not firing, which calls the display function.
I am using VS2017 MVC5 with Framework 4.8.
Thanks
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/oidc-client.js"></script>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS Application</a>
</div>
</div>
</nav>
<div class="container main-container">
<div class="row">
<div class="col-xs-12">
<ul class="list-inline list-unstyled requests">
<li>Home</li>
<li><button type="button" class="btn btn-default js-login">Login</button></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">User data</div>
<div class="panel-body">
<pre class="js-user"></pre>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
// helper function to show data to the user
function display(selector, data)
{
if (data && typeof data === 'string')
{
data = JSON.parse(data);
}
if (data)
{
data = JSON.stringify(data, null, 2);
}
alert("selector=" + data);
$(selector).text(data);
}
var settings = {
authority: 'https://localhost:44302', // The url of the IdentityServer
client_id: 'js',
popup_redirect_uri: 'http://localhost:44888/Account/Popup',
response_type: 'id_token token',
scope: 'openid profile email',
filterProtocolClaims: true
};
var manager = new Oidc.UserManager(settings);
var user;
manager.events.addUserLoaded(function (loadedUser)
{
alert("userManager");
user = loadedUser;
display('.js-user', user);
});
$('.js-login').on('click', function ()
{
manager
.signinPopup()
.catch(function (error)
{
console.error('error while logging in through the current window or popup', error);
});
});
</script>
By creating a standalone project rather than trying to do it in already established project, I managed to get it to work. There were clashes in the scripts and css we were already using.
Trying to implement Worldpay integration. The docs at https://online.worldpay.com/docs/take-card-details-templates mention a token. I have tested the page and I dont get any token. Wandering how i can get this token.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="payment2.aspx.cs" Inherits="payment2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src= "https://cdn.worldpay.com/v1/worldpay.js">
</script>
<script type='text/javascript'>
window.onload = function () {
Worldpay.setClientKey('T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04');
Worldpay.reusable = false;
Worldpay.useTemplate('payment-form', 'my_payment_section', 'inline');
}
</script>
</head>
<body>
<form action="/complete" id="payment-form" method="post">
<!— all other fields you want to collect, e.g. name
and shipping address -->
<div id='my_payment_section'></div>
<div>
<input type="submit" value="Place Order" />
</div>
</form>
</body>
</html>
When the window.onload executes, it puts the WorldPay card capture form on your page. By the looks of it, you haven't disabled their Save Payment button, so are you trying to use your own submit button?? If you are trying to use your submit button, then you should add the onclick attribute to submit the worldpay template.
<input type="submit" value="Place Order" />
<form action="/complete" id="payment-form" method="post">
<div id="my_payment_section"></div>
<div>
<input id="submitCard" onclick="Worldpay.submitTemplateForm()" value="Confirm Payment" />
</div>
</form>
Once the form submits, worldpay.js takes over, and it will handle the sensitive card information, validate it and if all is ok, it will replace the cardDetails div with a single hidden input field which is the token.
If that all happens correctly, with no errors, after the token input has been placed in the DOM, the form will submit to your action "/complete", and the token will be part of the submitted values of the form.
Hope that helps.
Your script is missing the callback to generate the token in useTemplate()
See: https://developer.worldpay.com/jsonapi/docs/template-form
The callback generates the hidden input with the token value for you which posts to worldpay.
your script should be:
<script type='text/javascript'>
window.onload = function() {
Worldpay.useTemplateForm({
'clientKey':'T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04',
'form':'paymentForm',
'paymentSection':'paymentSection',
'display':'inline',
'reusable':false,
'callback': function(obj) {
if (obj && obj.token) {
var _el = document.createElement('input');
_el.value = obj.token;
_el.type = 'hidden';
_el.name = 'token';
document.getElementById('paymentForm').appendChild(_el);
document.getElementById('paymentForm').submit();
}
}
});
}
</script>
You also need the onclick="Worldpay.submitTemplateForm()" attribute on your submit too.