Hello guys i'm trying to figure out how can I add more textboxes by clicking an add button.
I'm using codeigniter framework so here is my view:
<form action="save_new_inventorytype" method="POST">
<fieldset>
<legend>Add New Inventory Type</legend>
<label id="lbl_tablename" name="lbl_tablename">Inventory Type Name:</label>
<input type="text" id="txt_tablename" name="txt_tablename" size="30" /><br>
<label id="lbl_columns" name="lbl_columns" style="position: absolute; top: 276px;">Column Name:</label>
<label style="position: absolute; top: 276px; left: 352px;">Type:</label>
<label style="position: absolute; top: 276px; left: 565px;">Length/Values:</label><br>
<br>
<input type="text" id="txt_columnname" name="txt_columnname" size="30"/>
<select id="cbo_columntype" name="cbo_columntype" style="width: 200px;">
<option>INT</option>
<option>VARCHAR</option>
<option>TEXT</option>
<option>DATE</option>
</select>
<input type="text" id="txt_columnlength" name="txt_columnlength" size="30"/>
<button type="button" class="btn_plusvalue btn-success btn-sm"><span class="glyphicon glyphicon-plus"></span></button><br>
<br>
<button type="button" class="btn_addtable btn-success btn-sm" id="btn_addtable" name="btn_addtable">Save Inventory Type</button>
<button type="button" class="btn_canceltable btn-danger btn-sm">Cancel</button>
<button type="button" class="btn_cleartable btn-warning btn-sm">Clear</button>
</fieldset>
</form>
Here is a print screen of my view:
I want to have those three(textbox,combobox,textbox) to duplicate when I click on that plus button.
Can anyone help me on this one? Please? I know that I have to use loop but I don't know how.
I have jquery solution for adding textbox on click of button. try something like this:
Suppose, you have form and button like:
<form>
<input type="button" value="Add textbox" name="add" id="add"/>
</form>
then use append method in script tags:
var r;
$(function(){
$('#add').on('click',function(){
for(var i=0;i<10;i++){
r= $('<input type="text" value="textbox" id="i"/>');
}
$("form").append(r);
});
});
here, <input type="text" value="textbox"/> is taken as variable and then appended to the form.
DEMO FIDDLE HERE.
Hi, Here is exactly that you wanted.
Related
I did some research and I wasn't able to find anything on it. I have an input where the person can input a location, but I also want them to be able to add another, alternate location. I basically need a button to open a form. Here is the code for the form:
<div class="form-group">
<label for="exampleInputEmail1">Location: </label>
<input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City"
width: 50%;>
</div>
Here is the code for the button:
<center>
<button id="locationAlternate" type="submit" class="btn btn-primary">
Alternate Location
</button>
</center>
Is this what are you looking for?
$('#locationAlternate').on('click',function() {
$('#location').append('<div class="form-group" id="altloc"><label for="">Alternate Location: </label> <input name = "AltcityForm" class="form-control" placeholder="Enter Alternate Location" width: 50%;></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="location">
<label for="exampleInputEmail1">Location: </label>
<input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City" width: 50%;>
</div>
<button id="locationAlternate" type="submit" class="btn btn-primary">Alternate Location</button>
I have two forms in my page.
<form name="form1" action="" method="POST" autocomplete="off">
<h3><span>Number : </span>
<span class="min-width"><select class="form-control" id="num" maxlength="255" name="num_selector" onchange="this.form.submit();" autofocus>
<option value="0001" selected="selected">0001</option>
</select></span>
</h3>
</form>
<form action="/enter" method="POST" name="form2">
<input class="btn btn-default btn-orange has-spinner" type="submit" value="enter" name="enter">
</form>
When i click the enter button on the form2, it end up posting to the same URL(which is what defined in form1). form1 is getting posted instead form2.
You can submit them using the java-script separatly.
document.getElementById("myForm").submit();
<input type="button" name ="enter" value="enter" OnClick="postData('FORMID')" />
function postData(formId){
document.getElementById(formId).submit();
}
Hi guys so currently i have a simple button in bootstrap which looks like :
class="btn btn-success btn-block btnrec"
I then was trying to make my form buttons look like that, however its not working correctly , anyone know why?
My attempt so far:
<form action="" method="post" enctype="multipart/form-data">
<input class="btn btn-success btn-block btnrec" type="file" name="file">
<input class="btn btn-success btn-block btnrec"type="submit" name="submit">
</form>
As you can see, the submit was works fine, looks like the bootstrap button but the one above, which is the choose file "File not found" etc does not, this for me uploading a pic to the db, but just want to make the buttons look nice :0
Thanks
Tried this:
<form action="" method="post" enctype="multipart/form-data">
<a class='btn btn-primary' href='javascript:;'>
Choose File...
<input type="file" name ="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'>
</a>
<input class="btn btn-success btn-block btnrec"type="submit" name="submit">
</form>
Bootstrap distinguishes inputs based on their type. That way it knows to style a [type='text'] differently from a [type='submit']. In this case, Bootstrap doesn't have styling for input[type='file'] built in to the library.
This answer has roughly equivalent styling for that element that you can add yourself.
Following this links examples https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3
<!-- support IE8 -->
<form action="" method="post" enctype="multipart/form-data">
<span class="btn btn-success btn-block btnrec btn-file">
Upload <input type="file" name="file">
</span>
<input class="btn btn-success btn-block btnrec" type="submit" name="submit">
</form>
<!-- don't care about IE8 -->
<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-success btn-block btnrec btn-file">
Upload <input style="display: none;" type="file" name="file">
</label>
<input class="btn btn-success btn-block btnrec" type="submit" name="submit">
</form>
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>
I am using AngularJs and have inputs with predefined value from ng-repeat. I want resend those data value via ng-click function to treat data.
The problem the data is not submitted
<label>Price</label>
<input type="text" class="form-group form-control" ng-value=s.prix required="required" ng-model="prix" >
</div>
<div class="modal-footer">
<button type="submit" id='submit' ng-click="edit()" class="btn btn-primary" data-dismiss="modal">Save</button>
s.prix is a value of column in the table prix (ng-repeat="s in produit") if you know what i mean.
Use ng-repeat instead as model
Like this
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
Then pass object in edit.
Try like this
ng-click="edit(s)"
JS
$scope.edit=function(s){
console.log(s);
}
html:
<body ng-controller="myCtrl">
<label>Price</label>
<div ng-repeat="s in produit">
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
<button type="submit" id='submit' ng-click="edit(s)" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</body>
controller:
myApp.controller('produitCtrl', ['$scope',function($scope){
$scope.produit = [{prix:'hello'}];
$scope.edit=function(s){
console.log(s);
}
}]);
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In