Append HTML FORM in JQuery or Javascript - javascript

I'm trying to append some HTML FORM codes but it seems that there's wrong in my code. When I try to click the button "Add another experience", it will go to a required field then say "Please fill in this field". What seems to be the problem? Here is my HTML CODE:
<div class="form-group row" style="width: 100%;">
<div class="col-md-12 exp">
<label for="exp"><br>Do you have call center experience? </label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label>
<br>
<label for="exp"><br>Did you have any language training? </label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label>
<br>
<label for="exp"><br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration: </label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox" id="present" value="present"> Present
<br><br><br>
<button class="btn btn-primary add_exp1" >Add another experience</button>
</div>
</div
And here is my JQUERY CODE:
$(".add_exp1").click(function(){
$(".exp").append('<br>
<label for="exp">Another Work Experience<br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration:
</label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"
id="present" value="present"> Present
<br><br><br>'); });

I just have it working like this.
Jquery in the head
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function () {
$(".add_exp1").click(function(){
$(".exp").append('<br><label for="exp">Another Work Experience<br><br>Company Name: </label>' +
'<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">'+
'<br>'+
'<label for="exp"><br><br>Position: </label>'+
'<input type="input" class="form-control" id="position" placeholder="Position">'+
'<label for="bday"> Duration:'+
' </label>'+
'<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>'+
'<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"'+
'id="present" value="present"> Present'+
'<br><br><br>');
});
})
</script>
And body in the html is the same as yours.
The only change is the appending of the strings for the new elements in html.
To have multiple lines, you need to escape it or append the strings.

When you add multiline string in javascript code you can escape the literal newline by '\' otherwise newline symbol will break your js code. That's the right way to use multiline string:
$(".add_exp1").click(function(){
$(".exp").append('<br>\
<label for="exp">Another Work Experience<br><br>Company Name: </label>\
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">\
<br>\
<label for="exp"><br><br>Position: </label>\
<input type="input" class="form-control" id="position" placeholder="Position">\
<label for="bday"> Duration:\
</label>\
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>\
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"\
id="present" value="present"> Present\
<br><br><br>'); });
Here is working fiddle

You have two ways to do that the most simple way is to wrap a part of html that you want to clone in a div.
In your html:
<div class="form-group row" style="width: 100%;">
<div class="col-md-12 exp">
<label for="exp"><br>Do you have call center experience? </label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label>
<br>
<label for="exp"><br>Did you have any language training? </label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label>
<br>
<div id ="partialForm">
<label for="exp"><br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration: </label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox" id="present" value="present"> Present
</div>
<br><br><br>
<button class="btn btn-primary add_exp1" >Add another experience</button>
</div>
</div>
I wrapped a part of the form in a div with id = "partialForm"
Then I clonned this part in jquery and added specific html elements
$(".add_exp1").click(function(){
var newForm= $("#partialForm").clone();
$('input',newForm).val('');
var generatedBr = $(document.createElement('br'));
var header = $(document.createElement('label'))
.attr('for','exp')
.text('Another Work Experience');
$('.exp').append( generatedBr,
header,
newForm);
});
Here is the working fiddle: http://jsfiddle.net/defee/nna15kph/
Another way is to generate Html from javascript with the use of best practices.
Here there is an example how to generate an input in jquery:
var dateStartInput = $(document.createElement('input'))
.attr('id','date-picker-2')
.attr('type','date')
.attr('placeholder','Date Started')
.addClass('date-picker form-control');

Related

Change a CSS display style in Javascript

I have a problem with a bit of my javascript code.
I am trying to get my #showAddress to display: block when the deliverservice radio button is clicked/checked.
I've tried looking at some Stack Overflow posts but a lot of them are too advanced for my current level (I just started JavaScript).
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
</p>
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
<p>
I believe the error is happening in my JavaScript, however it's only two functions. The first two lines are my initialise function, which is calling my second function down below.
var showDelivery = document.getElementById("deliverService");
showDelivery.onclick = showAddress;
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
You should change this line
showDelivery.onclick = showAddress;
to something like this:
showDelivery.onclick = function(){showAddress();};
Alternatively, you can set the onclick listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
EDIT: An example of using addEventListener
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>

Would like to redirect users depending on the radio button value

I am trying to append a string to the description field and redirect users depending on the radio button they choose to click on. In this case, a customer clicks on "Cleardent Customer" radio button and upon submission, a string should be attached to the description field and it should direct them to a specific page.
It is a demo page where I am trying to figure out if the user is a returning customer or a new customer.
I tried my best to write the code but there seem to be a lot of mistakes that I am making. It's not passing value to the description field and not redirecting properly, etc.
Here's my CODE
$("#sfdemoPreSubmit").click(function(e) {
e.preventDefault();
$("#sfcompany").val($("#sflast_name").val() + ", " + $("#sffirst_name").val());
$("#sfphone").val(cleanPhNum($("#sfphone").val()));
$("#sfstate").val(getProvince($("#sfphone").val()));
$("#sfdescription").val($("sfdescription").val() + $("input[name=source]:checked").val());
$("#sfDemoForm").validate();
if ($("#sfDemoForm").valid()) {
grecaptcha.execute();
}
});
function redirect() {
var province = $('#sfstate').val();
var customerCategory = $('input[name=source]:checked').val();
if (customerCategory == 'cleardent customer') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-existing.html");
}
else if (province == 'BC') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-bc.html");
} else if (province == 'ON') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-on.html");
} else if (province == 'AB') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-ab.html");
} else {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-default.html");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form id="sfDemoForm" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="sky-form">
<input name="captcha_settings" value="{"keyname":"IC_ClearDent_Main_Demo","fallback":"true","orgId":"00D1I0000002QyG","ts":""}" type="hidden">
<input name="oid" value="00D1I0000002QyG" type="hidden">
<input name="retURL" id="retURL" value="https://test.cleardent.com/demo-thankyou-bc.html" type="hidden">
<fieldset>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sffirst_name" maxlength="40" name="first_name" size="20" type="text" required placeholder="First name">
</label>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sflast_name" maxlength="80" name="last_name" size="20" type="text" required placeholder="Last name">
</label>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-envelope"></i>
<input id="sfemail" maxlength="80" name="email" size="20" type="email" required placeholder="Email address">
</label>
<!-- <label class="label" for="phone">Phone</label>-->
<label class="input margin-bottom-25"><i class="icon-prepend fa fa-phone"></i>
<input id="sfphone" maxlength="40" name="phone" size="20" type="text" required placeholder="Phone">
</label>
<div class="radio-button">
<input class="form-check-input" type="radio" name="source" id="inlineRadio1" value="new customer">
<label class="form-check-label" for="inlineRadio1">New Customer </label>
<input class="form-check-input" type="radio" name="source" id="inlineRadio2" value="cleardent customer">
<label class="form-check-label" for="inlineRadio2">ClearDent Customer </label>
<input class="form-check-input" type="radio" name="source" id="inlineRadio3" value="other3">
<label class="form-check-label" for="inlineRadio3">Other </label>
</div>
<!--<label class="label" for="description">Notes</label>-->
<label class="textarea textarea-resizable margin-bottom-25">
<textarea id="sfdescription" name="description" placeholder="Is there something specific you want to see from ClearDent?"></textarea>
</label>
<input id="sfstate" name="state" type="hidden">
<input id="sflead_source" name="lead_source" type="hidden" value="Website">
<input id="sfcompany" name="company" type="hidden">
<input id="sfCampaign_ID" name="Campaign_ID" type="hidden" value="7011I000000d5auQAA">
</fieldset>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LeXmEAUAAAAAG7VJd6Z8YCVkP44AgAlqCUmpRAi" data-callback="submitDemoToLead" data-size="invisible"> </div>
<footer>
<button id="sfdemoPreSubmit" class="btn-u"><i class="fa fa-paper-plane fa-fw"></i> Get Your Free Demo</button>
</footer>
</form>
</div>
</div>
Thank you so much! Please let me know if you have any questions.

I want to create a column of div`s depends to the number of I input in input type=number

I want to input a number here (ex.5).
<div class="container">
<label style="font-family:agency fb;">How many tracks?</label>
<input class="form-control" type="num" name="tracks" placeholder="How many tracks?" style="width:15%;font-family:agency fb;font-size:18px;" required>
<input type="button" class="btn btn-info" value="Go" name="go" style="width:15%;font-family:agency fb;">
</div>
<br>
Then this division will be 5x.
<div class="container form-inline" name="row">
<label style="font-family:agency fb;">Track Number</label>
<input class="form-control" type="number" name="tnumber[]" placeholder="Track Number" style="width:5%;font-family:agency fb;font-size:18px;">
<label style="font-family:agency fb;">Track Name</label>
<input class="form-control" type="text" name="tname[]" placeholder="Track Name" style="width:20%;font-family:agency fb;font-size:18px;">
<label style="font-family:agency fb;">Track Playtime</label>
<input class="form-control" type="text" name="tplaytime[]" placeholder="Track Playtime" style="width:10%;font-family:agency fb;font-size:18px;">
<label style="font-family:agency fb;">Choose Song</label>
<input type="file" name="song[]" class="form-control" style="width:20%;" accept="audio/*">
</div>

AngulaJS input fields not loose focus when clicked

I am trying to create a simple angularjs form where i want to have nested object as ng-model
$scope.project = {
name:"Some Name",
location:{line1:"" , line2:"", city:"", zipcode:""}
}
http://plnkr.co/edit/RfN7qZBX3HlOtGhFOdFX?p=preview
now the problem is when i click on line2 , city,state etc focus goes back to line1
tried changing HTML and several other stuff but don't know what to do..
Tried removing bootstrap as well.
The issue is that you are misusing the <label> tag. Instead of this:
<label class="form-group">
Client Location
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</label>
Try this:
<div class="form-group">
<label>Client Location</label>
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</div>
The first label should be changed as well. Instead of this:
<label class="form-group">Name
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</label>
Try this:
<div class="form-group">
<label>Name</label>
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</div>
Or this:
<div class="form-group">
<label>
Name
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</label>
</div>

One label with three inputs with jQuery Mobile

I'd like to know if it's possible to make a form line with jQuerymobile like this prototype bellow.
I tried to use a layout grid with four columns, like the one bellow, but the Birthday label is bigger than the second column and increases it size.
<div class="ui-block-a">
<label for="idnumber" style="width:50%">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b">
<label for="month" style="width:10%">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:10%">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:30%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>
After some minutes I posted the question I realized what was the problem. By mistake I put the style="width:XX%" inside the labels on the first two fields, instead of putting them inside the block div.
The correct code is the following:
<div class="ui-block-a" style="width:40%; margin-right: 10px;">
<label for="idnumber">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b" style="width:15%; margin-right: 5px;">
<label for="month">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:15%; margin-right: 5px;">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:20%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>
And the correct result is the following:
Try this:
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a">
<label for="idnumber">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text" style="width:90%">
</div>
<div class="ui-block-b ui-grid-b">
<div class="ui-block-a" style="width:20%">
<label for="month">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text" style="width:90%">
</div>
<div class="ui-block-b" style="width:20%">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text" style="width:90%">
</div>
<div class="ui-block-c" style="width:60%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>
</div>
</div>
I think this is more simple. I'm using 2 grid and 3 grid into the second.

Categories

Resources