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"/>');
});
});
Related
I'm pretty new to jquery and javascript. Right now I'm building a form. The user should be able to ad a new person via button one. How am I able to do that?
$(document).ready(function() {
$("#button1").click(function() {
$(".container").append(".wrapper"); // How to insert the whole wrapper?
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button id="button1">Ad one person </button>
<div class="wrapper" id="person1">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Surename" required>
<input type="date" class="input" placeholder="Birthday" required onfocus="(this.type='date')" onblur="(this.type='Birthday')">
</div>
</div>
you need to add the entire html like this $(".container").append($(".wrapper").html());
$(document).ready(function(){
$("#button1").click(function(){
$(".container").append($(".wrapper").html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button id="button1">Ad one person </button>
<div class="wrapper" id="person1">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Surename" required>
<input type="date" class="input" placeholder="Birthday" required onfocus="(this.type='date')" onblur="(this.type='Birthday')" >
</div>
</div>
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');
}
});
I am looking to put a character limit on an input box on a form. I ideally want 140 characters but can't work out how to do it.
I'm using Angular on my front end.
My code for the input section i need a text limit for new.html
<div class="form-group">
<label>Description 140 characters</label>
<input type="text" ng-model="postsNew.post.description" class="form-control" </textarea>
I tried to use another textarea way but it deleted half of my form.
Here is my full code for this section
<section class="container">
<h1>What happened?</h1>
<form ng-submit="postsNew.submit()">
<div class="form-group">
<label>Tube Line</label>
<select ng-model="postsNew.post.line" class="form-control">
<option ng-repeat="line in postsNew.linesList" value="{{line}}">
{{line}}
</option>
</select>
</div>
**
<div class="form-group">
<label>Description 140 characters</label>
<input type="text" ng-model="postsNew.post.description"
class="form-control" </textarea>
</div>
**
<div class="form-group">
<label>Date</label><br>
<input id="enddatefield" type="date" ng-model="postsNew.post.date"
class="form-control">
</div>
<div class="form-group">
<label>Time</label><br>
<input type="time" name="name" ng-model="postsNew.post.time"
class="form-control">
</div>
<input type="submit" value="Fingers crossed..." class="btn btn-primary
pull-right">
</form>
</section>
With maxlength="int"
EXAMPLE:
<input type="text" name="text" maxlength="10">
Working DEMO.
You can use maxlength
<input type="text" name="max_length" maxlength="20">
<input type="text" ng-model="postsNew.post.description" class="form-control" maxlength="140" />
you can use this maxlength="140" attribute in your input field.
I'm working on creating a "configurator".
A user will enter the number of configurations they want which will hold 3 input fields in each set.
If the user wants 5 configurations and clicks create. The "configurator" will create 5 different sets of input fields with each set having 3 input fields.
However, i would like to display each configuration one at a time.
After the user enters the number of configurations they desired. It should show the first set then ask if they would like to move onto the next and so on.
Please see my current code:
http://jsfiddle.net/jdarville/wsyzd1bu/
<div class='row' id="inputcontainer">
<div class="form-group clearfix t" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder=""/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="more" name="more">Create More</button>
<script>
$("#more").click(".add",function(){
$("#inputcontainer").append("<br />");
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
$("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]' placeholder='' /><br />");
})</button>
</script>
The current code only creates the 3 input fields with a button click but as i described above, i would like the user to first enter the number of desired configurations then display each set one at a time.
You want to wrap that all in a function and inside that function you want to (for sanity and result checkings sake) make sure each element is unique. Assuming you know how to do that and just need some help on the logic on turning this into a loop, here is your code modified to get you started. Scroll to the bottom and click Run code snippet. Have fun!
function createMore(){
var num = $('#num').val();
for( var i = 0; i < num; i++ ) {
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
$("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]' placeholder='e.g. example#url.com' /><br />");
}
}
$("#more").click(".add",createMore);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
<div class="form-group clearfix t" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
<hr>
# <input type="text" id="num" name="more" value='2'><br>
<button type="button" id="more" name="more">Create More</button>
<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>");