please add hmtl code that does the following All javascript should be in an exte
ID: 3589348 • Letter: P
Question
please add hmtl code that does the following
All javascript should be in an external file, include jQuery from a CDN
1. all validation should work. All new work done must be using jQuery
2. When the document is loaded, insert 3 new input fields into the last section (#contact) below the radio buttons but initally have the inputs hidden. The fields should be personal website, home phone and cell phone.
3. When the user selects "Yes" to entering their contact information, fade the new inputs in over a period of .8 sec.
4. If the user decides to select "No" after the new inputs are shown, fade the new inputs out over a period of 1.4 sec.
5. validate the new inputs (if needed) by the following rules: website must have an '.' symbol followed by 3 letters at the end; home phone and cell must be 10 digits long AND be different. All 3 fields are required if the user has selected 'Yes' to entering contact information
<html>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="password">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<section>
<h4>Do you need to fill out your contact information
<label for="contactYes">
<input type="radio" id="contactYes" name="contact" value="1" >
Yes
</label>
<label for="title_2">
<input type="radio" id="contactNo" name="contact" value="0">
No
</label>
</section>
<section>
<p> <button type="submit">Validate the payment</button> </p>
</section>
</form>
</html>
Explanation / Answer
Please find the below code
Payment.html
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="password">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<section>
<h4>Do you need to fill out your contact information
<label for="contactYes">
<input type="radio" class="radios" id="contactYes" name="contact" value="1" >
Yes
</label>
<label for="title_2">
<input type="radio" class="radios" id="contactNo" name="contact" value="0">
No
</label>
</section>
<div id="contactinfo">
</div>
<section>
<p> <button type="submit" id="validate">Validate the payment</button> </p>
</section>
</form>
</body>
</html>
script.js
$(document).ready(function(){
$('#contactinfo').append("<p><label for='number'><span>Web Site:</span></label><input type='text' id='website' name='website'></p>");
$('#contactinfo').append("<p><label for='number'><span>Home phone:</span></label><input type='number' id='homephone' name='homephone'></p>");
$('#contactinfo').append("<p><label for='number'><span>Cell phone:</span></label><input type='number' id='cellphone' name='cellphone'></p>");
$("#contactinfo").hide();
$(".radios").click(function(){
//alert("haiiiiiii");
var contact = $("input[name='contact']:checked"). val();
//alert(contact);
if(contact=="1"){
$("#contactinfo").show();
$("#website").prop('required',true);
$("#homephone").prop('required',true);
$("#cellphone").prop('required',true);
}else{
$("#contactinfo").hide();
$("#website").prop('required',false);
$("#homephone").prop('required',false);
$("#cellphone").prop('required',false);
}
});
$("#validate").click(function(e){
if($("input[name='contact']:checked"). val() == "1"){
var website = $('#website').val();
if(website.indexOf(".")>1){
var vals = website.split(".");
if(vals[1].length!=3){
alert("Extension shoulb be 3 characters");
$('#website').val('');
e.preventDefault();
}
}else{
alert("Website name must have .(Dot)");
e.preventDefault();
}
if($("#homephone").val() == $("#cellphone").val()){
alert("Both cell phone and home phone must not equal");
e.preventDefault();
}
}
});
});
Please check it and let me know any corrections by providing comment. Thank you
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.