Chrome removes form tag in .innerHTML insert - ajax

I have some mvc frameworks that extend my .net application. Their task is mainly to deliver partials to the .net applications interface.
The funny thing is that chrome strips the very necessary
Here is how I fetch and render the data from the framework
$.ajax({
url: "/mvc/UserProfile/AddressForm?datatype=shipping",
dataType: "text", // text html script
method: "get",
cache: false,
success: function (data) {
console.log(data);
//var userProfileAdd = document.getElementById("userProfileAdd");
var userProfileAdd = $("#userProfileAdd")[0];
userProfileAdd.innerHTML = "<div>" + data + "</div>";
}
});
Firefox, IE and so on does retrieve all data. Does anyone know why chrome behaves like this?
Thanks
EDIT
This is the code sent to the data variable printed by console.log
<script src="/scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<form OnSubmit="return false;" action="/mvc/UserProfile/AddressFormPost" id="frmUserAddress" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>
</ul></div>
<input name="__RequestVerificationToken" type="hidden" value="8Vkd039Wc3825G6CTEomJ/aXfrCyjuEY3sV/ty4znHi9yO0Th535p8VNxqvBwhJ12AREQhvTMhRVNEO6Ke3O87jDAjREg3I3dFYp2Y5geutbEOLk6KHmn6hLb4a5CFaZ3uCOm8uYgr/U4au33yaUFw==" />
<div>
Select country:
<select id="Countries" name="Countries"><option value="029">Caribbean</option>
<option value="AE">U.A.E.</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="AM">Armenia</option>
<option value="AR">Argentina</option>
</select>
</div>
<div>
Postal Code
<input class="formField textBox" id="PostalCode" name="PostalCode" type="text" value="" />
<span class="field-validation-valid" id="PostalCode_validationMessage"></span>
</div>
<div>
City
<input class="formField textBox" id="City" name="City" type="text" value="" />
<span class="field-validation-valid" id="City_validationMessage"></span>
</div>
<div>
State
<input class="formField textBox" id="State" name="State" type="text" value="" />
<span class="field-validation-valid" id="State_validationMessage"></span>
</div>
<div>
First name
<input class="formField textBox" id="FirstName" name="FirstName" type="text" value="" />
<span class="field-validation-valid" id="FirstName_validationMessage"></span>
</div>
<div>
Email
<input class="formField textBox" id="Email" name="Email" type="text" value="" />
<span class="field-validation-valid" id="Email_validationMessage"></span>
</div>
<div>
<input type="submit" value="Send!" id="btnAddressForm" class="button" />
</div>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"PostalCode","ReplaceValidationMessageContents":true,"ValidationMessageId":"PostalCode_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your postal code","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"City","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your city","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"State","ReplaceValidationMessageContents":true,"ValidationMessageId":"State_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your state","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Email","ReplaceValidationMessageContents":true,"ValidationMessageId":"Email_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"frmUserAddress","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>

Chrome will strip out the form element if there is a surrounding form element. JUST the form tag disappears, all of its contents remain.
Check to make sure that there isn't a parentNode for "userProfileAdd" that is a form.

Related

ajaxSubmit not working IE9. All other browsers seem fine

I have a simple (naked) MailChimp email signup form that I can't get to work in IE9. Every other browser seems fine. I know this question has been asked before but in various different circumstances. We are using JQuery Form Plugin.
<script type="text/javascript">
$(document).ready(function(){
$("#mc-embedded-subscribe-form").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
/*DO SOME OTHER STUFF*/
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="mc_embed_signup">
<form action="//#####.us3.list-manage.com/subscribe/post?u=#############&id=##########" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE10">State </label>
<select name="MMERGE10" class="" id="mce-MMERGE10">
<option value=""></option>
<option value="NSW">NSW</option>
<option value="VIC">VIC</option>
<option value="QLD">QLD</option>
<option value="WA">WA</option>
<option value="ACT">ACT</option>
<option value="SA">SA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select>
</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> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_8bd18de15624fc1fb89b76d51_29d17890f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

CasperJs, how to fill a form that only have a class, not a name and not an id?

I want to fill this form, but i dont know how to do it since it only have a classname.
All the examples i saw have an id or a name, to fill the form and submit it, please help.
<form class="header_form" method="post" action="">
<div class="lgn-items">
<div class="login_item">
<label>Email</label>
<input type="text" name="email" tabindex="1" class="inputtext" id="email" />
</div>
<div class="login_item" >
<label>Password</label>
<input type="password" name="password" tabindex="2" class="inputtext" id="pass" />
</div>
<div class="lgn-add">
Registration <span>|</span>
Forgot your password ?
<div class="rembo">
<input type="checkbox" name="remember" value="1" /> Remember me
</div>
</div>
</div>
<div class="login_item lgn-btn" >
<input type="submit" name="login_button" value="Login" tabindex="3" class="login" />
</div>
</form>
You can access to your form using any selector. In your case you to it like this.
casper.then(function () {
casper.fill('form.header_form', {
/** Your parameters here **/
}, true);
});

Form fields in acordina are not geting validated

I am using validationEngine for validating form fields. I have tab and inside the tab, I have two accordions. Each accordion has 4 fields. When I submit, only first accordion form fields that are opened are getting validated. Is there any way I can force to validate all the form fields and open all accordions to show the required field message? Thank you!
<div id="tabs-1">
<div id="accordion">
<h3>Select Agent</h3> <!-- First accordion title) -->
<fieldset>
<div>
<label >Agent Name or ID</label>
<input name="insuredFirsName" title="type "Agent name or id "" class="validate[required] text-input" type="text" >
</div>
<label>Age</label>
<input type="text" name="age" value="${ajaxForm.age}" maxlength="3" size="3" class="validate[required] text-input" >
</fieldset>
<h3>Application Details</h3> <!-- Second accordion title) -->
<fieldset>
<div>
<label>Contract State</label>
<select name="State" id="State" class="validate[required]">
<option value="">Choose a State</option>
<option value="IL">Illinois</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</div>
<div>
<label>Application Number :</label>
<input value="" class="validate[required] text-input" type="text" name="req" id="req" />
</div>
<div>
<label>Application Number :</label>
<input value="" class="validate[required] text-input" type="text" name="req1" id="req1" />
</div>
</fieldset>
</div> <!-- Accordion close -->
<html:button property="button1" value ="Submit"></html:button>
</div> <!-- Tab-1 close -->
maybe a little late but I had this same problem, i searched on the internet and found a solution, but this will work for you:
jQuery("#digitale-aanvraag").validationEngine({
validateNonVisibleFields: true,
});
Your fields in an accordion are set to hidden so as default the validator would skip them.
Be aware that if you use this in a wizard, it won't work, because those fields are also hidden...
Anyway, GL!

jquery Validate not validating input in IE 8

I am using jquery validation and it is not catching instances where the validation conditions are not met? This is curious to me, partly, because it was working before (I am using IE 8 in compatibility mode now, would that affect something?)...
There don't seem to be any compilation exceptions off the top of my head? Does where I import the jquery validation src file affect how it works??? Here is my code...
$("#temp1").validate({
rules: {
HospitalFinNumber: {
required: true,
minlength: 6
},
DateOfBirth: {
required: true
},
AdmitDate: {
required: true
},
Comment: {
required: function (element) {
return $(element).val().length < 4000;
},
maxlength: 4000
}
},
messages: {
HospitalFinNumber: 'Please Enter a Hospital Fin number',
DateOfBirth: 'Please enter a valid Date Of Birth',
AdmitDate: 'Please select an Admit Date',
Comment: 'Why dont you stop attempting to put in more than 4000 characters? Thanks...'
}
});
Here are my includes into source...
<script src="<%=Url.Content("~/Scripts/js/jquery-ui-1.8.15.custom.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.validate.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.timeentry.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.maskedinput-1.3.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/charCount.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.filter_input.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/simpleTimeMask.js")%>" type="text/javascript"></script>
form elements:
<div class="edit-set" id="EditTemplate">
<form action="/PatientACO/UpdateXML?template=592&PopPatId=1139&EncOrAdd=0" id="temp1" method="post" name="editTemp"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>
</ul></div>
Activate/Deactivate Patient
<div id="deactivateNO" style="display:none"><input id="deactivate" name="deactivate" type="radio" value="N" />Deactivate</div>
<div id="deactivateYES" style="display:none"><input id="deactivate" name="deactivate" type="radio" value="A" />Activate</div>
<table width="500" class="odd"><tr><td><label for="BLUE">First Name</label></td><td> <input id="element6" name="FirstName" readonly="True" type="text" value="BLUE" /></td></tr> <tr><td><label for="CRAYON">Last Name</label></td><td><input id="element7" name="LastName" readonly="True" type="text" value="CRAYON" /></td></tr><tr><td><label for="10/31/1966 12:00:00 AM">Date Of Birth</label></td><td><input class="datepicker0" id="date0" name="DateOfBirth" type="text" value="10/31/1966" /><!--supposed to be date input --></td></tr><tr><td><label for="4111111111">Phone</label></td><td><input id="Phone" name="Phone" type="text" value="4111111111" /><!--string input -->
</td></tr><tr><td><label for="111 222 333 444">Hospital Fin Number (**required**)</label></td><td><input id="HospitalFinNumber" name="HospitalFinNumber" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="29-DEC-11">Admit Date (**required**)</label></td><td><input class="datepicker1" id="AdmitDate" name="AdmitDate" type="text" value="" /><!--supposed to be date input -->&nbsp</td></tr><tr><td><label for="MPACMRN">MRN Type</label></td><td><select id="MPACMRN" name="MRNType"><option selected="selected" value="MPACMRN">Medipac</option>
<option value="NWMRN">NorthWest</option>
<option value="EPIC">Epic</option>
<option value="BEDFORD">Bedford</option>
<option value="CHILDRENS">Childrens</option>
<option value="MAGEE">Magee</option>
<option value="PASSAVANT">Passavant</option>
<option value="MERCY">Mercy</option>
<option value="BEST">Medicare</option>
<option value="HEALTHPLAN">UPMC Health Plan</option>
<option value="EMPIID">EMPI</option>
</select></td></tr><tr><td><label for="840015579">MRN</label></td><td><input id="MRN" name="MRN" type="text" value="840015579" /></td></tr><tr><td><label for="">Patient Room Phone</label></td><td><input id="PatientRoomPhone" name="PatientRoomPhone" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">Discharge Date Time</label></td><td><input class="datepicker2" id="DischargeDateTime" name="DischargeDateTime" type="text" value="" /><!--supposed to be date input -->&nbsp<input id="DischargeDateTimeMask" name="DischargeDateTimeMask" type="text" value="" /><!--supposed to be date input --></td></tr><tr><td><label for="">Discharge Disposition</label></td><td><input id="DischargeDisposition" name="DischargeDisposition" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">Discharge To</label></td><td><input id="DischargeTo" name="DischargeTo" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="1">Discharge Advocate Call</label> </td><td><input checked="checked" id="element18" name="DischargeAdvocateCall" type="radio" value="1" />Yes<input id="element18" name="DischargeAdvocateCall" type="radio" value="0" />No</td></tr><tr><td><label for="">Payor</label></td><td><input id="Payor" name="Payor" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="1">Home Healthcare Accepted</label> </td><td><input checked="checked" id="element20" name="HomeHealthCareAccepted" type="radio" value="1" />Yes<input id="element20" name="HomeHealthCareAccepted" type="radio" value="0" />No</td></tr><tr><td><label for="1">Safe Landing Accepted</label></td><td><input checked="checked" id="element21" name="SafeLandingAccepted" type="radio" value="1" />Yes<input id="element21" name="SafeLandingAccepted" type="radio" value="0" />No</td></tr> <tr><td><label for="">PCP Name</label></td><td><input id="PCPName" name="PCPName" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">PCP Phone</label></td><td><input id="PCPPhone" name="PCPPhone" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">Specialist Name</label></td><td> <input id="SpecialistName" name="SpecialistName" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">Specialist Phone</label></td><td> <input id="SpecialistPhone" name="SpecialistPhone" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">PCP Appointment Date Time</label> </td><td><input class="datepicker3" id="PCPAppointmentDateTime" name="PCPAppointmentDateTime" type="text" value="" /><!--supposed to be date input -->&nbsp<input id="PCPAppointmentDateTimeMask" name="PCPAppointmentDateTimeMask" type="text" value="" /><!--supposed to be date input --></td></tr><tr><td><label for="">PCP Appointment Location</label></td><td><input id="PCPAppointmentLocation" name="PCPAppointmentLocation" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">Specialist Appointment Date Time</label></td><td><input class="datepicker4" id="SpecialistAppointmentDateTime" name="SpecialistAppointmentDateTime" type="text" value="" /><!--supposed to be date input -->&nbsp<input id="SpecialistAppointmentDateTimeMask" name="SpecialistAppointmentDateTimeMask" type="text" value="" /><!--supposed to be date input --></td></tr><tr><td><label for="">Specialist Appointment Location</label></td><td><input id="SpecialistAppointmentLocation" name="SpecialistAppointmentLocation" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="">Completed Pathway</label></td><td><input id="element30" name="CompletedPathway" type="radio" value="1" />Yes<input id="element30" name="CompletedPathway" type="radio" value="0" />No</td></tr><tr><td><label for="">Completed Pathway Reason</label></td><td><input id="CompletedPathwayReason" name="CompletedPathwayReason" type="text" value="" /><!--string input -->
</td></tr><tr><td><label for="Testing the Add function on my development setup.">Comment</label></td><td><textarea cols="60" id="element32" name="Comment" rows="10">
</textarea></td></tr></table>
<p>
<input type="submit" value="Save" class="button" id="btClick"/>
</p>
</div>
</form>
Also, I just noticed that it is not working in ie 8 but it is working in chrome? Could there be some browser compatibility problems?
Jquery Validate version 1.9 seems to have fixed the problem...
Link to version 1.9
I had to add it to my project as a package. Which I find is weird. But what the heck ever.

Jquery Validation for Driver Registration HTML Form

Hi make one html from which submitting without refresh by jquery. Problem is that I am beginner and I dont know how to add validation for html form. I need changes in script so first form will validate by jquery or ajax then it will submit by jquery witout page refresh.. have look in my code. Please provide me working solution in that first form validate by ajax jquery then submit by jquery without refresh.. Thanks in advance
JQUERY:
<script type="text/javascript">
$(document).ready(function(){
$("form#form").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var phone = $("#phone").val();
var dataString = 'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "addd.php",
data: dataString,
success: function(){
$('form#form').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
</script>
HTML FORM:
<form id="form" method="post" name="form" action="">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="choice">Name : </label>
<input type="text" id="name" name="name" value=""> <br />
<label for="choice">Licence No : </label>
<input type="text" id="licence" name="licence" value=""> <br />
<label for="choice">Email : </label>
<input type="text" id="email" name="email" value=""> <br />
<label for="choice">Phone : </label>
<input type="text" id="phone" name="phone" value=""> <br />
<input type="hidden" name="uno" id="uno" value="" />
<br />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Add Driver" />
<input id="button2" type="reset" />
</div>
</form>
I found multiple errors/mistakes on your HTML form too. some of them I want to mention..
for attribute of label have same value of the next input/select id, read:
http://www.w3schools.com/tags/att_label_for.asp
Dont assign name for name and id attribute, it's misleading.( good practice)
Don't write value ="", if you there is no initial value of any input box.
If u want to validate a hidden field then write some value for that on form intialization, otherwise it wud be always empty and your validation never works.
If u want to validate all input field together for emptyness then use :input selector ,read :
http://api.jquery.com/input-selector/
Don't forget to validate email address
If you want to post a form via ajax then there is no need to write method and action attribute in your form
Your reset button shoud have some value, otherwise its takes default value.
A very useful and handy article for newbie for jquery ajax validation
http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition
OR you can use jquery validator plugin :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
here is your neat and clean form
<form id="driverForm" name="driverForm">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="lname">Name : </label>
<input type="text" id="lname" name="lname" > <br />
<label for="licence">Licence No : </label>
<input type="text" id="licence" name="licence" ><br />
<label for="email">Email : </label>
<input type="text" id="email" name="email" ><br />
<label for="phone">Phone : </label>
<input type="text" id="phone" name="phone" > <br />
<input type="hidden" name="uno" id="uno" /><br />
</fieldset>
<div align="center">
<input type="submit" id="submitForm" name="submitForm" value="Add Driver" />
<input type="reset" value="clear" />
</div>
</form>
Hope this will be useful for you.
UPDATE
put it insdie submit() and before ajax like this
$("form").submit(function() {
if($('#lname').val() == '')
return false;
});
$.ajax({
NOTE: dont create dataString Manually there is inbuilt function in jQuery.
serialize
Please note that ,this is not matter that your form is submitting or not. most thing is it a valid form or not.
Happy to help :)

Resources