Is it possible to implement mailto: function on submit button like <input type="submit" />? I use ASP.NET MVC. Maybe there is some tricky controller action result to achieve this. Could you please help me?
P.S. I know that I can make anchor looks like a button.
In HTML you can specify a mailto: address in the <form> element's [action] attribute.
<form action="mailto:youraddr#domain.tld" method="GET">
<input name="subject" type="text" />
<textarea name="body"></textarea>
<input type="submit" value="Send" />
</form>
What this will do is allow the user's email client to create an email prepopulated with the fields in the <form>.
What this will not do is send an email.
This seems to work fine:
<button onclick="location.href='mailto:em#i.l';">send mail</button>
What you need to do is use the onchange event listener in the form and change the href attribute of the send button according to the context of the mail:
<form id="form" onchange="mail(this)">
<label>Name</label>
<div class="row margin-bottom-20">
<div class="col-md-6 col-md-offset-0">
<input class="form-control" name="name" type="text">
</div>
</div>
<label>Email <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-6 col-md-offset-0">
<input class="form-control" name="email" type="text">
</div>
</div>
<label>Date of visit/departure </label>
<div class="row margin-bottom-20">
<div class="col-md-3 col-md-offset-0">
<input class="form-control w8em" name="adate" type="text">
<script>
datePickerController.createDatePicker({
// Associate the text input to a DD/MM/YYYY date format
formElements: {
"adate": "%d/%m/%Y"
}
});
</script>
</div>
<div class="col-md-3 col-md-offset-0">
<input class="form-control" name="ddate" type="date">
</div>
</div>
<label>No. of people travelling with</label>
<div class="row margin-bottom-20">
<div class="col-md-3 col-md-offset-0">
<input class="form-control" placeholder="Adults" min=1 name="adult" type="number">
</div>
<div class="col-md-3 col-md-offset-0">
<input class="form-control" placeholder="Children" min=0 name="childeren" type="number">
</div>
</div>
<label>Cities you want to visit</label><br />
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Cassablanca">Cassablanca</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Fez">Fez</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Tangier">Tangier</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Marrakech">Marrakech</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Rabat">Rabat</label>
</div>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<textarea rows="4" placeholder="Activities Intersted in" name="activities" class="form-control"></textarea>
</div>
</div>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<textarea rows="6" class="form-control" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<p><a id="send" class="btn btn-primary">Create Message</a></p>
</form>
JavaScript
function mail(form) {
var name = form.name.value;
var city = "";
var adate = form.adate.value;
var ddate = form.ddate.value;
var activities = form.activities.value;
var adult = form.adult.value;
var child = form.childeren.value;
var comment = form.comment.value;
var warning = ""
for (i = 0; i < form.city.length; i++) {
if (form.city[i].checked)
city += " " + form.city[i].value;
}
var str = "mailto:abc#x.com?subject=travel to morocco&body=";
if (name.length > 0) {
str += "Hi my name is " + name + ", ";
} else {
warning += "Name is required"
}
if (city.length > 0) {
str += "I am Intersted in visiting the following citis: " + city + ", ";
}
if (activities.length > 0) {
str += "I am Intersted in following activities: " + activities + ". "
}
if (adate.length > 0) {
str += "I will be ariving on " + adate;
}
if (ddate.length > 0) {
str += " And departing on " + ddate;
}
if (adult.length > 0) {
if (adult == 1 && child == null) {
str += ". I will be travelling alone"
} else if (adult > 1) {
str += ".We will have a group of " + adult + " adults ";
}
if (child == null) {
str += ".";
} else if (child > 1) {
str += "along with " + child + " children.";
} else if (child == 1) {
str += "along with a child.";
}
}
if (comment.length > 0) {
str += "%0D%0A" + comment + "."
}
if (warning.length > 0) {
alert(warning)
} else {
str += "%0D%0ARegards,%0D%0A" + name;
document.getElementById('send').href = str;
}
}
Or you can create a form with action:mailto
<form action="mailto:rohit#k.com">
check this out.
http://webdesign.about.com/od/forms/a/aa072699mailto.htm
But this actually submits a form via email.Is this what you wanted?
You can also use just
<button onclick=""> and then some javascript with it to ahieve this.
And you can make a <a> look like button.
There can be a lot of ways to work this around. Do a little search.
Just include "a" tag in "button" tag.
<button></button>
The full list of possible fields in the html based email-creating form:
subject
cc
bcc
body
<form action="mailto:youraddr#domain.tld" method="GET">
<input name="subject" type="text" /></br>
<input name="cc" type="email" /><br />
<input name="bcc" type="email" /><br />
<textarea name="body"></textarea><br />
<input type="submit" value="Send" />
</form>
https://codepen.io/garfunkel61/pen/oYGNGp
Related
I have a set of radio. If I select Value=1 the show custom_281 text field and if it is visible then should have some value before proceeding, if empty show an alert. If selected value=2 then hide custom_281 and not mandatory to fill in.
I cant seem to validate the text field and show the alert.
Here’s my html And jquery. Any help would be appreciated. Thanks
<div id="editrow-custom_280" class="crm-section editrow_custom_280-section form-item">
<div class="content">
<input type="radio" id="QFID_1_custom_280" name="custom_280" class="required crm-form-radio" value="1">
<input type="radio" id="QFID_2_custom_280" name="custom_280" class="required crm-form-radio" value="2">
</div>
</div>
<div id="editrow-custom_281" class="crm-section editrow_custom_281-section form-item" novalidate="novalidate" style="display: block;">
<div class="content">
<input id="custom_281" type="text" name="custom_281" maxlength="255" class="crm-form-text" placeholder="Enter Number ">
</div>
</div>
CRM.$(function($) {
showNumber();
function showNumber() {
$('input[name=custom_280]').change(showNumber);
if ($('input[name=custom_280][value=1]').is(':checked')) {
$('div#editrow-custom_281').slideDown('slow').validate({ignore:':not(:visible)'});
}
else {
$('div#editrow-custom_281').slideUp('slow');
}
}
});
You can check if the radio button checked value is 1 if yes check if the input is not empty depending on this show you message.
Demo Code :
showNumber();
function showNumber() {
$('input[name=custom_280]').change(showNumber);
if ($('input[name=custom_280][value=1]').is(':checked')) {
$('div#editrow-custom_281 input').val('')
$('div#editrow-custom_281').slideDown('slow')
} else {
$('div#editrow-custom_281').slideUp('slow');
}
}
//on click of proceed btn
$("#proceed").on("click", function() {
//check if the checked valeu is 1
if ($('input[name=custom_280]:checked').val() === '1') {
if (!$('div#editrow-custom_281 input').val()) {
$('div#editrow-custom_281 input').focus()
console.log("Please fill") //empty
} else {
console.log("All good")
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="crm-section editrow_custom_280-section form-item" id="editrow-custom_280">
<div class="content">
<input class=" required crm-form-radio" value="1" type="radio" id="QFID_1_custom_280" name="custom_280">
<input class=" required crm-form-radio" value="2" type="radio" id="QFID_2_custom_280" name="custom_280">
</div>
</div>
<div class="crm-section editrow_custom_281-section form-item" id="editrow-custom_281" novalidate="novalidate" style="display: block;">
<div class="content">
<input maxlength="255" name="custom_281" type="text" id="custom_281" class="crm-form-text" placeholder=" Enter Number ">
</div>
</div>
<button id="proceed">Proceed</button>
I have been trying to make HTML Code to to connect to google Sheet to paste data but my code is still appearing an error even while making it i do not know what is the reason someone can please look into this matter.
The problem is that Form window is not getting open to fill the form for submission of data in google sheets.
I would really appreciate the help.
Here is sheet attached link
https://docs.google.com/spreadsheets/d/1qFNb5NPuJBvgG7u3UxcNcf4h6hu2lkuabP7emLc7pwE/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script>
function AddRow()
{
var Invoice = document.getElementById("Invoice").value;
var InvoiceDate = document.getElementById("InvoiceDate").value;
var Code = document.getElementById("Code").value;
var Size = document.getElementById("Size").value;
var ProductName = document.getElementById("ProductName").value;
var Transaction = document.getElementById("Transaction").value;
var StockQty = document.getElementById("StockQty").value;
var MRP = document.getElementById("MRP").value;
if(InvoiceDate != '' && Code != '' && Size != '' && ProductName != '' && Transaction != '' && StockQty != '' && MRP != '')
{
google.script.run.AddRecord(InvoiceDate, Code, Size, ProductName, Transaction, StockQty, MRP);
document.getElementById("Invoice").value = '';
document.getElementById("InvoiceDate").value = '';
document.getElementById("Code").value = '';
document.getElementById("Size").value = '';
document.getElementById("ProductName").value = '';
document.getElementById("Transaction").value = '';
document.getElementById("StockQty").value = '';
document.getElementById("MRP").value = '';
document.getElementById("display_error").innerHTML = "";
}
else
{
document.getElementById("display_error").innerHTML = "Please Enter All Information!";
}
}
</script>
</head>
<body>
<div style="padding: 10px;" >
<form>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Timestamp">Invoice</label>
<input type="text" id="Timestamp" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="Name">InvoiceDate</label>
<input type="text" id="Name" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Shift">Code</label>
<input type="text" id="Shift" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Product">Size</label>
<input type="text" id="Product" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="Batch">ProductName</label>
<input type="text" id="Batch" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="Machine" >Transaction</label>
<input type="text" id="Machine" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="MfgExp" >StockQty</label>
<input type="text" id="MfgExp" class="form-control "/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Yield" >MRP</label>
<input type="text" id="Yield" class="form-control "/>
</div>
</div>
<div class="form-group col-md-3">
<input type="button" value="Submit" class="btn btn-primary" onclick="AddRow()" />
<div id="display_error" style="color: red" ></div>
</div>
</form>
</div>
</body>
</html>
I believe you are confusing labels with input element ids.
When you write var Invoice = document.getElementById("Invoice").value;, you are telling the script to find the element with id="Invoice" in your HTML.
As you can tell when you press the submit button the console will show the error: "Cannot get value property of null" which means it was not able to find an element with the id supplied to document.getElementById. <-- Read this docs before continuing.
Solution:
Change your HTML <input> elements' id attributes to correspond to the value that you are passing as id parameter to document.getElementById
Example:
From your HTML code I extracted the following lines, please see the comments:
<script>
var Invoice = document.getElementById("Invoice").value; // Here you are saying id="Invoice".
</script>
<div class="form-group col-md-3">
<label for="Timestamp">Invoice</label>
<input type="text" id="Timestamp" class="form-control" /> <!-- Here: id="Timestamp" -->
</div>
So that is why you are getting errors. Map the input id's correctly. But more importantly reading up on HTML and JavaScript would help a lot.
I need to make a specific input field required based on the choice of a specific radio button. I have tried ng-required but doesn't seem to work.
I want to make the phone number field required if one chooses the payment method4 with the model ng-model="selected_payment_method=CC
<form ng-submit="proceed_payment()" type="post" name="paymentForm" novalidate>
<div class="col s12">
<div class="col s12">
<input name="payment" ng-model="selected_cc_method" class="with-gap" id="payment4" type="radio"
value="CC" ng-click="selected_payment_method = 'CC'"/>
<label class="fund-project-payment-method-label" for="payment4">CC</label>
</div>
</div>
</div>
<div class="col s12 shipping-details">
<div class="fund-project-additional fund-project-personal-details">
Personal Details
</div>
<label for="email" class="fund-project-personal-details-label">Email</label>
<input placeholder="Email" id="email" type="email" ng-model="email" class="validate" required>
<!--
Phone Number & Name a required field as well
-->
<label for="display_name" class="fund-project-personal-details-label">Name</label>
<input placeholder="Name" id="display_name" ng-model="name" type="text"
class="validate" required>
<label for="phone_number" class="fund-project-personal-details-label">Phone Number</label>
<input placeholder="Phone Number" id="phone_number" type="text" ng-model="phone_number" ng-required="selected_payment_method === 'CC'">
<input placeholder="Your message." id="personal_message" ng-model="personal_message" type="text"
class="validate" maxlength="200">
<span class="personal-message-text">
This will be displayed on the campaign page.
</span>
</div>
<div class="col s12 right">
<button type="submit" class="waves-effect waves-light btn-large orange white-text proceed-payment"
disabled="selected_payment_method == undefined || paymentForm.$invalid || selected_reward_total_amount == 0">
Next: Pay
<i class="fa fa-chevron-right" ng-if="!proccess_payment_spinner"></i>
<div class="preloader-wrapper small active right payment-loader" ng-if="proccess_payment_spinner">
<div class="spinner-layer spinner-white-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</button>
This is what I have done on the angular side to make sure payment is done.
What am I not doing right?
$scope.proceed_payment = function () {
$scope.proccess_payment_spinner = true;
if ($scope)
var payment_method = $('input:radio[name=payment]:checked').val();
if ($scope.selected_reward_details.limit_reward_amount &&
parseInt($scope.selected_reward_details.selected_quantity) > parseInt($scope.selected_reward_details.remaining_quantity)) {
$('#heading').html("Too many rewards!");
$('#message').html("Unfortunately the amount of rewards you've selected exceeds the number available.");
$('#error_modal').openModal();
return;
}
if (payment_method === "CC") {
ProjectPaymentService.initiateCCPayment(
$scope.project.id,
$scope.selected_reward_details.id,
$('#email').val(),
$('#display_name').val(),
$('#phone_number').val(),
$('#personal_message_display_name').val(),
$('#personal_message').val(),
parseInt($scope.selected_reward_details.selected_quantity),
parseFloat($scope.selected_reward_details.custom_amount),
parseFloat($scope.selected_reward_details.shipping_fee),
parseFloat($scope.selected_reward_details.reward_amount * $scope.selected_reward_details.selected_quantity),
parseFloat($scope.selected_reward_total_amount),
$('#address_1').val(),
$('#address_2').val(),
$('#country').val(),
$('#postcode').val(),
$('#city').val(),
$('#region').val()
).then(
function successHandler(data) {
$scope.proccess_payment_spinner = false;
var project_funding_id = angular.fromJson(data.data);
$location.path("mpesa_details/" + project_funding_id);
},
function errorHandler(data) {
$scope.proccess_payment_spinner = false;
console.log(angular.fromJson(data.data));
});
Radio type input does not need ng-click to set its value:
<input type="radio" name="payment" ng-model="selected_cc_method"
class="with-gap" id="payment4" value="CC" />
Now you can use selected_cc_method with ng-required:
<input placeholder="Phone Number" id="phone_number" type="text"
ng-model="phone_number" ng-required="selected_cc_method === 'CC'">
You can see here that when radio button is clicked, phone number input becomes required:
DEMO
You have two variables you are working with;
selected_cc_method
and
selected_payment_method
I would drop the ng-click and set the model of the radio and use the radio button value for the ng-required instead of trying to use another variable for this.
<input name="payment" ng-model="selected_payment_method" class="with-gap"
id="payment4" type="radio" value="CC"/>
<label class="fund-project-payment-method-label" for="payment4">CC</label>
<input placeholder="Phone Number" id="phone_number" type="text"
ng-model="phone_number"
ng-required="selected_payment_method === 'CC'">
I want to save data generated from a an HTML form to JSON file in my computer, I'm totally new in the field. I have attached below the HTML and JavaScript code.
<form id="test" action="#" method="post">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" />
</div>
<div class="form-group">
<label for="check">Check if you like JavaScript</label>
<input type="checkbox" name="check" value="yes" />
</div>
<div class="form-group">
<label for="select">Select your favorite JavaScript framework</label>
<select name="select" class="form-control">
<option value="none" selected="selected">None</option>
<option value="jquery">jQuery</option>
<option value="angularjs">Angular</option>
<option value="mine">Mine, of course!</option>
</select>
</div>
<div class="form-group">
<label for="message">Leave a message</label>
<textarea class="form-control" name="message" rows="15" cols="30"></textarea>
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" />
</div>
<p>
<input type="submit" value="Send" class="btn btn-primary btn-block" />
</p>
</form>
<pre id="output"></pre>
(function() {
function toJSONString( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
document.addEventListener( "DOMContentLoaded", function() {
var form = document.getElementById( "test" );
var output = document.getElementById( "output" );
form.addEventListener( "submit", function( e ) {
e.preventDefault();
var json = toJSONString( this );
output.innerHTML = json;
}, false);
});
})();
Instead of displaying the JSON content I want to store it in a JSON file.
I'm new to AngularJS. I wrote code like this,
var myApp2 = angular.module('myApp2', []);
myApp2.controller('studentController', function($scope) {
$scope.student = {
firstName: "first name",
lastName: "last name",
fullName: function() {
var studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
var myApp1 = angular.module('myApp1', []);
myApp1.controller('productController', function($scope) {
$scope.quantity = 0;
$scope.cost = 0;
$scope.getTotalCost = function() {
return $scope.quantity * $scope.cost;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-lg-3" ng-app="myApp1" ng-controller="productController">
<label class="label label-default">Quantity :</label>
<input type="number" class="form-control" ng-model="quantity" />
<br>
<br>
<label class="label label-default">Cost :</label>
<input type="number" class="form-control" ng-model="cost" />
<br>
<br>
<label class="label label-success">Product :</label><span class="form-control disabled" ng-bind="getTotalCost()"></span>
</div>
<div class="col-lg-3" ng-app="myApp2" ng-controller="studentController">
<label class="label label-default">First name:</label>
<input type="text" class="form-control" ng-model="student.firstName" />
<br>
<br>
<label class="label label-default">Last name:</label>
<input type="text" class="form-control" ng-model="student.lastName" />
<br>
<br>
<label class="label label-success">You are entering:</label> <span class="form-control disabled" ng-bind="student.fullName()"></span>
</div>
the second div is not initialized. I think the controller is not executing.
If I remove the first div then it does.
What's wrong with it?
You will require manual bootstrapping for this, find link below :
https://stackoverflow.com/a/18583329/1939542