One label with three inputs with jQuery Mobile - javascript

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.

Related

Why jQuery steps not changing the section

I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.

dynamic form using javascript

I am trying to create a form similar to the image attached below, how "add the question" can be done using javascript? and I am trying to use express(nodejs framework).
Now if user clicks add question option then a similar form could be attached multiple times.
<h1>Create</h1>
<div class="main">
<form action="/handle" method="post">
<div class="option">
<label for="topic">Topic</label>
<input type="text" id="topic" name="topicname" required>
</div>
<div class="option">
<label for="question">Enter your question:</label>
<input type="text" id="question" name="questioninput" required>
</div>
<div class="option">
<label for="option1">option 1:</label>
<input type="text" id="option1" name="option1input" required>
</div>
<div class="option">
<label for="option2">option 2:</label>
<input type="text" id="option2" name="option2input" required>
</div>
<div class="option">
<label for="option3">option 3:</label>
<input type="text" id="option3" name="option3input" required>
</div>
<div class="option">
<label for="option4">option 4:</label>
<input type="text" id="option4" name="option4input" required>
</div>
<div>
<button type="submit">Send your response</button>
</div>
</div>
</form>
image representation:

Show div on checkbox tick

I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:
https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa
html:
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-
top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off"
name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"
name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown"
style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block"
name="register">Register</button>
</form>
js:
jQuery("#blogger").click(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
Post the js code after document.ready and don't forget to add jquery link
Updated fiddle
/*!
* can yo u solve my issue? :) I don't understand why it won't wor
*/
$(document).ready(function(){
jQuery("#blogger").change(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off" name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block" name="register">Register</button>
</form>
looking at your example it seems that your were missing the jquery library as well as some html changes
you have user .addblog class name in two divs.so when you click on check box both divs get show and hide.so remove any one class or use different class name for new div to be inserted..

JavaScript mandatory based on selection Selection List

I would like to make a java script what will make comment field (textarea) as mandatory when you will select a selection list , for now I just make a required icon next to comment code below and stuck on it code bellow.
Thank in advice for all help
Code what I Wrote :
<select id="ddlViewBy">
<option value="1">AJS.$("#comment-popup").parent().children('label').append('<span class="aui-icon icon-required"></span>');</option>
Source Code of my Website :
<form action="/jira/rest/tempo-rest/1.0/worklogs/{issueKey}" class="aui tempo-form" data-form-type="" name="tempo-panel-form-popup" method="post">
<div class="form-body" style="max-height: 393px;">
<input type="hidden" name="id" value="">
<input type="hidden" name="type" value="issue">
<input type="hidden" name="use-ISO8061-week-numbers" value="false">
<input type="hidden" name="ansidate" value="">
<input type="hidden" name="ansienddate" value="">
<input type="hidden" name="selected-panel" value="">
<input type="hidden" name="analytics-origin-page" value="">
<input type="hidden" name="analytics-origin-view" value="">
<input type="hidden" name="analytics-origin-action" value="">
<input type="hidden" name="startTimeEnabled" value="false">
<input type="hidden" name="tracker" value="false">
<input type="hidden" name="preSelectedIssue" class="tempoIssueKey" value="AB-5048">
<input type="hidden" name="planning" value="false">
<div class="field-group">
<label for="user-picker-popup">User</label>
<div class="tempo-pickers">
<div class="aui-ss medium aui-ss-has-entity-icon" id="user-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="user-picker-popup-field">
<div class="aui-list" id="user-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span><img class="aui-ss-entity-icon" alt="" src="google.pl"> </div>
<select id="user-picker-popup" class="plan-user-picker dialog-user-picker aui-ss-select" name="user" data-container-class="medium" data-counter="popup" data-input-text="Jon Smith" multiple="multiple" style="display: none;">
<optgroup id="tempo-user-suggested-popup" data-weight="0" label="">
<option selected="selected" style="background-image:url(/jira/secure/useravatar?size=small&ownerId=jsmith&avatarId=12927)" value="jsmith">Jon Smith</option>
</optgroup>
</select>
</div>
</div>
<div class="field-group tempo-issue-container">
<label for="tempo-issue-picker-popup">Issue </label>
<div class="aui-ss" id="tempo-issue-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="tempo-issue-picker-popup-field">
<div class="aui-list" id="tempo-issue-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span>
</div>
<select id="tempo-issue-picker-popup" class="tempo-issue-picker tempo-picker-all-issues tempo-issue-picker-logwork aui-ss-select" name="issue" multiple="multiple" style="display: none;">
<option selected="selected" value="AB-5048">AB-5048 - Holiday - Jon Smith 2016-06-13-2016-06-13</option>
</select>
</div>
<div class="tempo-datepicker">
<div class="field-group tempo-show-period">
<label for="showPeriod-popup">Period</label>
<div class="checkbox">
<input id="showPeriod-popup" name="showperiod" type="checkbox" value="showperiod" class="showperiod tempo-show-period"> </div>
</div>
<div class="field-group datepicker ">
<label for="datefield-popup">Date</label>
<input type="text" id="datefield-popup" name="date" size="7" value="2016-06-09" class="text medium-field"> <span id="datefield-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
<div class="field-group enddate datepicker " style="display: none;">
<label for="enddate-popup">End date</label>
<input type="text" id="enddate-popup" name="enddate" size="7" value="2016-06-09" class="text medium-field"> <span id="enddate-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
</div>
<div class="tempo-timepicker resetable">
<div class="field-group tempo-worked-hours">
<label class="timepicker-label" tmp="Work per day" for="time-popup">Worked </label>
<input autocomplete="off" type="text" id="time-popup" name="time" size="3" value="" class="tempo-time text short-field"> </div>
<div class="remaining-and-billed-hours-container">
<div class="field-group tempo-logged-work">
<label for="totalSpent-popup">Logged</label> <span class="totalSpent" id="totalSpent-popup">8h</span> </div>
<div class="field-group tempo-remaining-estimate" style="clear: left;">
<label for="remainingEstimate-popup">Remaining estimate </label>
<input type="hidden" id="remainingEstimateHidden-popup" size="3" maxlength="6" value="">
<input type="text" id="remainingEstimate-popup" name="remainingEstimate" size="3" maxlength="6" value="" class="validate remaining resetable text short-field"> </div>
<div class="field-group tempo-original-estimate">
<label for="originalEstimate-popup">Original estimate</label> <span class="originalEstimate" id="originalEstimate-popup"></span> </div>
</div>
</div>
<div class="field-group resetable">
<label for="comment-popup">Description</label>
<textarea id="comment-popup" name="comment" class="tempo-comment textarea resetable"></textarea>
</div>
<ul id="errors-popup" class="error-list"> </ul>
<p style="width: 97%; margin: 0 0 10px 0;" id="tempo-logwork-issue-hint" class="hint-container overflow-ellipsis" title="Pressing w also opens this dialog box"> <a class="shortcut-tip-trigger" title="Click to view all shortcuts" href="#" tabindex="-1">Shortcut tip:</a> Pressing <strong>w</strong> also opens this dialog box </p>
</div>
<div class="buttons-container form-footer"> <span id="logwork-spinner" class="aui-icon aui-icon-wait" style="display:none"></span>
<div class="buttons"><span class="icon throbber"></span>
<input type="checkbox" id="issue-add-another" class="tempo-add-another-input" value="Another">
<label for="issue-add-another" class="tempo-add-another-label"> Log another </label>
<input type="submit" id="issue-add-button" class="button button-panel-button" accesskey="s" value="Log Work"> <a id="tempo-logwork-issue-cancel" class="cancel" href="/jira/browse/AB-5048?" accesskey="'">Cancel</a> </div>
</div>
Looks like you working inside the atlassian product suite.
So You make a html field mandatory you can add the required attribute
which is workable in all modern browsers except safari I thing please check this
the js(jquery) to add a attribute would be
$('#comment-popup').attr('required', 'required');
if it is a AUI-select or AUI input read the docs there
https://docs.atlassian.com/aui/latest/docs/single-select.html on a select for instance there is a non-empty attribute

Append HTML FORM in JQuery or 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');

Categories

Resources