I'm using MadMimi to collect emails on a pre-launch website (http://www.saashopper.com), and need to change the embedded form so it doesn't open a new tab when confirming the email signup. I want it to just confirm underneath the input field that the signup was successful (or not, and why). How should I go about doing this?
Here's the embed code MadMimi provided:
<form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/114920" id="mad_mimi_signup_form" method="post" target="_blank">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓"/>
<input name="authenticity_token" type="hidden" value="5twZyvvQepHt/3X9lhtT+Z3Zeb1OFVeAPFMLBjbukwA="/>
</div>
<div class="mimi_field required">
<label for="signup_email">Email*</label>
<br/>
<input id="signup_email" name="signup[email]" type="text" data-required-field="This field is required" placeholder="you#example.com"/>
</div>
<div>
<input type="submit" class="submit" value="Subscribe" id="webform_submit_button" data-default-text="Subscribe" data-submitting-text="Sending..." data-invalid-text="↑ You forgot some required fields" data-choose-list="↑ Choose a list">
</input>
</div>
</form>
<script type="text/javascript">
(function() {
var form = document.getElementById('mad_mimi_signup_form'),
submit = document.getElementById('webform_submit_button'),
validEmail = /.+#.+\..+/,
isValid;
form.onsubmit = function(event) {
validate();
if(!isValid) {
revalidateOnChange();
return false;
}
};
function validate() {
isValid = true;
emailValidation();
fieldAndListValidation();
updateFormAfterValidation();
}
function emailValidation() {
var email = document.getElementById('signup_email');
if(!validEmail.test(email.value)) {
textFieldError(email);
isValid = false;
} else {
removeTextFieldError(email);
}
}
function fieldAndListValidation() {
var fields = form.querySelectorAll('.mimi_field.required');
for(var i = 0; i < fields.length; ++i) {
var field = fields[i],
type = fieldType(field);
if(type == 'checkboxes' || type == 'radio_buttons') {
checkboxAndRadioValidation(field);
} else {
textAndDropdownValidation(field, type);
}
}
}
function fieldType(field) {
var type = field.querySelectorAll('.field_type');
if(type.length > 0) {
return type[0].getAttribute('data-field-type');
} else if(field.className.indexOf('checkgroup') >= 0) {
return 'checkboxes';
} else {
return 'text_field';
}
}
function checkboxAndRadioValidation(field) {
var inputs = field.getElementsByTagName('input'),
selected = false;
for(var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if((input.type == 'checkbox' || input.type == 'radio') && input.checked) selected = true;
}
if(selected) {
field.className = field.className.replace(/ invalid/g, '');
} else {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
isValid = false;
}
}
function textAndDropdownValidation(field, type) {
var inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if(input.name.indexOf('signup') >= 0) {
if(type == 'text_field') {
textValidation(input);
} else {
dropdownValidation(field, input);
}
}
}
htmlEmbedDropdownValidation(field);
}
function textValidation(input) {
if(input.id == 'signup_email') return;
var val = input.value;
if(val == '') {
textFieldError(input);
isValid = false;
return;
} else {
removeTextFieldError(input)
}
}
function dropdownValidation(field, input) {
var val = input.value;
if(val == '') {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
onSelectCallback(input);
isValid = false;
return;
} else {
field.className = field.className.replace(/ invalid/g, '');
}
}
function htmlEmbedDropdownValidation(field) {
var dropdowns = field.querySelectorAll('.mimi_html_dropdown');
for(var i = 0; i < dropdowns.length; ++i) {
var dropdown = dropdowns[i],
val = dropdown.value;
if(val == '') {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
isValid = false;
dropdown.onchange = validate;
return;
} else {
field.className = field.className.replace(/ invalid/g, '');
}
}
}
function textFieldError(input) {
input.className = 'required invalid';
input.placeholder = input.getAttribute('data-required-field');
}
function removeTextFieldError(input) {
input.className = 'required';
input.placeholder = '';
}
function onSelectCallback(input) {
if(typeof Widget != 'undefined' && Widget.BasicDropdown != undefined) {
var dropdownEl = input.parentNode,
instances = Widget.BasicDropdown.instances;
for(var i = 0; i < instances.length; ++i) {
var instance = instances[i];
if(instance.wrapperEl == dropdownEl) {
instance.onSelect = validate;
}
}
}
}
function updateFormAfterValidation() {
form.className = setFormClassName();
submit.value = submitButtonText();
submit.disabled = !isValid;
submit.className = isValid ? 'submit' : 'disabled';
}
function setFormClassName() {
var name = form.className;
if(isValid) {
return name.replace(/\s?mimi_invalid/, '');
} else {
if(name.indexOf('mimi_invalid') == -1) {
return name += ' mimi_invalid';
} else {
return name;
}
}
}
function submitButtonText() {
var invalidFields = document.querySelectorAll('.invalid'),
text;
if(isValid || invalidFields == undefined) {
text = submit.getAttribute('data-default-text');
} else {
if(invalidFields.length > 1 || invalidFields[0].className.indexOf('checkgroup') == -1) {
text = submit.getAttribute('data-invalid-text');
} else {
text = submit.getAttribute('data-choose-list');
}
}
return text;
}
function revalidateOnChange() {
var fields = form.querySelectorAll(".mimi_field.required");
for(var i = 0; i < fields.length; ++i) {
var inputs = fields[i].getElementsByTagName('input');
for(var j = 0; j < inputs.length; ++j) {
inputs[j].onchange = validate;
}
}
}
})();
</script>
You can add and iframe under the input field like this:
<iframe name="myFrame">
<p>Your browser does not support iframes.</p>
</iframe>
And then change the target attribute of the form and give it the iframe name:
<form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/114920" id="mad_mimi_signup_form" method="post" target="myFrame">
Thus the result will be shown in the iframe window in the same page.
Related
I have 2 checkboxes and 2 input tags for mail and phone.
My requirement is such that I want to disable the input of phone when I check mail and vice-versa. But on checking both the checkboxes I want to keep both the inputs enabled.
Here's my fiddle. This is the code which is not working on the fiddle as I've never used it before. But it is working on my localhost.
The problem is, it's not working well when I check both boxes and then check-unchek many times.
HTML
<input type="checkbox" id="check_email" name="check_email" onchange="disablePhone()" /> Email
<input type="checkbox" id="check_phone" name="check_phone" onchange="disableEmail()" /> Phone
Script
var chk_mail = 0;
var chk_phone = 0;
var unchk = 0;
function disablePhone()
{
if(unchk == 1)
{
document.getElementById("ref_email").disabled = true;
unchk = 0;
//alert("disablePhone")
}
if(chk_mail == 0 && unchk == 0)
{
if(document.getElementById("check_email").checked == true)
{
document.getElementById("form-field-phone").disabled = true;
chk_mail = 1;
}
}
else if( chk_mail == 1 && unchk == 0)
{
document.getElementById("check_email").checked = false;
document.getElementById("form-field-phone").disabled = false;
chk_mail = 0;
}
if(chk_phone ==1 && chk_mail == 1)
{
document.getElementById("ref_email").disabled = false;
document.getElementById("form-field-phone").disabled = false;
chk_phone = 0;
unchk = 1;
}
}
function disableEmail()
{
if(unchk == 1)
{
document.getElementById("form-field-phone").disabled = true;
unchk = 0;
//alert("disableEmail")
}
if(chk_phone == 0 && unchk == 0)
{
if(document.getElementById("check_phone").checked == true)
{
document.getElementById("ref_email").disabled = true;
chk_phone = 1;
}
}
else if(chk_phone == 1 && unchk == 0)
{
document.getElementById("check_phone").checked = false;
document.getElementById("ref_email").disabled = false;
chk_phone = 0;
}
if(chk_phone ==1 && chk_mail == 1)
{
document.getElementById("ref_email").disabled = false;
document.getElementById("form-field-phone").disabled = false;
chk_phone = 0;
unchk = 1;
}
}
I added eventlisteners in the JS and altered the logics a bit. The script fist checks if both boxes are checked. It true, then make both fields enabled. If not disable the right field.
(function() {
document.getElementById('check_email').addEventListener('change', disableInput, false);
document.getElementById('check_phone').addEventListener('change', disableInput, false);
function disableInput() {
var emailChecked = document.getElementById('check_email');
var phoneChecked = document.getElementById('check_phone');
var email = document.getElementById('ref_email');
var phone = document.getElementById('form-field-phone');
if(emailChecked.checked == phoneChecked.checked) {
email.disabled = false;
phone.disabled = false;
} else if(emailChecked.checked) {
phone.disabled = true;
} else {
email.disabled = true;
}
}
})();
<input type="checkbox" id="check_email" name="check_email" /> Email
<input type="checkbox" id="check_phone" name="check_phone" /> Phone
<br>
<input type="email" id="ref_email" name="ref_email" placeholder="Email ID" />
<input type="text" id="form-field-phone" name="form-field-phone" placeholder="Phone"/>
The below code is the solution for you issue .
fiddle here - Working perfect
- JavaScript
`
<script type="text/javascript">
$(document).ready(function () {
$("#check_email").click(function () {
call();
});
$("#check_phone").click(function () {
call();
});
function call() {
document.getElementById("form-field-phone").disabled = false;
document.getElementById("ref_email").disabled = false;
if ($("#check_email").is(':checked') && $("#check_phone").is(':checked')) {
document.getElementById("form-field-phone").disabled = false;
document.getElementById("ref_email").disabled = false;
}
else {
if ($("#check_email").is(':checked')) {
document.getElementById("form-field-phone").disabled = true;
document.getElementById("ref_email").disabled = false;
}
if ($("#check_phone").is(':checked')) {
document.getElementById("form-field-phone").disabled = false;
document.getElementById("ref_email").disabled = true;
}
}
}
});
</script>
`
I test this on JSFiddle and I find that isn't work! But In the SOF Editor. It works!
Your code haven't bug. Maybe it's JSFiddle defect.
function checkDisable(){
var checkEmail = document.getElementById('check_email');
var checkPhone = document.getElementById('check_phone');
var inputEmail = document.getElementById('ref_email');
var inputPhone = document.getElementById('form-field-phone');
if(checkEmail.checked){
inputPhone.disabled = true;
}
if(checkPhone.checked){
inputEmail.disabled = true;
}
if(checkEmail.checked && checkPhone.checked){
inputEmail.disabled = false;
inputPhone.disabled = false;
}
if(!checkEmail.checked && !checkPhone.checked){
inputEmail.disabled = false;
inputPhone.disabled = false;
}
}
<input type="checkbox" id="check_email" name="check_email" onchange="checkDisable()" />
Email
<input type="checkbox" id="check_phone" name="check_phone" onchange="checkDisable()" />
Phone
<br>
<input type="email" id="ref_email" name="ref_email" placeholder="Email ID" />
<input type="text" id="form-field-phone" name="form-field-phone" placeholder="Phone"/>
So I'm very new to JavaScript and I'm trying a very simple enter text and check it. It doesn't seem to work the way I want it to. I want all of the inputs to go through the checkInputs. After All of them are 100% I want it to check if hoursWorked and horlyRate are numbers above 0. It seems to just move on to the checkNumberValidation without checking if all inputs are filled.
I got:
function checkNumbersValidation(field){
if( isNaN(field) ) {
field.value = "Must be a number";
field.focus("");
}
}
function checkInputs(field) {
var test = false;
do{
if ( field.value === null || field.value.trim() === "" ) {
field.value = "Input needed";
//set focus
field.focus("");
}else if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
}else {
tests = true;
}
}while (test = false)
}
function handelCalcButtonClicked (e) {
var passFirstTests = false;
var textFields = ["fullName", "hoursWorked", "hourlyRate"];
for( var i = 0; i < textFields.length; i ++ ) {
var field = document.getElementById(textFields[i]);
checkInputs(field);
}
if( **something** ) {
var numberFields = ["hoursWorked", "hourlyRate"]
for ( var i = 0; i < numberFields.length; i++ ) {
field = document.getElementById(numberFields[i]);
checkNumbersValidation(field);
}
}
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});
clearly I don't know what I'm doing. In the function handelCalcButtonClicked I'm not sure how to move on the the next part (the part Saying something). Any help would be nice!
Inside checkNumbersValidation you need to do the isNan call on field.value, not field:
if( isNaN(field.value) )
If you want to know if all of your fields have gone through checkInputs and have passed, you will need checkInputs to return whether or not each field has passed:
function checkInputs(field) {
if ( field.value === null || field.value.trim() === "" ) {
field.value = "Input needed";
//set focus
field.focus("");
return false;
} else if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
return false;
}
return true;
}
This will allow you to know if all fields have passed the check:
var passedAllChecks = true;
for( var i = 0; i < textFields.length; i ++ ) {
var field = document.getElementById(textFields[i]);
passedAllChecks = checkInputs(field) && passedAllChecks;
}
if(passedAllChecks) {
/* do number validation stuff */
}
What about this:
function checkNumbersValidation(field) {
if (isNaN(field)) {
field.value = "Must be a number";
field.focus("");
}
}
function checkInputs(field) {
if (!field.value || !field.value.trim()) {
field.value = "Input needed";
field.focus("");
return;
if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
}
}
function handelCalcButtonClicked (e) {
var textFields = ["fullName", "hoursWorked", "hourlyRate"],
numberFields = [ "hoursWorked", "hourlyRate"],
i,
field;
for (i = 0; i < textFields.length; i++) {
field = document.getElementById(textFields[i]);
checkInputs(field);
}
for (i = 0; i < numberFields.length; i++) {
field = document.getElementById(numberFields[i]);
checkNumbersValidation(field);
}
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});
or:
function checkInput(field, isnumber) {
if (!field) return;
if (isnumber === true && isNaN(field)) {
field.value = "Must be a number";
field.focus("");
return;
}
if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
return;
}
if (!field.value || !field.value.trim()) {
field.value = "Input needed";
field.focus("");
}
}
function handelCalcButtonClicked (e) {
checkInput(document.getElementById('fullName');
checkInput(document.getElementById('hoursWorked', true);
checkInput(document.getElementById('hourlyRate', true);
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});
I wrote a function to remove accounts name relate field from Contacts QuickCreate but my function works in Firefox perfectly but in chrome its not working... Here is my function
function manageRequired(reqArr, disabledVal)
{
var requiredLabel = '<span class="required">*</span>'; // for firefox
var search_requiredLabel = '<span class="required"'; // searching string for firefox
var form = "";
for(var i = 0; i < document.forms.length; i++)
{
if(document.forms[i].id=='EditView')
{
form = 'EditView';
break;
}
if(document.forms[i].id=='form_SubpanelQuickCreate_Contacts')
{
form = 'form_SubpanelQuickCreate_Contacts';
break;
}
if(document.forms[i].id=='form_QuickCreate_Contacts')
{
form = 'form_QuickCreate_Contacts';
break;
}
if(document.forms[i].id=='form_QuickCreate_Accounts')
{
form = 'form_QuickCreate_Accounts';
break;
}
}
for(var j = 0; j < reqArr.length; j++)
{
var flag = true;
if (validate[form] != 'undefined')
{
for(var i = 0; i < validate[form].length; i++)
{
if(validate[form][i][0] == reqArr[j].id && validate[form][i][2])
{
if(disabledVal)
{
flag = false;
break;
}
else
{
validate[form][i][2] = false;
}
}
}
}
var labelNode = document.getElementById(reqArr[j].id + '_label');
if(flag & disabledVal)
{
// we require the field now
addToValidate(form, reqArr[j].id, reqArr[j].type, true,reqArr[j].label );
}
if(disabledVal)
{
if(labelNode != null && labelNode.innerHTML.indexOf(search_requiredLabel) == -1) // for IE replace search string
{
search_requiredLabel = '<SPAN class=required>';
}
if (labelNode != null && labelNode.innerHTML.indexOf(search_requiredLabel) == -1)
{
labelNode.innerHTML = labelNode.innerHTML.replace(requiredLabel, '');
labelNode.innerHTML = labelNode.innerHTML + requiredLabel;
}
}
else
{
if(labelNode != null)
{
if(labelNode != null && labelNode.innerHTML.indexOf("<SPAN class=required>*</SPAN>") == -1 && labelNode.innerHTML.indexOf('<span class="required">*</span>') == -1 )// for that field which is unrequired
{
}
else if(labelNode != null && labelNode.innerHTML.indexOf(requiredLabel) == -1) // for IE replace span string
{
requiredLabel = "<SPAN class=required>*</SPAN>";
}
labelNode.innerHTML = labelNode.innerHTML.replace(requiredLabel, '');
}
}
}
}
Can anyone please help me out to solve this issue...
To remove a required field from QuickCreate in Sugarcrm you can use this fuction:
removeFromValidate('EditView','eventlist_c');
or remove remove the validtion applied to the field:
$('#eventlist_c_label').html('{$mod_strings['LBL_EVENTLIST']}: ');
I get the message Validation Failed if any of my controls are empty, but I would want to display the names of the controls which are empty. These controls are dynamically created on the page.
Below is the code that I am using now
function validateinput() {
var arrTextBox = document.getElementsByTagName("input");
var ddlTextBox = document.getElementsByTagName("select");
var retVal = 1;
for (i = 0; i < arrTextBox.length; i++) {
if (arrTextBox[i].type == "text" && arrTextBox[i].getAttribute("IsMandatory") == "Y" && arrTextBox[i].value == ""){
retVal = 0;
}
}
for (j = 0; j < ddlTextBox.length; j++) {
if (ddlTextBox[j].getAttribute("IsMandatory") == "Y" && ddlTextBox[j].value == "") {
retVal = 0;
}
}
if (retVal == 0) {
alert("Validation Failed");
return false;
}
else {
alert("Validation Success");
return true;
}
}
Okay, I see from the comments that you need some more specific assistance. Try this:
function validateinput() {
var emptySelects = '';
var emptyTextboxes = '';
var arrTextBox = document.getElementsByTagName("input");
var ddlTextBox = document.getElementsByTagName("select");
var retVal = 1;
for (i = 0; i < arrTextBox.length; i++) {
if (arrTextBox[i].type == "text" && arrTextBox[i].getAttribute("IsMandatory") == "Y" && arrTextBox[i].value == ""){
retVal = 0;
emptyTextboxes+= ' ' + arrTextBox[i].name;
}
}
for (j = 0; j < ddlTextBox.length; j++) {
if (ddlTextBox[j].getAttribute("IsMandatory") == "Y" && ddlTextBox[j].value == "") {
retVal = 0;
emptySelects += ' ' + ddlTextBox[j].name;
}
}
if (retVal == 0) {
alert("Validation Failed");
if (emptyTextboxes != '') alert('The following textboxes are empty:' + emptyTextboxes);
if (emptySelects != '') alert('The following selections are empty:' + emptySelects);
return false;
}
else {
alert("Validation Success");
return true;
}
}
function validate()
{
var flag=0;
var spchar=/^[a-zA-Z0-9 ]*$/;
var num=/^[0-9]*$/;
var custid = document.getElementById('CUSTOMERID').value;
var phoNo = document.getElementById('PHONENO').value;
var emailId = document.getElementById('EMAILID').value;
var channel = document.getElementById('CHANNELDTL').value;
if(channel=="")
{
alert("You have not selected any channel");
flag=1;
return false;
}
if(custid=="" || custid==null )
{
alert("Please enter Customer ID");
document.getElementById('CUSTOMERID').focus();
flag=1;
return false;
}
if (custid.search(num)==-1)
{
alert("Customer should be Numeric");
document.getElementById('CUSTOMERID').focus();
flag=1;
return false;
}
if(phoNo=="" || phoNo==null )
{
alert("Please enter Phone");
document.getElementById('PHONENO').focus();
flag=1;
return false;
}
if (phoNo.search(num)==-1)
{
alert("Phone should be Numeric");
document.getElementById('PHONENO').focus();
flag=1;
return false;
}
if(emailId=="" || emailId==null )
{
alert("Please enter Email");
document.getElementById('EMAILID').focus();
flag=1;
return false;
}
if (emailId)
{
if(isValidEmail(document.getElementById('EMAILID').value) == false)
{
alert("Please enter valid Email");
document.getElementById('EMAILID').focus();
flag=1;
return false;
}
}
if(flag==0)
{
var emailid=Base64.tripleEncoding(document.getElementById('EMAILID').value);
document.getElementById('E_EMAIL').value=emailid;
document.getElementById('EMAILID').value="";
var mobileno=Base64.tripleEncoding(document.getElementById('PHONENO').value);
document.getElementById('E_PHONE').value=mobileno;
document.getElementById('PHONENO').value="";
var customerid=Base64.tripleEncoding(document.getElementById('CUSTOMERID').value);
document.getElementById('E_CUSTID').value=customerid;
document.getElementById('CUSTOMERID').value="";
document.topupsform.action="../dth/leads/channelMail/channelMailUtil.jsp";
document.topupsform.submit();
alert("Thank you for choosing A-La-Carte services.\nWe will process it within 24 hours.\nYou will soon receive confirmation on your mail id.");
}
}
function isValidEmail(Email)
{
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = trim(Email);
if(reg.test(address) == false)
{
return false;
}
else
return true;
}
function trim(str)
{
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}
function sendMail()
{
caltotal();
validate();
}
//----------------------------------
var counter = 0;
function resetcheckboxValue(){
//var totalinputs = document.topupsform.getElementsByTagName("input");
var totalinputs =document.getElementsByName("dthchannel");
var totallenght = totalinputs.length;
counter = 0;
for(var i = 0; i < totallenght; i++) {
// reset all checkboxes
document.getElementsByName("dthchannel")[i].checked = false;
document.getElementById("totalamount").value = "0";
document.getElementById("youpay").value = "0";
}
}
function caltotal()
{
var plansObj = document.getElementsByName("dthchannel");
var plansLength = plansObj.length;
counter = 0;
var finalNameValue = "";
for(var i = 1; i <= plansObj.length+1; i++) {
if ( document.getElementById(("dthchannel")+ [i]).checked)
{
var gvalue = parseInt(document.getElementById(("dthchannel")+[i]).value);
var gNameValue= document.getElementById("CHANNELNAME"+i).value+"~"+gvalue+"#";
finalNameValue+= gNameValue;
counter+= gvalue;
}
showresult();
}
var finallist = finalNameValue.substring(0,finalNameValue.length-1);
//alert("finallist" +finallist);
document.getElementById("CHANNELDTL").value= finallist;
}
function showresult(){
if(counter <= 150 && counter > 0){
document.getElementById("youpay").value = "150";
document.getElementById("totalamount").value = counter;
}
else
{
document.getElementById("youpay").value = counter;
document.getElementById("totalamount").value = counter;
}
}
window.onload = resetcheckboxValue;
You need to modify whatever lines look like this:
var gvalue = parseInt(document.getElementById("dthchannel" + i).value);
You don't want to do document.getElementById(("dthchannel") + [i]) as I've never seen that before and I don't think it works.