The code below is for a landing page in Marketing Cloud. I have been able to turn the radio button square but when I do they are no longer clickable. Any help would be greatly appreciated.
<div class="radio_heading">
<b> My communication preference is: </b>
</div>
<form action="" method="POST"> hmtl <div class="preference_form form_grid">
<div class="radio_option">
<input type="radio" name="Communication_Preference" value="Email" %%=IIF(#commPreference=="Email" , "checked" , "" )=%% />
<label> Email </label>
</div>
<div class="radio_option">
<input type="radio" name="Communication_Preference" value="SMS/Mobile Messaging" %%=IIF(#commPreference=="SMS/Mobile Messaging" , "checked" , "" )=%% />
<label> SMS/Mobile Messaging </label>
</div>
<div id="sms_disclaimer"> By opting in you consent to receive SMS notifications. Message and data rates apply. You may opt out of SMS messaging at any time by changing your preference on this page or by texting "STOP" to 34313. </div>
<div class="radio_option">
<input type="radio" name="Communication_Preference" value="Direct Mail" %%=IIF(#commPreference=="Direct Mail" , "checked" , "" )=%% />
<label> Printed Mail </label>
</div>
</div>
<input hidden="" name="subkey" value="%%=v(#subscriberkey)=%%" >="">
<div class="update_button">
<button type="submit" onclick="swal.showLoading()"> Update </button>
</div>
Related
I want to validate the form when user click the submit button using bootstrap and angularjs.If any of the field in the form is blank i want to dislay the error message below the blank elements.
Demo : https://plnkr.co/edit/55lFImusbCznYjLXypDu?p=preview
html code:
<form name="myForm" ng-controller="ExampleController">
<div>Select Color : </div>
<label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}
<br> </label><br>
<div ng-show="myForm.$submitted || myForm.color.$touched">
<p class="error-mesg" ng-show="headerForm.color.$error.required">Select the color</p>
</div>
<div class="">
<div style="color: black;">Username : </div>
<input type="text" name="user" value="" required>
<div ng-show="myForm.$submitted || myForm.user.$touched">
<p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
</form>
My above code is failing to show error message below the checkboxes when not selected.I want to show an error message "Please Select the color" below the checkboxes when user click on submit button without selecting atleast one checkbox.And when user click on any of the check box the error message should disappear.
You can add dynamically required for checkbox input: ng-required="selectedColor.length === 0"
if you do not select color, checkboxs will be required, when color is selected, then is it unrequired.
<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">
We have built a site with a login page - login page is a simple form in field sets - annoyingly when using an iPad the keyboard is triggered whenever pressing the button - it stays active as the next page is loaded - i can understand why - following is the form code - is there any way to disable this functionality?
<section>
<h3>Login</h3>
<form method="post" action="/Login" novalidate="novalidate" _lpchecked="1"> <fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_UserName">User Name</label>
<input type="text" value="" name="FormModel.UserName" id="FormModel_UserName" data-val-required="Please provide your User Name" data-val="true" aria-required="true" aria-describedby="FormModel_UserName-error" class="input-validation-error" aria-invalid="true">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.UserName" class="field-validation-error"><span id="FormModel_UserName-error" class="">Please provide your User Name</span></span>
<img alt="Icon: Person" src="/css/img/icons/icon-user.svg">
</label>
</fieldset>
<fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_Password">Password</label>
<input type="password" name="FormModel.Password" id="FormModel_Password" data-val-required="Please provide your Password" data-val="true" aria-required="true" class="input-validation-error" aria-describedby="FormModel_Password-error">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.Password" class="field-validation-error"><span id="FormModel_Password-error" class="">Please provide your Password</span></span>
<img alt="Icon: Pencil" src="/css/img/icons/icon-pencil.svg">
</label>
</fieldset>
<div data-valmsg-summary="true" class="validation-summary-errors"><ul> <li>Please provide your User Name</li><li>Please provide your Password</li> </ul></div> <fieldset>
<button class="button" name="submit" type="submit">
<i class="key"></i>
<span>Login</span>
</button>
</fieldset>
<!-- Javascript detection -->
<span class="result-login" id="result"></span>
You could try to disable native, default submit process and do submiting with js,, something like this:
document.getElementsByClassName('button')[0].onclick = function(e){
e.preventDefault();
document.getElementById('frm1').submit();
}
see the code here, I changed some tag names, look the html pane also..: http://codepen.io/mkdizajn/pen/EgmPQR?editors=1010
I can't see this live and test but I hope that helps..
I have checkboxes with values in HTML. The problem is that I want the values to store in the database and not a boolean. How do I do this?
HTML:
<div class="form-group" >
<label >Bachelor</label><br>
<input type="checkbox" id="ComputerScienceB" ng-model="vm.course.bachelor.computer" value="Computer Science"> Computer Science
<br>
<input type="checkbox" id="SystemsEngineeringB" ng-model="vm.course.bachelor.systems" value="Systems Engineering"> Systems Engineering
<br>
<input type="checkbox" id="EnvironmentalEngineeringB" ng-model="vm.course.bachelor.environmental" value="Environmental Engineering"> Environmental Engineering
<br>
<input type="checkbox" id="MechanicalEngineeringB" ng-model="vm.course.bachelor.mechanical" value="Mechanical Engineering"> Mechanical Engineering
<br>
<input type="checkbox" id="BiotechnologyB" ng-model="vm.course.bachelor.bio" value="Biotechnology"> Biotechnology
</div>
<br>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-click="vm.saveCourse()">Add Course</button>
</div>
</form>
The database inserts the hole vm.course. I am using the hole mean stack.
You need ng-true-value attribute. You can use it like this:
<input ng-true-value="Biotechnology"
type="checkbox"
id="BiotechnologyB"
ng-model="vm.course.bachelor.bio">
See angular docs on input[checkbox]
I am working on an MVC5 Web Application , I have a simple registration form containing Email , postcode and password. But when I register the chrome remembers the postcode and password rather than email and password; and next time when I try to enter email the postcodes appear as suggestions.
My markup for the form is as under:
I have edited the question and pasted the whole form. kindly suggest me what to do other than moving email and passwords up or down.
<div class="wrapper">
<div class="closeBetaWrapp">
<div class="simplePopup">
<div class="loginWrapp signupWrapp">
<div class="iconCont"><img src="images/orchaIcon.png" alt="Orcha"></div>
<form action="">
<div class="formrow ">
<div class="leftCol">
<label for="Email">Email</label>
<input class="formField" type="email" name="Email" id="Email" placeholder="Enter your email address here" />
</div>
<div class="leftCol">
<label for="Pcode">Postcode</label>
<input class="formField" type="tel" name="Pcode" id="Pcode" placeholder="Enter postcode here" />
</div>
<div class="leftCol">
<label>Year of Birth</label>
<select id="" class="dropdown">
<option>Choose your year of birth</option>
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
</div>
<div class="leftCol">
<label>Gender</label>
<select id="" class="dropdown">
<option>Choose your year of birth</option>
<option>Female</option>
<option>Male</option>
</select>
</div>
<div class="leftCol">
<label for="Password">Password</label>
<input class="formField" type="password" name="Password" id="Password" placeholder="Enter your password here" />
</div>
<div class="rightCol">
<label for="CPassword">Confirm Password</label>
<input class="formField" type="password" name="CPassword" id="CPassword" placeholder="Enter password again" />
</div>
</div><!-- formrow -->
<div class="formrow">
<div class="rightCol btnCol">
<input class="moreBtn" type="submit" value="Signup" />
<input class="moreBtn cnclBtn" type="reset" value="Cancel" />
</div>
</div><!-- formrow -->
</form>
</div>
</div>
</div><!-- closeBetaWrapp -->
Browsers detect passwords by form.elements[n].type == "password" and iterating through all the document. Then it detects the username field by searching backwards through form elements for the text field immediately before the password field.
So, In your case, It thinks your postcode as your username field and remembers this.
So, solution is to move the postcode field above the email field.
If even after moving, it doesn't work, delete previously saved postcode-password value from 'saved passwords' in chrome settings. Also delete any previously saved values by using down arrow key to select the suggestion and pressing shift + delete.
I got the information about how browsers detect username-password field here & here
You can use the autocomplete attribute to tell the browser what the field contains. For example:
<input class="formField" autocomplete="postal-code" type="text" name="PostCode" id="PostCode" placeholder="Enter your postcode here" />
See https://html.spec.whatwg.org/multipage/forms.html#autofill for more information.
I have got below ASP html
<div id="divCheckAll">
<div class="selectall">
<input type="checkbox" id="chkOperationalUpdate" name="chkOperationalUpdate" value="1" />
Operational Update
<div class="clear">
</div>
</div>
<br />
<div class="selectall">
<input type="checkbox" id="chkLounges" name="chkLounges" value="1" />
Lounges
<div class="clear">
</div>
</div>
<br />
<div class="selectall">
<input type="checkbox" id="chkLocations" name="chkLocations" value="1" />
Locations
<div class="clear">
</div>
</div>
<br />
<div class="selectall">
<input type="checkbox" id="chkChauffeurdrive" name="chkChauffeurdrive" value="1" />
Chauffeurdrive
<div class="clear">
</div>
</div>
<br />
<div class="selectall">
<input type="checkbox" id="chkFleet" name="chkFleet" value="1" />
Fleet
</div>
</div>
Now on my button click and form action, I am calling another ASP page which is taking above html values as request. I want to check if any of the above checkbox is not checked then it would return some message back, something like below:
If Request("chkOperationalUpdate")="" or Request("chkLounges")="" or Request("chkLocations")="" or Request("chkChauffeurdrive")="" or Request("chkFleet")="" Then
Response.Write "<font color='red'>Please select at least one items to be published</font>"
Response.End
End If
Above condition works perfectly for checking one request, however I want if user has selected any of the checkboxes then it should not return any message, it should return message only if user missed to select any of the checkboxes.
Please suggest!!
Replace or with and, this way it will display message of selecting atleast one CheckBox if user hasn't selected..
'none of the checkbox is selected
If Request("chkOperationalUpdate")="" and Request("chkLounges")="" and Request("chkLocations")="" and Request("chkChauffeurdrive")="" and Request("chkFleet")="" Then
Response.Write "<font color='red'>Please select at least one items to be published</font>"
Response.End
Else
'User has selected atleast one checkbox
End If