Embedded Form Doesn't Show Values in IE - javascript

I've embedded these types of customized mailchimp forms on multiple sites with great success across all browsers, but for some reason, this particular iteration isn't working in IE. The site itself is http://www.buildinggurus.com/ and this form appears on the home page and sidebars of the inner pages.
What happens in IE is the input fields appear as blank boxes. The input value isn't visible, clicking the input field doesn't do anything (read: you can't type into it), and it seems more like a placeholder than a call to action. What am I missing here?
<div id="mc_embed_signup">
<form action="URLHERE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="widget-lead-form"><h5>Subscribe to Our Blog</h5>
<div class="mc-field-group">
<input type="text" value="first name" name="FNAME" class="required-name" id="mce-FNAME" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'first name':this.value;" required />
</div>
<div class="mc-field-group">
<input type="text" value="last name" name="LNAME" class="required-name" id="mce-LNAME" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'last name':this.value;" required />
</div>
<div class="mc-field-group">
<input value="enter your email" name="EMAIL" type="email" class="required-email" id="mce-EMAIL" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter your email':this.value;" required />
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" name="subscribe" class="submit" id="mc-embedded-subscribe" value="submit" /></div>
</div>
</form>
</div>

IE still requires a value to be set. The following I use in all of my form input tags:
onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'default value':this.value;" value="default value"

Related

Why is the required attribute in javascript form validation only works for one button in my form?

<form class="address-form" id="form" name="addressForm">
<div class="form-container">
<div class="form-input abc">
<label>Full name</label>
<input class="form-input-name" type="text" name="full_name" placeholder="Enter your full name" maxlength="50" value="{{ customer.name }}" required>
<div class="input-error hidden" id="input-error-name">Please enter your name</div>
</div>
<div class="form-input abc">
<label>Email</label>
<input class="form-input-email" type="email" name="email" placeholder="Enter your email" maxlength="50" value="{{ customer.email }}" required>
<div class="input-error hidden" id="input-error-email">Please enter your email</div>
</div>
<div class="form-input abc">
<label>City</label>
<input class="form-input-city" type="text" name="city" placeholder="Enter your city" maxlength="50" required>
<div class="input-error hidden" id="input-error-city">Please enter your city</div>
</div>
<div class="form-input abc">
<label>Address</label>
<textarea name="address" class="form-input-address" placeholder="For example: 92 Nguyen Huu Canh street" required></textarea>
<div class="input-error hidden" id="input-error-address">Please enter your address</div>
</div>
<div class="form-check abc">
<label></label>
<input class="tickbox" type="checkbox" onclick="checkTickbox()" id="flexCheckDefault" style="cursor: pointer" name="default">
<label class="form-check-label" for="flexCheckDefault" style="cursor: pointer; font-weight: 500; font-size: 12px">
Set as default address
</label>
</div>
<div class="buttons-container abc">
<label></label>
<div class="button-group">
<button class="cancel-button btn btn-light" id="cancel" formnovalidate>Cancel</button>
<button type="submit" class="create-update-button btn btn-primary" id="create-update">Ship to this address</button>
</div>
</div>
</div>
</form>
I don't know why my code is acting weird, the required attribute works on the cancel button, but doesn't validate the form when I pressed the submit button. However, the submit button actually works when I commented out the cancel button. I currently have an event listener for the submit button which will send the form's data via a POST request when clicked, I don't know if that's the problem
By default button type is submit , since cancel button does not have type defined so it will work as submit . Add button type button to cancel button
<button type = 'button' class="cancel-button btn btn-light" id="cancel">Cancel</button>
the The required attribute only works with types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. so you should specified the type in here :
<textarea name="address" class="form-input-address" placeholder="For example: 92
Nguyen Huu Canh street" required>
</textarea>

Submit and Reset not working for contact form

I have created a simple form for contact-us section on a website. For submit button, initially I used type=submit but later came across a suggestion to change it to type=button. However the code is not working for submit as well as reset. Can someone please help to point out whats wrong in my code below.
function submitForm() {
var frm = document.getElementById('contactFormAP');
alert('H2');
frm.submit(); // Submit the form
alert('H3');
frm.reset(); // Reset form data
return false;
}
<form class="contactForm" action="email_form.php?do=send" method="post" role="form" id="contactFormAP">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" id="contactnumber" placeholder="Contact Number" data-rule="minlen:10" data-msg="Please enter correct contact number with country code" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="text-center">
<input type="button" value="Submit" id="submitbtn" onclick="submitForm()">
</div>
</form>
Use the OnSubmit-Listener instead:
https://www.w3schools.com/jsref/event_onsubmit.asp

how to remove "please fill out this field" pop up when click on submit form in angularjs but other validations should work

I want to remove the "please fill out this field" pop-up as validation and normal validations which are declared should display.
Html:
<div class="panel-body">
<form role="form" id="createForm" v name="createForm" ng-submit="createAdminGroup(adminGroupData)">
<div class="form-group" ng-class="{ 'has-error' : createForm.firstName.$invalid && !createForm.firstName.$pristine}">
<label class="label1">First Name</label>
<input name="firstName" id="firstName" class="form-control" placeholder="First Name" name="firstName" type="text" ng-model="adminGroupData.firstName " required/>
<span style="color:red" ng-show="createForm.firstName.$invalid && !createForm.firstName.$pristine">Please enter first name</span>
</div>
<div class="form-group">
<label class="label1">Last Name </label>
<input name="lastName" id="lastName" class="form-control" placeholder="Last Name" name="lastNmae" type="text" ng-model="adminGroupData.lastName" />
</div>
<div class="form-group">
<label class="label1"> Email Id </label>
<input type="email" name="email" id="email" class="form-control" placeholder="email#xyz.com" value=""ng-model="adminGroupData.email"/>
</div>
<div class="form-group">
<label class="label1"> Password </label>
<input name="password" id="password" class="form-control" placeholder="password" value="" ng-model="adminGroupData.password" />
</div>
<button name="submit" type="submit" class="btn btn-success" id="" ng-disabled="userForm.$invalid">Save</button>
<button class="btn btn-default" id="cancel" type="button" onclick='handleCancelCreateAdmin()'> Back </button>
</form>
</div>
Add novalidate attribute to your form to disable browser default validation
For Ex
<form role="form" novalidate id="createForm" v name="createForm" ng-submit="createAdminGroup(adminGroupData)">
Find more here
Add the attribute formnovalidate inside your submit button:
Example:
<button name="submit" type="submit" formnovalidate class="btn btn-success">Save</button>
This will disable only the browser form validation. You still have the validation from your AngularJS code.
You can see the W3C specification here
I had the same problem a few days ago and that's how I managed to solve
I just tried this and it worked:
oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')" >
I have add a space between the two single quotes.
Since i added a bootstrap tooltip on my input fields and required, the invalid input comes to focus and displays the tooltip value.
It was simpler than I thought it would be.
title=""
The tooltip appears even when input is outside of form and for those cases it does not work the novalidate.
One solution is to remove required, but if you have a large codebase then a quick hack will be to add title="".
<input type="text" required title="" />

Hijacking from submit to redirect page (Javascript)

So we're using an online service to handle webinars on our site.
I have full control of the HTML for the registration page but don't have control of the PHP file used in the registration. Currently, the registration form looks like this:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
This submits the values from the form to "notify.php". notify.php apparently has code to force the iframe this code is hosted inside of, to redirect to another page. I don't want this to happen.
I want the form to submit, but then I want to send the user to my own ThankYou page. I'm thinking that the best way to do this is by "hijacking" the submission and sending them to the page I want.
I thought that maybe calling a custom javascript function using onsubmit might work. Here's what I have right now:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST" onsubmit="return doRedirect();">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
<script language="javascript" type="text/javascript">
function doRedirect()
{
window.location.replace("http://stackoverflow.com");
return true;
}
</script>
For some reason it's not working though. The iframe continues to redirect to the page I don't want, and the window itself isn't being redirected.
Am I doing this right or is there a better way of achieving this?
Thank you in advance for your help!
Jason
UPDATE: I've confirmed that the javascript is never executing. I added: window.alert("JAVASCRIPT EXECUTED"); and the pop-up never happens so this appears to be an issue with onSubmit rather than the javascript itself. Why won't the javascript execute in onSubmit? I tried changing it to onSubmit="JavaScript:doRedirect();" and that didn't work either.
This should do the trick:
<input type="submit" name="go" onclick="doRedirect();" value="Sign Up for Webinar!" />
If you are looking to completely remove the interaction with the php form, remove the action from the <form> tag
<form accept-charset="UTF-8" name="regform" id="regform" class="infusion-form" method="POST">
If you are willing to try AJAX:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
jQuery(function($) {
$('#regform').submit( function(e){
$.ajax({
type: 'post',
data: $(this).serialize(),
url: $(this).attr("action")
})
.done(function (data){
$(location).attr('href', 'http://stackoverflow.com');
});
e.preventDefault();
});
});
</script>
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>

TinyBox how get passing value from parent pages

Recently I have faced a problem which do not know how to pass value from parent page to a tinybox. The following is my source code; is there any idea can help me to achieve this? A edit.php wrap inside a tinybox so when I click on a specific column suppose the value should pass to the edit.php (tinybox) and also the value will display on the textfield, but it just simply doesn't work. I am new in PHP would appreciate for some one pointing me to good solution.
parent page.php
display_cell6.appendChild(edit).innerHTML='<img id="edit" alt="Edit" class="'+obj[idx].id+'" onclick="TINY.box.show({iframe:\'ajaxEditUserDetail.php\',boxid:\'frameless\',width:400,height:280,openjs:function(){openJS(this.id)}}); title="Edit" src="images/edit.png"></img>';
function openJS(id){
var id=parent.document.getElementById(id);
alert(id);
}
edit.php
<div id="banner">
<span>Edit Customer Information</span>
</div>
<div id="form_container">
<fieldset>
<div class="box-form">
<form action="send.php" method="POST" id="userDetail" >
<fieldset>
<div>
<label for="name_Req">Name <strong>*</strong></label>
<input type="text" id="name_Req" name="name" value="test"
title="Required! Please enter your name" />
</div>
<div>
<label for="contact_Req_Email">E-mail <strong>*</strong></label>
<input type="text" id="contact_Req_Email" name="email"
title="Required! Please enter a valid email address" />
</div>
<div>
<label for="telephone_Tel">Telephone</label>
<input type="text" id="telephone_Tel" name="telephone"
title="Please enter a valid telephone number" />
</div>
<div>
<label for="address">Address</label>
<input type="text" id="address" name="address" title="Please enter a
valid address" />
</div>
<div>
<input type="submit" value="Save" id="sub" class="button" />
</div>
</fieldset>
</form>
</div>
</fieldset>
</div>

Categories

Resources