I'm developing a WebApp using grunt on a Linux machine. I have a feedback page, with a bunch of form objects on it. I'm trying to get the forms to be read by a FormSubmission.asp so that it sends an email to me whenever feedback is submitted.
In feedback.html
<div class="form-group">
<label for="exampleInputEmail1">Email Body</label>
<textarea class="form-control" rows="5" id="commentInput" name="commentInput"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default" form="commentInput","inputEmail",
formaction="FormSubmission.asp">Submit</button>
In FormSubmission.asp
<!DOCTYPE html>
<html>
<body>
<%
dim from
from = Request.Form("inputEmail")
dim comment
comment = Request.Form("commentInput")
Set eMail=CreateObject("CDO.Message")
eMail.Subject="Feedback"
eMail.From=from
eMail.To="MyEmail#mydomain.com"
eMail.TextBody=comment
eMail.Send
set eMail=nothing
Response.Write("Done")
%>
</body>
</html>
I've followed a lot of the tutorials from We3. I've also downloaded grunt-iisexpress to run IIS on my grunt server. Nothing seems to work. What am I doing wrong? Are there any easier alternatives to asp to send emails?
Related
I'd like to ask for help in creating a javascript function to call an AWS API gateway. This is essentially for a serverless contact form for a website hosted on AWS. I created and tested the lambda function and i created and tested an API gateway. All work as intended. I'm having trouble figuring out what a JS function would look like to call the API. I'm providing the HTML code for the form but essentially it's a button that links to a function, taht I haven't created, called submitToAPI(event). I found functions online for jQuery but my knowledge in this area is basically null.
Not trying to use nodejs or jQuery if possible (not trying to be difficult but I don't know how to use these).
<form id="contact-form" method="post">
<h4>Name:</h4>
<input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/>
<h4>Phone:</h4>
<input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/>
<h4>How can we help you?</h4>
<textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/>
<div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div>
<button type="button" onClick="submitToAPI(event)" class="btn btn-primary">Submit</button>
</form>
You can use the action attribute : <form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post">...</form>
and use a button of type submit : <button type="submit" class="btn btn-primary">Submit</button>
Here is a link to the docs : https://www.w3schools.com/tags/att_form_action.asp
And here is a example :
<form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post">
<h4>Name:</h4>
<input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/>
<h4>Phone:</h4>
<input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/>
<h4>How can we help you?</h4>
<textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/>
<div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Just paste this script tag above your current script so it is the first one..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I'm trying to add an Autofill Generator from Linkedin in my form.
First, I'm using a button "sign in with linkedin" into my form and then I have added a script for the autofill.js
My button "sign in with linkedin" is working but the button to filling the form with informations from Linkedin doesn't display.
Here is my code :
<form method="post" action="#" id="contactForm">
<div class="line">
<div class="formItem"><input type="text" name="FIRSTNAME" placeholder="Firstname *" required /></div>
<div class="formItem formR"> <input type="text" name="LASTNAME" placeholder="Lastname *" required /></div>
</div>
<div class="line">
<div class="formItem"><input type="text" name="COMPANY_NAME" placeholder="Company *" required /></div>
<div class="formItem formR"><input type="email" name="MAIL" id="EMAIL" placeholder="Email *" required /></div>
</div>
<div class="line">
<div class="formItem"><input type="text" name="PHONE" id="PHONE" placeholder="Phone *" required /></div>
</div>
<div class="line">
<input type="submit" value="Submit" >
</div>
</form>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: [my_api_key]
authorize: true
</script>
<script type="in/Login"></script>
<script src="https://www.linkedin.com/autofill/js/autofill.js" type="text/javascript" async></script><script type="IN/Form2" data-form="contactForm" data-field-firstname="FIRSTNAME" data-field-lastname="LASTNAME" data-field-phone="PHONE" data-field-email="EMAIL" data-field-company="COMPANY_NAME"></script>
I don't know if there's a special condition to use for the Autofill Generator or if I have to add something in my app,..
Do you have any idea ?
Thank you very much for you time.
Since the support of Linkedin send me here to find answers of my problem, I restart my question if anybody could have an idea.
I need to add a Linkedin Autofill Generator in my form on a website created via Selligent, so here step by step what I did :
I have created an app and have filled the informations required for it (email, url, ..)
Then when my app was created, I have added two URL in OAuth 2.0 and 2 URL for domain SDK
Concerning the integration, it's the code in my previous post.
But, when I checked my console, I see this following error message : Load denied by X-Frame-Options: [deleted link] does not permit cross-origin framing.
here's the error
Is there something else to whitelist ? Error in my code ?
Thank you very much !
I'm trying to get rid of the "put your password in again to confirm it" field in my sign up form. The design pattern I've seen to get around this is a checkbox which will reveal the password to the user - so they can verify it. However, implementing it seems to be a pain.
Here's my relevant html:
<form name="signup">
<div class="form-group">
<input id="usernameInput" class="form-control" placeholder="username">
</div>
<div class="form-group">
<input type="email" id="emailInput" class="form-control" placeholder="email">
</div>
<div class="form-group">
<input type="password" name="passwordInput" class="form-control" placeholder="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="show-pass" value='1' onchange="showPass()"> Show password
</label>
</div>
<button type="submit" class="btn btn-info btn-lg">Sign Up</button>
Back
</form>
And the accompanying javascript:
function showPass() {
document.signup.passwordInput.type=(document.signup.show-pass.value=(document.signup.show-pass.value==1)?'-1':'1')=='1'?'text':'password';
}
However, when I try it in firefox, I get the following console error:
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.
The error is a little cryptic seeing as the issue isn't with having a password field on a non-https website (I had it working before). Is there something I'm missing here?
If you have ever heard about jQuery use it, it will be easirer
$('#id-of-checkbox').change(function(){
if($(this).is(':checked')){
$('.password-fields').attr('type','text');
} else {
$('.password-fields').attr('type','password');
}
});
This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.
No error is also showing in the console; only a warning is showing saying:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
My form and the JS code is given below.
<form id="login-form" method="post" action="#" novalidate>
<label for="login-email" class="control-label">Email : </label>
<input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
<label for="login-password" class="control-label">Password : </label>
<input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
<input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>
$("#login-form input").not("[type=submit]").jqBootstrapValidation();
You must use proper controls in your markup for this to work.
Ex.
<form ...>
<div class="control-group">
<label ...>Email</label>
<div class="controls">
<input ... />
<p class="help-block"></p>
</div>
</div>
</form>
And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.
Ex.
/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});
/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});
Then simply add your "validated" class to anything you need validated:
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
Hope this helps!
I integrated nicEdit because it's very light unlike all the other ones that contain hundreds of kb's.
In Chrome it is however causing problems. It for example doesn't save the text into the textarea or make things bold. The problem can be observed at this website or see below code. Please don't provide a hack like one answerer did because that's not going to help anything.
I have disabled the editor for debugging purposes. You can enable it with your console through new nicEditor().panelInstance('comment');
<div class="rdd blog-item">
<h1><a id="blog-item-title" href="/b/asdfssadfadf">this ia test</a></h1>
<div class="blog-date">
Date posted: 2013-03-01
</div>
<div class="blog-message">
<p>
asdfasdfas
</p>
</div>
<div class="blog-keywords">
Keywords: dfsa sadfasd adfasf adfas
- jlk
</div>
<h4>0 Comments</h4>
<div class="blog-comment blog-new-comment">
<form id="new_comment" name="new_comment">
<div class="blog-comment-row">
<h4></h4>
<h4>Would you like to place a comment?</h4>
</div>
<div class="blog-comment-row">
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</div>
<div class="blog-comment-row">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" title="Enter your name">
</div>
<div class="blog-comment-row">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" title="Enter your email">
</div>
<div class="blog-comment-row">
<div class="blog-comment-cell">
</div>
<div class="blog-comment-cell">
<a class="blog-comment-submit blog-comment-button" href="">Submit</a><br/>
Your ip address is 220.245.93.218
</div>
</div>
</form>
</div>
</div>
The Bold problem is caused by CSS inheritance. In your css file remove rdd blog-item span{} and it will work. nicEdit does not save the contents automatically in the textarea. At form submission you therefore have to run: nicEditors.findEditor('comment').saveContent(); to save it
You can bind events on the editor and save it's contents when that event is fired.
When I run this code on your example page, it works for me (your server doesn't pickup the nicEditor HTML tags though):
var commentNicEditor = new nicEditor().panelInstance('comment');
commentNicEditor.addEvent("blur", function () {
commentNicEditor.instanceById('comment').saveContent();
});
Updated with jQuery-free solution based on official documentation.