<label>Name <input type="text" name="text_2"/></label>
<label>Phone <input type="text" name="text_3"/></label>
<label>Age <input type="text" name="text_4"/></label>
<label>Address <input type="text" name="text_5"/></label>
I want to convert above html into format given below. I tried with jQuery .wrap() but no success. Any help or pointers will be quite helpful.
<div class="row">
<div class="form-group">
<label>Name:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
<div class="form-group">
<label>Phone:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
</div>
<div class="row">
<div class="form-group">
<label>Age:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
<div class="form-group">
<label>Address:<i class="mandate">*</i></label>
<input type="text" class="input-lg">
</div>
</div>
You can try this:
$(document).ready(function(){
$('label').each(function(){
var $this=$(this);
$this.wrap( "<div class='row'><div class='form-group'></div></div>");
var $child=$this.find('input[type="text"]');
$child.remove();
$this.parent().append($child);
$this.append('<i class="mandate">*</i>');
});
});
Demo
you input tag is not closed:
<label>Name <input type="text" name="text_2"/></label>
<label>Phone <input type="text" name="text_3"/></label>
<label>Age <input type="text" name="text_4"/></label>
<label>Address <input type="text" name="text_5"/></label>
afterwards please try (with the assumption of no other label exist on page):
$("label").wrap("<div class=\"row\"><div class=\"form-group\"></div></div>");
Related
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.
This will most likely need to involve javascript, which I know almost nothing about so please bear with me.
I would like to have a regular form, say styled with bootstrap. But I don't want to display the all the fields at once when the page is loaded. Instead I would like to display the first field and continue to display the following fields as the previous fields are focused or have content in them.
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
In this example only "Name" would show up, when the page loads, then when it is focused then the "Email" field would show up.
Any ideas would be great, thanks!
Just hide all elements in the form except for the first one, listen for changes on the form and display the next element relating to the last changed element (the event.target).
Example (which is definitley improvable):
$(".form-group:not(:first-child)").hide();
$("form").on("change keypress paste", function (event) {
$(event.target).parent().next().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
You could use JQuery to remove a hidden class on input focus.
Run the code snippet or check out the CodePen Demo:
$(document).ready(function() {
$("input").focus(function() {
$(this).parent(".form-group").next().removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group hidden">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group hidden">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group hidden">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});
All the examples that popped up on this forum do not relate to my current issue,
Currently, we have three rows of textboxes with a possibility of adding more rows later.
Below is sample code:
<body>
<div class="bs-example">
<form class="form-inline" role="form">
<div class="form-group">
<label for="employeename">Employee Name</label><br>
<input type="email" style="width:250px;" class="form-control" name="employeename" id="employeename" placeholder="Employee name...">
</div>
<div class="form-group">
<label for="ttitle">Title</label><br>
<input type="password" style="width:250px;" class="form-control" name="ttitle" id="ttitle" placeholder="Title...">
</div>
<div class="form-group">
<label for="inputPassword">Password</label><br>
<input type="password" style="width:250px;" class="form-control" id="inputPassword" placeholder="Password">
</div><br><br><br>
<div class="form-group">
<label for="inputName">Name</label><br>
<input type="text" style="width:250px;" class="form-control" id="inputName" placeholder="Name">
</div>
<div class="form-group">
<label for="inputAddress">Address</label><br>
<input type="text" style="width:250px;" class="form-control" id="inputAddress" placeholder="Address">
</div>
<div class="form-group">
<label for="inputIncome">Income</label><br>
<input type="text" style="width:250px;" class="form-control" id="inputIncome" placeholder="Income">
</div><br><br><br>
<div class="form-group">
<label class="sr-only" for="inputSpouse">Spouse</label>
<input type="text" style="width:250px;" class="form-control" id="inputSpouse" placeholder="Spouse">
</div>
<div class="form-group">
<label for="inputPassword">Affiliation</label>
<input type="text" style="width:250px;" class="form-control" id="inputAfil" placeholder="Affilatio n>
</div>
<div class="form-group">
<label for="inputDOB">DOB</label>
<input type="text" style="width:250px;" class="form-control" id="inputDOB" placeholder="Date of birth">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
<br>
</div>
</body>
Is it possible to have create additional textboxes dynamically row by row?
In other words, per the code above, there are three rows, users may have the need to create additional textboxes for one or more rows but not all the rows.
So, anyone has any ideas how to create additional rows dynamically row by row instead of adding textboxes for all rows at once?
I hope one of you experts can help.
Simplest way can be this. You can created dynamic tr and append it to tbody of a table
$(":button").click(function(){
var str = "<tr>";
str+="<td><input type=textbox class=txtFirst /></td>";
str+="<td><input type=textbox class=txtSecond /></td>";
str += "</tr>";
$("table tbody").append(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=button value=Add />
<table>
<tbody>
</tbody>
</table>
You're not being specific about what rows you need to create. In any case, you could use something like ...
https://jsfiddle.net/2nayvcmx/
HTML
<div>
Employee name
</div>
<div>
<input type="text" id="employee_name" value="" name="employee_name" />
</div>
<div>
Employee title
</div>
<div>
<button id="add_employee_title">
Add title
</button>
</div>
<div class="add_employee_title">
</div>
<hr/>
<input type="submit" value="Submit" />
Javascript
$(document).ready(function() {
$('button#add_employee_title').click(function() {
$(this).hide();
$('div.add_employee_title').html('<input type="text" name="employee_title"/>');
});
});
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>