i need add fields dynamically in my view form. i have a script function for that.. but i don't know how to include in that script into codeIgniter.
my controller -
class uploadfile extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper('url');}
//index function
function index()
{
//load file upload form
$this->load->view('upload_file_view');}}
my view -
<script type="text/javascript" src="<?php echo base_url("assets/js/myscript.js");?>" ></script>
</head>
<body>
<label for="doc" class=" control-label">SUPPORT DOCUMENT</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<input id="doc" type="text" class="form-control" name="attachment[]">
</div> </div>
<button type="button" class="add-field">Add field</button> </div>
and my script path - C:\xampp\htdocs\samplecod\assets\js
i found a easy way to add multiple fields in view page
`<div class="form-group">
<div class="row colbox">
<div class="col-sm-offset-2 col-lg-8 col-sm-8 text-left">Description</div>
<div class="field_wrapper">
<input type="textarea" name="descrip[]" value="" size="35px" /><input type="text" name="voucher_no[]" value="" size="7px"/><input type="text" name="price[]" value=""size="7px"/>
<img src="<?php echo base_url('images/add-icon.png'); ?>"/>
</div></div></div>`
for this form this is the script:
<script type="text/javascript">
$(document).ready(function(){
var maxField = 20; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="descrip[]" value="" size="35px"/><input type="text" name="voucher_no[]" value="" size="7px"/><input type="text" name="price[]" value="" size="7px"/><img src="<?php echo base_url('images/remove-icon.png'); ?>"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
Related
I need a code generator in jQuery that when clicking on the button it appears in the input text a number of 13 digits, start in number 7.
This is the code in my view:
<div class="form-group <?php echo !empty(form_error('barcode')) ? 'has-error':'';?>">
<label for="barcode">Barcode:</label>
<div class="input-group barcode">
<div class="input-group-addon">
<button class="fa fa-barcode" title="Generate Random Barcode"></button>
</div>
<input type="text" class="form-control" id="barcode" name="barcode" required value="<?php echo set_value('barcode');?>">
</div>
<?php echo form_error("barcode","<span class='help-block'>","</span>");?>
</div>
This is the input text + button:
The generated number like this:
You can do this :
$(document).on('click', '#barcode_btn', function(e){
e.preventDefault();
var val1 = Math.floor(100000 + Math.random() * 999999);
var val2 = Math.floor(10000 + Math.random() * 99999);
$('[name="barcode"]').val('7 '+val1+' '+val2);
})
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" name="barcode" value="">
<button id="barcode_btn">Generate Barcode</button>
</form>
</body>
</html>
Disabling jquery submit button until all the form inputs is filled.
Am working with Jquery and I have been trying to implement disabling form submission button until the whole form inputs are filled. i have tried most solution found here but it does not solve the issue. Thanks
$('.postbtn_video').click(function() {
var element = $(this);
var ID = element.attr('id');
var msg = $('#status').val();
var title = $('#title').val();
var video = $('#video').val();
var stat = $('#stat').val();
if (title == "") {
alert('Please Enter video Post Title?');
} else if (msg == "") {
alert('Please Enter Video Post Description');
} else if (video == "") {
alert('Enter Youtube Video Link');
} else if (stat == "") {
alert('Select Status');
} else {
var postData = "post=" + msg + "&title=" + title + "&video=" + video + "&stat=" + stat;
$("#loader").show();
$("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "posts.php",
data: postData,
cache: false,
success: function(html) {
$("ul#updatepost").prepend(html);
$("ul#updatepost li:first").slideDown("slow");
$('#status').val('');
$('#loader').hide();
}
});
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="statusform">
<label>Video Post Title </label>
<input type="text" name="title" id="title" class="form-control" placeholder="Enter Post Title">
<p></p>
<label>Video Post Description</label>
<textarea style="width:100%" name="status" class="status form-control" id="status" placeholder="Share what you like " title="What's on your mind?">
</textarea>
<label>Youtube Video Link</label>
<input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link">
<label>status</label>
<select style="width:100%" name="stat" class="form-control" id="stat">
<option value="ok">ok</option>
</select>
<p></p>
<input name="post" type="submit" value="Share Video Updates" class="postbtn_video" style="background:black;color:white; height:30px;float:left" />
</form>
Firstly apply disabled="disabled" to the button:
<input name="post" type="submit" value="Share Video Updates" class="postbtn_video" disabled="disabled" />
Secondly, you need a function which will check each field is empty or not!
Check below code:
$(document).ready(function(){
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if(!empty){ // this will only check next inputs if empty is false, but once its set to true no further check will be made
if ($(this).val() == '') {
empty = true;
}
}
});
if (empty) {
$('.postbtn_video').attr('disabled', 'disabled');
} else {
$('.postbtn_video').removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="statusform">
<label>Video Post Title </label>
<input type="text" name="title" id="title" class="form-control" placeholder="Enter Post Title">
<p></p>
<label>Video Post Description</label>
<textarea style="width:100%" name="status" class="status form-control" id="status" placeholder="Share what you like " title="What's on your mind?"></textarea>
<label>Youtube Video Link</label>
<input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link">
<label>status</label>
<select style="width:100%" name="stat" class="form-control" id="stat">
<option value="ok">ok</option>
</select>
<p></p>
<input name="post" type="submit" value="Share Video Updates" class="postbtn_video" disabled="disabled" />
</form>
Maybe this will help. you can manipulated the Form Disabled attribute:
var checkboxes = document.getElementsByTagName('input');
//check all check all input elements to see if they are check-boxes
for (var i = 0; i < checkboxes.length; i++) {
//If the input is a check-box run script else skip over
if (checkboxes[i].type == 'checkbox') {
//If it is a check-box ensure the box is unchecked
checkboxes[i].checked = false;
}
}
$(document).ready(function()
{
//define Element by ID and create variable
var $checked = $('#field_human');
//define default state for attribute before handler function trigger
$("#submit").attr("disabled", !$checked.checked)
//On element handler trigger define function to execute each time handler is triggered
$checked.click(function()
{
//State to define instance on method
if ($checked.prop('checked'))
{
//return true
//remove element attribute state 'disabled'
$('#submit').removeAttr('disabled');
}
if($('#contactForm input').val() != '')
{
$('#submit').removeAttr('disabled');
}
else {
//return false
//set element attribute state 'disabled'
$("#submit").attr("disabled", !$checked.checked);
}
//return to ready-state to wait for handler to trigger again
return;
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<form class="form-horizontal" role="form" method="post" action="" id="contactForm" name="contactForm">
<div class="form-group">
<label for="inputblk" class="col-sm-3 control-label">Input Block</label>
<div class="col-sm-9">
<input name="inputblk" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-3 control-label">Are You <strong><u>Human</u>?</strong></label>
<div class="col-sm-9">
<input id="field_human" class="field_human" type="checkbox" name="human" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button id="submit" name="submit" type="submit" class="btn btn-dark btn-block btn-lg">Send</button>
</div>
</div>
</form>
1st:
inputs that you think are required, make it required! like below:
<input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link" required >
2nd:
Make your selection based on this attribute and check if values of these inputs are not empty. Disable the submit button if so.
3rd:
Make event listener to all inputs that have required attribute to listen user inputs.
something like this:
var l = $("[required='']");
function enableSubmit(l) {
if (l.length == 0) {
$("[name=post]").removeAttr('disabled');
} else {
for (var m = 0; m < l.length; m++) {
if (l[m].value.length == 0) {
$("[name=post]").attr("disabled", "disabled");
return;
}
}
$("[name=post]").removeAttr('disabled');
}
}
for (var m = 0; m < l.length; m++) {
l[m].addEventListener('input', function () {
enableSubmit(l);
});
}
First of all you need to add a disabled property to you input button by default like:
<input disabled name="post" type="submit" value="Share Video Updates" class="postbtn_video" style="background:black;color:white; height:30px;float:left" />
then in your jquery you need fire up a validate function that will check for all the inputs and if they are not empty you can simply remove the disabled property from your input button like:
$(document).on('keyup', "input:not([type='submit']", function () {
//set it to true by default
var valid = true;
//getting all the inputs except input submit
var inputTextboxes = $("input:not([type='submit'])");
inputTextboxes.each(function(e) {
//it enters this only if the valid is true for any one value, if valid is set to false at any point it won't check it for next inputs - works for first time
if (valid != false){
if ($(this).val()) {
valid = true;
}else{
valid = false;
}
}
else{
break; //breaks the loop
}
});
if (valid) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
Hope this helps
I have two textboxes and one button,
I want to add one new textfield, that should show card name from textbox1 and Link URL append from textbox2 when I click on button
//AddnNewCardNavigator
var counter=2;
var nmecardtxt= document.getElementById("textbox1").value;
var linkurltxt= document.getElementById("textbox2").value;
$("#addbutton").click(function(){
if(nmecardtxt ==""||nmecardtxt ==0||nmecardtxt ==null
&& linkurltxt ==""||linkurltxt ==""|| linkurltxt ==0||linkurltxt ==null){
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
var NewCarddiv = $(document.createElement('div')).attr("id",'cardlink'+counter);
NewCarddiv.after().html()
})
</script>
<!-- text boxes-->
<div class="row">
<div class="col-md-12">
<div id="textboxesgroup">
<div id="textboxdiv1">
<label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url: </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
Your variables nmecardtxt and linkurltxt must be created inside the click function,
because it's empty at the loading of the page.
I also took the liberty to use jQuery for that variables, as you're already using it, and tried to enhance some other things:
(See comments in my code for details)
//AddnNewCardNavigator
var counter = 2;
// On click function
$("#addbutton").click(function() {
// Here it's better
var nmecardtxt = $("#textbox1").val();
var linkurltxt = $("#textbox2").val();
// Modified you test here
if (!nmecardtxt || !linkurltxt) {
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
// Modified creation of the card
var link = $(document.createElement('a')).attr("href", linkurltxt).html(linkurltxt);
var NewCarddiv = $(document.createElement('div')).attr("id", 'cardlink' + counter).html(nmecardtxt + ": ").append(link);
$('#cards').append(NewCarddiv);
//NewCarddiv.after().html(); // Was that line an attempt of the above ?
});
body {
background: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- text boxes-->
<div class="row">
<div class="col-md-12">
<div id="textboxesgroup">
<div id="textboxdiv1">
<label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url: </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
<!-- Added the below -->
<div id="cards">
</div>
<button id="addbutton">Add…</button>
Hope it helps.
Here's a simplified version of what you're trying to accomplish:
function addNewCard() {
var name = $('#name').val();
var url = $('#url').val();
var count = $('#cards > .card').length;
if (!name || !url) {
alert('Missing name and/or URL.');
}
var card = $('<div class="card"></div>').html("Name: " + name + "<br>URL: " + url);
$("#cards").append(card);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="url">URL:</label>
<input type="text" id="url" name="url">
<input type="submit" value="Add Card" onclick="addNewCard();">
<div id="cards">
</div>
I want to click on my button and insert every click new input and when up to 10 just stop . I have done with one input lets check my code :
HTML code
<div class="form-group ">
<label for="email2" class="col-sm-3 control-label">Occupants Email Address :</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email2" placeholder="Email">
</div>
<div class="col-sm-2">
<span class="addMore">ADD</span>
</div>
</div>
<div class="form-group addmore2">
<label for="emailOccup2" class="col-sm-3 control-label">Occupants Email Address 2 :</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="emailOccup2" placeholder="Email">
</div>
<div class="col-sm-2 removeEmail">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> remove
</div>
CSS
.addmore2 {
display: none;
}
jQuery
$('.addMore').click(function() {
$('.addmore2').slideDown();
})
$('.removeEmail').click(function() {
$('.addmore2').slideUp();
});
I know how to insert just one , somebody help what function I need to use to make it uo to 10.
Thanks!
Check out the implementation below, which was heavily adapted from Add/Remove Input Fields Dynamically with jQuery.
Your goal here is to keep track of the number of fields that have been added. Once the number of fields (represented by x) exceeds ten, the append method will no longer function.
On each click, we are incrementing the number of fields by one.
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append(
'<div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div>Remove</div>'
); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Here's the corresponding HTML
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div>
</div>
Here's a working jsFiddle: jsFiddle
here is a basic example
var iteration = 0,
addEmail = document.querySelector("#addEmail");
addEmail.addEventListener("click", function(){
if(iteration < 10){
var input =document.createElement("input");
input.type = "email";
input.placeholder = "Email"
document.body.appendChild(input);
iteration++
}
},false);
<input id=addEmail type=button value="add Email input" />
Using jquery you could do something like
var iteration = 0;
$("#addEmail").click(function() {
if (iteration < 10) {
var input = document.createElement("input");
input.type = "email";
input.placeholder = "Email"
document.body.appendChild(input);
iteration++
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=addEmail type=button value="add Email input" />
I have to add multiple date field using add more image, but when i click "Date field" calender appears.
But when i add more date fields (Date 2,Date3...).Calender not appears in that date fields.
No errors throughs in firebug.
My code is here.Please refer atachment.Calender not showing in "Date 2" text field.
<script>
$(function() {
$(".dp").datepicker();
});
fields = 2;
function addInput()
{
document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label> <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'> <input type='image' value='Remove' src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
document.getElementById('count_off').value=fields;
fields += 1;
}
</script>
<div>
<input id='date_1' class='dp' type='text' placeholder='Date'>
<a href="javascript:void(0);" id="addButton" onclick="addInput();">
<img src="img/addmore.png" width="" height="25px"></a>
</div>
<div id="text" ></div>
Assigning Id to all the datepicker field may create problem for you to handle it.So its better to assign class and do all the stuff with help of class. I have just written code to add datepicker.
$(".dp").datepicker();
$(document).on('click', '.add', function() {
var appendTxt = '<input class="dp" type="text" /><button class="add">Add</button>';
$("#container").append(appendTxt);
$(".dp").datepicker();
});
HTML is
<div id="container">
<input class="dp" type="text"></input><button class="add">Add</button>
</div>
SEE DEMO HERE
apply jquery function $(".dp").datepicker(); in your function addInput like this
function addInput()
{
document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label> <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'> <input type='image' value='Remove' src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
document.getElementById('count_off').value=fields;
$(".dp").datepicker(); // add this line
}
UPDATE 2 :
function addInput()
{
document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label> <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'> <input type='image' value='Remove' src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
document.getElementById('count_off').value=fields;
$("date_"+fields).datepicker(); // add this line
fields += 1;
}