I just want a simple form that sends the user to an adress with a added value from the form. Like http://example.com(value from input name "epost")
Is it possible to do that without any script etc?
<form method="get" action="http://google.com">
E-post:<br>
<input type="text" name="epost">
<p>
Organisation
<select name="organisation">
<option value="1">org 1</option>
<option value="2">org 2 Korset</option>
</p>
</br>
<input type="submit" value="Done">
</form>
You can send params in url using GET:
<form action="http://www.google.com/search" target='_blank'>
Key word:
<input type='text' name='q' value='Rob' />
<input type='submit' />
</form>
<a href="http://www.google.com/search?q=Rob" target='_blank'>Search for Rob</a>
Related
I would like to make forms in JS that act like they're inheriting...For example, I can easily append form elements all day long using a for loop, but I'd rather leave myself the freedom to insert a different element in the middle. In other words, I want this to be 'modular', and have a base class that can generate something simple like a login screen, but then extend it to include dropdowns in between text fields. Any ideas as to how to make this happen? Preferably with ES6 classes and import/export and without the webpack nonsense.
Ideally i'd have a class called BasicForm and have RegistrationForm extends BasicForm. This way, I could simply store field names in an array and change that file once if i needed to make changes as opposed to changing everything. Here's the existing code....Note that "invoices" is only shown if the user role option selected is "admin"....which makes the idea of trying to make this all very difficult for me to comprehend. Is there any way to procedurally generate, with bootstrap and custom classes, this from Javascript using ES6 classes, such that the module may be reused to create forms either with or without dropdowns?
HTML:
<div class= "row"> <!--Inherits background from .body-->
<div class="col-hidden col-sm col-md col-lg col-xl"> <!--spacing divs inherit background from .body-->
</div>
<div class="form-box rounded col-12 col-xs col-sm-7 col-md-6 col-lg-4 col-xl-3"> <!--Actual box containing fields and prompts and buttons changes to new background-->
<h2 class="portal-heading">Registration</h2>
<form name="new_user_form">
Email Address<input type="text" class="form-control register-field highlight-hover" name="email" value="" placeholder="Email Address"><br>
Re-Enter Email Address<input type="text" class="form-control register-field highlight-hover" autocomplete="off" name="email" value="" placeholder="Re-enter Email Address"><br>
First Name<input type="text" class="form-control register-field highlight-hover" autocomplete="given-name" name="firstname" value="" placeholder="First Name"><br>
Last Name<input type="text" class="form-control register-field highlight-hover" autocomplete="family-name" name="lastname" value="" placeholder="Last Name"><br>
Company Name<img src="images/help-icon.png">
<select class="form-control register-field highlight-hover" name="company">
<option value="noSelect">Select</option>
<option value="company2">Company 2</option>
</select>
Mobile Phone <img src="images/help-icon.png">
<input type="text" class="form-control register-field highlight-hover" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
Portal User Role <img src="images/help-icon.png">
<select class="form-control register-field highlight-hover" name="role" id="user-role">
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
<div id="invoices">
Enter two recent invoice totals in USD($)<br>
Invoice 1<input type="text" class="form-control register-field highlight-hover" name="invoice1" value="" placeholder="0.00">
Invoice 2<input type="text" class="form-control register-field highlight-hover" name="invoice2" value="" placeholder="0.00">
</div>
<button class="btn btn-block highlight-hover" id="submit">Submit</button>
</form>
</div>
<div class="col-hidden col-sm col-md col-lg col-xl"> <!--spacing divs-->
</div>
</div>
I would suggest using Web Components. They're native, have support in Chrome with other browsers soon to come, and you can use a polyfill for other browsers. With below code:
class WordCount extends HTMLParagraphElement {
constructor() {
// Always call super first in constructor
super();
//put code here
}
}
Insert code found at https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements after super() with your element functionality
Define a new element: `customElements.define('popup-info', PopUpInfo);
And then you can use it like this:
<popup-info img="img/alt.png" text="Your card validation code (CVC)
is an extra security feature — it is the last 3 or 4 numbers on the
back of your card.">
Example taken from link above, in Mozilla's Dev Site.
Not sure if this can help (?): classList, it is meant to test if a class exist, at a precise position.
It isn't well documented, but found it very useful to bind stuffs.
Using a timeout for the demo (Added id="company" class="hidden"):
function toggle(id){
if (id.classList[0] === "hidden"){
id.classList = "unhidden"
}
else {
id.classList = "hidden"
}
}
setTimeout(function(){
toggle(company)
},3000)
.hidden {display: none}
.unhidden {display: block}
<div class= "row">
<div>
</div>
<div>
<h2>Registration</h2>
<form name="new_user_form">
Email Address<input type="text" name="email" value="" placeholder="Email Address"><br>
Re-Enter Email Address<input type="text" autocomplete="off" name="email" value="" placeholder="Re-enter Email Address"><br>
First Name<input type="text" autocomplete="given-name" name="firstname" value="" placeholder="First Name"><br>
Last Name<input type="text" autocomplete="family-name" name="lastname" value="" placeholder="Last Name"><br>
Company Name<a href="#"
data-toggle="tooltip" title="Choose your company name. If you do not see it here, please contact ACSI to become an official distributor."><img src="images/help-icon.png"></a>
<select id="company" class="hidden" name="company">
<option value="noSelect">Select</option>
<option value="company2">Company 2</option>
</select>
Mobile Phone <img src="images/help-icon.png">
<input type="text" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
Portal User Role <img src="images/help-icon.png">
<select name="role" id="user-role">
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
<div id="invoices">
Enter two recent invoice totals in USD($)<br>
Invoice 1<input type="text" name="invoice1" value="" placeholder="0.00">
Invoice 2<input type="text" name="invoice2" value="" placeholder="0.00">
</div>
<button id="submit">Submit</button>
</form>
</div>
<div>
</div>
</div>
Steps:
Create a div, append it to document.
Create a form, append it to div.
Create fieldsets, append to form.
4.Create form fields, append to fieldset.
class BasicForm {
constructor(formId,formTitle) {
this.form = document.createElement('form');
this.form.id = formId;
this.form.method = 'post';
this.form.enctype = 'multipart/form-data';
this.topFieldset = document.createElement('fieldset');
this.topLegend = document.createElement('legend');
this.topLegend.appendChild(document.createTextNode(formTitle));
this.topFieldset.appendChild(this.topLegend);
this.form.appendChild(this.topFieldset);
this.div = document.createElement('div');
this.div.appendChild(this.form);
// add div to the document
// add fields to the topFieldset
}
}
class RegistrationForm extends BasicForm {
constructor() {
super();
// add fields of derived form
}
}
Note: the code is not tested.
I have a simple form which I would like to redirect the user to a specific URL within my site, depending on the value they have selected. So far I have this but instead of directing to one of the 4 urls, I instead get "http://mydomain.com/?ApplianceType=americano.html&sub=Submit" in my address bar:
<form name="form1" method="get">
<p>
<label>
<select name="ApplianceType" id="ApplianceType">
<option value="americano.html">American Fridge Freezer</option>
<option value="freezer.html">Freezer only</option>
<option value="fridge.html">Fridge only</option>
<option value="fridgefreezer.html">Fridge/Freezer</option>
</select>
</label>
<label>
<input type="submit" name="sub" id="sub" value="Submit">
</label>
</p>
</form>
Can anyone please advise?
You can change your HTML:
<form name="form1" id="yourForm" action="americano.html" method="get"> <!-- Added an ID to the form, and set the default value of `action` to 'americano.html'. -->
<p>
<label>
<select name="ApplianceType" id="ApplianceType" onchange="setURL(this)"> <!-- Assigned the `select` to run the function on value change. -->
<option value="americano.html">American Fridge Freezer</option>
<option value="freezer.html">Freezer only</option>
<option value="fridge.html">Fridge only</option>
<option value="fridgefreezer.html">Fridge/Freezer</option>
</select>
</label>
<label>
<input type="submit" name="sub" id="sub" value="Submit">
</label>
</p>
</form>
Then use the following Javascript function:
<script>
function setURL(selectedValue)
{
var element = document.getElementById('yourForm'); // Change 'yourForm' to the actual ID you assign on your form.
element.action = selectedValue.value;
}
</script>
Please take note of the comments in the code.
Is it possible to encrypt our credit card information entered by user on my website's payment form?
<form method="post" action="/doDirect" enctype="application/x-www-form-urlencoded">
Card Number:<br>
<input type="text" name="card_number" placeholder="CARD NUMBER" id="ccnum" ><br>
First Name:<br>
<input type="text" name="firstName" placeholder="FIRST NAME"><br>
Last Name:<br>
<input type="text" name="lastName" placeholder="LAST NAME"><br>
Card Type:<br>
<select name="ctype" id="ctype" required="required">
<option value="visa">VISA</option>
<option value="master">MASTER</option>
<option value="maestro">MASTERO</option>
<option value="americanexpress">AmericanExpress</option>
</select>
<br>
Expire Date:
<br>
<select name="exmonth" required="required">
<option value="">Month</option>
#for(i<-1 to 12){
#if(i<10){
<option value="0#i">0#i</option>
}else{
<option value="#i">#i</option>
}
}
</select>
/
<select name="exyear" required="required">
<option value="">Year</option>
#for(i<-1990 to 2033){
<option value="#i">#i</option>
}
</select> <br>
CVV2:<br>
<input type="text" name="cvv2" max="999" maxlength="3" required="required">
</div>
}
<input type="submit" value="Checkout" onclick="return isValidCreditCard()">
</form>
If we see, Braintree provides the encryption javascripti so then we won't get the real human readable entry.
Braintree example to do so
<h1>Braintree Credit Card Transaction Form</h1>
<div>
<form action="/create_transaction" method="POST" id="braintree-payment-form">
<p>
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" data-encrypted-name="number" />
</p>
<p>
<label>CVV</label>
<input type="text" size="4" autocomplete="off" data-encrypted-name="cvv" />
</p>
<p>
<label>Expiration (MM/YYYY)</label>
<input type="text" size="2" name="month" /> / <input type="text" size="4" name="year" />
</p>
<input type="submit" id="submit" />
</form>
</div>
And here is the Js
<script src="https://js.braintreegateway.com/v1/braintree.js"></script>
<script>
var braintree = Braintree.create('MIIBCgKCAQEA2ob0KfqpQ2xuy0zlq2a/amOuu0zkVdNHo45xSQVDErJEf2e/8rrAq40eh3C1sjm8DTFt8HLMvPDwi+nmOimuXQwdtkmszmMnJI5HLlvOCPyEgIxPgjKeyE3wzLOtDCMuQ3zKX2yU/v0rhqu4bng5knFoNLjjN6eet00u4Z5Jp84eDeZgevh1+Yb6Ca6P2iLQQherBupxmiKzAtImeyoeUoLDmBO68CFZd0rvxaKbUQ9yW+pHywpQrkSoQs9Z9J9W6HZ+w2YpYWmV0z2tJmYo8RvnKwyplFEC0EPZ+IPXJatcqQlTjQXhboXnCx2WZDQuVdzIRudmxLOM6m+hGetG1wIDAQAB');
braintree.onSubmitEncryptForm('braintree-payment-form');
</script>
Is there any way given by the paypal to encrytp the data using JS or any other tool?
Hope for the positive response
Honest answer.
Don't.
Just ... don't.
PCI compliance is a nasty, hairy beast.
If you handle any Card Holder data, there is LOT that you have to do.
Most folks will "call out" to a credit card server provider who will handle the data then call your website back with a simple "accept/reject" code that you can then respond to.
For a quick overview, see:
http://www.pcicomplianceguide.org/pcifaqs.php
This is what I'm working on:
<form name="leave" method="post" action="lins.jsp" onSubmit="chk();">
<center>
<p>Leave Type: <select id="myl" name="Type">
<option> </option>
<option>Casual</option>
<option>Extended</option>
<option>Medical/Sick</option>
</select>
<p>Start Date: <input type="text" id="datepicker" name="dt"></p>
<p>End Date: <input type="text" id="datepicker2" name="edt"></p>
<input type="submit" value="Submit" name="subm" />
<input type="reset" value="Clear" name="clr" />
</center>
</form> `
Is there any way to display an additional set of buttons(Basically to upload a file) when Medical option is chosen (without directing to a fresh page)?
You can achive this by using JQuery :
<script type="text/javascript">
function showBtn(ele)
{
if($(ele).val() == "medical"){
$("#uploadFile").show();
}
else{
$("#uploadFile").hide();
}
}
</script>
HTML Code :
<form name="leave" method="post" action="lins.jsp" onSubmit="chk();">
<center>
<p>Leave Type: <select id="myl" name="Type" onchange="showBtn(this)">
<option> </option>
<option value="casual">Casual</option>
<option value="extended">Extended</option>
<option value="medical">Medical/Sick</option>
</select>
<p>Start Date: <input type="text" id="datepicker" name="dt"></p>
<p>End Date: <input type="text" id="datepicker2" name="edt"></p>
<input type="submit" value="Submit" name="subm" />
<input type="reset" value="Clear" name="clr" />
<input type="file" value="Upload File" name="file" id="uploadFile" style="display: none;" />
</center>
</form>
Here i have given value to the options in dropdown, added upload file button in form but initially it is hidden. I have call function showBtn(ele) on onChange event of dropdown, in that function i have cheked that if value of selected option is medical than show button else hide it.
You could show that using jquery hide/show() event
Create a button,
<button id="hideMe">Upload file</button>
And following jquery ,
$(document).ready(function(){
$("#hideMe").hide();
var selVal=$('#my1').va();
if(selVal=="Medical"){
$("#hideMe").show();
}
return false;
});
});
Hope it helps !!
I have the following form (in brail):
<form method="post" enctype="multipart/form-data" action="${UrlHelper.For({#action:'Upload'})}">
<p><b>Select Template:</b>
<select id="template">
<option selected>Select One..</option>
<option value="Research">Research</option>
</select>
</p>
<br/>
<p><b>Download Worksheet:</b> <a id="downloadLink">Worksheet</a></p>
<br/>
<p><b>Research Item Upload</b></p>
<fieldset>
<legend>Upload Research Items File</legend>
<label for="file">File</label>
<input type="file" name="file" size="80" accept="application/vnd.ms-excel,application/excel,application/x-msexcel" />
<br />
<input type="submit" value="Upload" />
</fieldset>
</form>
Which posts to the following method signature on my controller:
[AccessibleThrough(Verb.Post)]
public UploadResults Upload(string template, [HttpPostedFileAdapterBinder] IHttpPostedFileAdapter file) {}
When I post the form, I only get the file. The template var is null and I am not sure why. Does anyone see something obvious I am missing?
You're missing the name attribute on the <select>:
<select name="template" id="template">
...
</select>