Sending an email in Javascript - dotnetnuke

can you please let me know
why am unable to send form data to a mail id.below is my code.
And I used this code in Dotnetnuke HTML/TEXT module.
<h3>To join the SoTeC email announcement list, fill out the form below.</h3> <p> </p> <p> </p> <p><style type="text/css"> .link, .signupframe {
color: #226699;
font-family: Arial, Helvetica, sans-serif;
}
.link {
text-decoration: none;
}
.signupframe {
border: 1px solid #000000;
background: #ffffff;
}</style></p> <form id="icpsignup12374" method="post" action="mailto:your#domian.com" onsubmit="return verifyRequired12374();" accept-charset="UTF-8" name="icpsignup">
<input type="hidden" name="redirect" value="http://www.icontact.com/www/signup/thanks.html" /> <input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html" />
<div id="SignUp">
<table class="signupframe" border="0" cellspacing="0" cellpadding="5" width="260">
<tbody>
<tr>
<td valign="top" align="right"><font size="2">First Name</font></td>
<td align="left"><input name="fields_fname" type="text" /></td>
</tr>
<tr>
<td valign="top" align="right"><font size="2">Last Name</font></td>
<td align="left"><input name="fields_lname" type="text" /></td>
</tr>
<tr>
<td valign="top" align="right"><font size="1" face="Arial,Helvetica, sans-serif">*</font> <font size="2">Email</font></td>
<td align="left"><input name="fields_email" type="text" /></td>
</tr>
<tr>
<td> </td>
<td><font size="1">*</font><font size="2"> = Required Field</font></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</div> </form> <script type="text/javascript"> var icpForm12374 = document.getElementById('icpsignup12374'); if (document.location.protocol === "https:")
icpForm12374.action ="mailto:your#domian.com"; function verifyRequired12374() { if (icpForm12374["fields_email"].value == "") {
icpForm12374["fields_email"].focus();
alert("The Email field is required.");
return false; }
return true; } </script> <p><a class="link" href="http://www.icontact.com"><font size="2">Email Marketing You Can Trust</font></a></p>
**

Because nested forms aren't allowed. DNN is an ASP.NET WebForms Application and as such already wraps everything in a form. When you add your form to the Text/HTML module, that code is placed within the already existing form and that's not allowed. You have a few options:
1) You can place your form code in an HTML file and then reference that file in an IFrame.
2) You can recreate the form using one of the many DNN Form Modules out there. The core includes the Form and List module that works for basic forms. There are many other Forms modules varying complexity available.
3) You can create a new custom module that recreates the form and does the post using AJAX.
It looks like our mailing list subscribe module might do what you need with some slight modifications. - http://www.efficionconsulting.com/dotnetnuke/modules/mailing-list-subscribe.aspx

Related

Visualforce - Using Javascript for mandatory fields

Team,
I am working on a Salesforce Visualforce page using Javascript to validate mandatory fields - both picklist and text fields. I tried using html required = true but that won't work because I have two functionalities - save link and submit button - on my visualforce page. I would like the user to get an error if they try to submit and the required fields are null/blank. Below is my code but it's not working.
<script>
function submitOnClick(objSubmitBtn){
var RevPL = document.getElementById('RevPL').value;
if(RevPL == null || RevPL == ''){
alert('Review needed.')
return false;
}
var StatusPL = document.getElementById('StatusPL').value;
if(StatusPL == null || AdhStatusPL == ''){
alert('Status needed.')
}
var StatusPL = document.getElementById('Notes').value;
if(StatusPL == null || AdhStatusPL == ''){
alert('Please add notes.')
}
if(confirm('Are you sure you want to submit?')){
objSubmitBtn.disabled = true;
objSubmitBtn.value = 'Submitting... Please Wait';
doSubmit();
}
}
</script>
<apex:form id="PRDetails">
<table width="100%">
<tr>
<td width="50%">
3. Review of documentation
<b> <apex:outputText value="{!PR['Review__c']}" rendered="{!PR['Status__c']='Complete'}"/> </b>
<apex:inputField value="{!PR['Review__c']}" rendered="{!PR['Status__c']!='Complete'}" id="RevPL" />
</td>
</tr>
</table>
<br/>
<table width="100%">
<tr>
<td width="50%">4. Status
<b> <apex:outputText value="{!PR['Status__c']}" rendered="{!PR['Status__c']='Complete'}" /></b>
<apex:inputField value="{!PR['Status__c']}" rendered="{!PR['Status__c']!='Complete'}" id="StatusPL" />
</td>
</tr>
<tr>
<td class="padding">Notes:</td>
</tr>
<tr>
<td class="padding">
<b> <apex:outputText value="{!PR['Notes__c']}" rendered="{!PR['Status__c']='Complete'}"/> </b>
<apex:inputField styleClass="inputLTextbox" value="{!PR['Notes__c']}" rendered="{!PR['Status__c']!='Complete'}" id="Notes"/>
</td>
</tr>
</table>
<table align="center">
<tr>
<td>
<apex:repeat value="{!PR}" var="PR">
<apex:commandButton value="Submit" style="background: #1895c1; color: #FFFFFF; width: 150px;" onclick="submitOnClick(this);" rendered="{!PR['Status__c'] !='Complete'}"/>
</apex:repeat>
<apex:actionFunction name="doSubmit" action="{!submitPR}" />
</td>
</tr>
</table>
<table width="100%">
<tr>
<td style="text-align:right;"><apex:commandLink action="{!savePR}" value="Save" id="SaveLink" style="text-decoration:none; color:blue;"/></td>
</tr>
</table>
</form>
1) You've got
var StatusPL
Declated twice.
2) Visualforce generates IDs in it's own way (adds hierarchy to it) - your "getElementById" won't work, you need to do something else - do an inspect on your page in browser. Maybe add classes and use getElementByClass instead?

Angular js: error message get displayed utill page load completes?

I have created the simple login form and perform the validation on it but the problem is that validation is occur during the page load.My oode here.
<body ng-controller="myCont">
<form name="myForm" novalidate>
<h2 align="center">Add The Item Here</h2>
<table align="center" border="2">
<div class="control-group">
<div class="controls">
<tr>
<td>pid</td>
<td><input type="number" name="pid" ng-model="user.pid" ng-maxlength="3" required="pid" ></td>
<td ng-show="myForm.pid.$touched && myForm.pid.$invalid"></td>
<td ng-show="myForm.pid.$error.required" style="color:red">Enter Pid</td>
<td ng-show="myForm.pid.$error.maxlength" style="color:red">Only 3 digits for pid</td>
</tr>
<tr>
<td>pname</td>
<td><input type="text" name="pname" ng-model="user.pname" required="pname"></td>
<td style="color:red" ng-show="myForm.pname.$touched && myForm.pname.$invalid"></td>
<td ng-show="myForm.pname.$error.required" style="color:red">Pname is required.</td>
</tr>
<tr>
<td>pcost</td>
<td><input type="number" name="pcost" ng-model="user.pcost" required="pcost"></td>
<td style="color:red" ng-show="myForm.pcost.$touched && myForm.pcost.$invalid">
<td ng-show="myForm.pcost.$error.required" style="color:red">Pcost is required.</td>
</tr>
<div ng-repeat="x in result track by $index"></div>
<tr>
<td>AddData<input type="submit" ng-disabled="myForm.$invalid" ng-click="addAll()">
</td>
<td><input type="reset" name="reset" value="reset"></td>
</tr>
</div>
</div>
</table>
</form>
</body>
enter image description here
try angular-toastr for notification of wrong credentials or error message...
Hope it will help out

AngularJS dropdown doesn't work when opened inside of dialog box

I am using AngularJS dropdown list and it works without problem. But it doesn't show me the results when i want to open it inside of dialog box. What could be the reason of this?
Here is the script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function CountryStateCityCtnl($scope) {
$scope.countries = {
'India': {
'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
},
'USA': {
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
},
'Australia': {
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
}
};
$scope.GetSelectedCountry = function () {
$scope.strCountry = document.getElementById("country").value;
};
$scope.GetSelectedState = function () {
$scope.strState = document.getElementById("state").value;
};
}
</script>
Here is the some part of view:
<div ng-controller="CountryStateCityCtnl">
<table style="border:none; width:100%;">
<tbody>
<tr>
<th><font color="#656565">Yeni Üye</font> </th>
</tr>
<tr>
<td align="right"><label for="UserName">İsim:</label></td>
<td><input type="text" name="UserName" id="UserName" /></td>
</tr>
<tr>
<td align="right" ><label for="UserSurname">Soyisim:</label></td>
<td><input type="text" name="UserSurname" id="UserSurname" /></td>
<tr>
<td align="right"><b>Şehir:</b></td>
<td>
<select id="country" ng-model="statessource" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"><option value=''>Select</option></select>
<label >Bayi:</label>
<select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource" ng-change="GetSelectedState()"><option value=''>Select</option></select>
</td>
</tr>
<tr>
<td align="right" ><label for="UserMail">E-Mail:</label></td>
<td>
<input type="email" name="UserMail" id="UserMail" />
<select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>Select</option><option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option></select>
</td>
</tr>
<tr>
<td align="right"><label for="UserPassword">Şifre:</label></td>
<td><input type="password" name="UserPassword" id="UserPassword" /></td>
</tr>
<tr>
<td align="right"><label for="ConfirmPassword">Şifre(Tekrar):</label></td>
<td><input type="password" name="ConfirmPassword" id="ConfirmPassword" /></td>
</tr>
<tr>
<td><input type="submit" value="Üyeliğimi Tamamla" /></td>
</tr>
</tbody>
</table>
</div>
Depending on what Dialog box implementation you are using, its very likely that your drop-down is hidden underneath your dialog box. Some drop-down implementations also like to show the drop-down as a separate div (kendo ui for example). To debug this you could set the background of your dialog to transparent using Chrome's inspector. If you can see your drop-down under the dialog, try to create CSS style to apply to the drop-down that will be above the dialog. eg:
myitem {
z-index: 999;
}
Here is the picture of dropdown list without dialog without Dialog
Here is the picture of dropdown list with Dialog

AngularJS Filter based on radio selection

I am implementing a search input box that should search based off of a certain property of the objects that are getting iterated over and I would like them to be selected using a radio button.
For example here is my code:
<span style="margin-bottom: 10px; display: inline-block;">Search: <input ng-model="searchText.CustomerName" /> </span>
<table id="Table1" class="alertTable">
<thead>
<tr>
<th class="xsmCol"><img src="/App_Themes/SkyKick/images/misc/clear.gif" class="iFlag" /></th>
<th>Subject</th>
<th>Customer</th>
<th>Type</th>
<th>Date</th>
<th class="smCol">Actions</th>
</tr>
</thead>
<tbody id="tbAlerts">
<tr ng-repeat-start="alert in alerts | filter:searchText" > <!-- | filter:searchText -->
<td><img src="/App_Themes/SkyKick/images/misc/clear.gif" data-tooltip="{{ alert.tooltip }}" class="{{ 'iAlert' + alert.AlertType }}"/></td>
<td>{{ alert.Summary }}</td>
<td>{{ alert.CustomerName }}</td>
<td>{{ alert.CreatedDate }}</td>
<td>{{ alert.Category }}</td>
<td>
<!-- Tricky little widget logic -->
</td>
</tr>
<tr ng-repeat-end class="alertDetail">
<td></td>
<td colspan="5" ng-bind-html="alert.Details"></td>
</tr>
</tbody>
</table>
As you can see, I am currently filtering based off of the CustomerName field in my array. However, I want to change the logic so that I can select between CustomerName, Subject, Type, and Date using a radio button. So if the user clicks the Date radio button, then the searchText will filter only based off the Date attribute. What is the best way to get this functionality?
Create a set of radio buttons which share the same ng-model value. Use that value to set the key on searchText:
<span style="margin-bottom: 10px; display: inline-block;">Search:
<input ng-model="searchText[selectedSearch]" ng-init="searchText = {};
selectedSearch='CustomerName'" />
</span>
<input type="radio" ng-model="selectedSearch" value="CustomerName" > Customer Name
<input type="radio" ng-model="selectedSearch" value="CreatedDate" > Created Date
<input type="radio" ng-model="selectedSearch" value="Category" > Category
Demo
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'India'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Rathin',role:'Doctor',country:'India'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>

IE7 cuts-off input fields in a form

All other browsers, including IE8, render the form correctly, except IE7; I assume IE6 exibits same problem.
IE7 cuts-off, shrinks the form, and shows about 5% of the input fields;
I removed all css formatting but not change; I have applied several related fixes without success; help or direction as to where to find related information or know fixes is welcome since it has consumed much time without success; thanks;
html is included below;
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IMM log-in</title>
</head>
<body>
<form method="post" name="form" id="form" action="/imm/login.htm" style=
"font-family:arial;font-size:9pt;padding:5px;table.horizontal-align:left;display:inline;">
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><label>log-in ID</label><span class="required">*</span></td>
<td align="left">
<input type="text" name="name" id="form_name" value="" size=
"20" style="width:100%;" />
</td>
</tr>
<tr>
<td align="left"><label>password</label><span class="required">*</span></td>
<td align="left">
<input type="password" name="password" id="form_password"
value="" size="20" style="width:100%;" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table class="buttons" id="form-buttons">
<tbody>
<tr class="buttons">
<td class="buttons"><input type="submit" name="ok" id="form_ok" value=
" OK " /></td>
<td class="buttons"><input type="submit" name="cancel" id="form_cancel"
value="Cancel" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</pre>
Found a solution for this thing position:relative

Resources