This is my form_input:
<?php
echo form_input('noRegistrasi', isset($noRegistrasi) ?
$noRegistrasi : '', 'type="text"
class="form-control input-sm" id="noRegistrasi"
placeholder="No Registrasi" id="noRegistrasi"');
?>
I want it to be dynamic, so user can add more form_input and therefore, I need a Javascript function.
As comparison, this is my Javascript code to generate normal HTML input tag.
function generateSUBKLP(index) {
var idx = document.createElement("input");
idx.type = "text";
idx.name = "SUBKLP" + index + "";
idx.id = "SUBKLP[" + index + "]";
idx.size = "10";
return idx;
}
My question is: how do I generate codeigniter form_input() using
Javascript?
If my question is not clear, please ask.^^
Here is the demo. Pls load jquery first
Html part:
<form method="post" action="collect_vals.php">
<div id="input_fields">
<div><input type="text" name="name[]"> <input type="text" name="project[]"> <span class="fa fa-plus-circle" id="add_field"></span></div>
</div>
<input type="submit" value="submit">
</form>
Javascript part:
$(document).ready(function() {
$("#add_field").click(function(e){
e.preventDefault();
$("#input_fields").append('<div><input type="text" name="name[]"/> <input type="text" name="project[]"> <span id="remove" class="fa fa-minus-circle"></span</div>');
});
$("#input_fields").on("click","#remove", function(e){
e.preventDefault(); $(this).parent('div').remove();
})
});
Also use codeigniter form_input like this
$(document).ready(function() {
var input = "echo form_input('username', 'johndoe');";
$('#input_fields').append("<div>"+input+"</div>");
});
Related
My form submitting input field fine without appended input field. When I append input field by clicking add button and input value there and submit my form my appended data not posting.
I tried to print comments after post submit.
function edit($id,$redirect=false){
if ($this->input->server('REQUEST_METHOD') === 'POST')
{
$data = array( $save['comments'][] = json_encode($this->input->post('comments')) );
print_r($data);
//echo $save['comments'] = json_encode($this->input->post('comments'));
exit();
}
}
My output
Array ( [0] => ["test"] )
But it just displaying 1st comment not from next that I added using javascript.
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').on('click', function(e) {
e.preventDefault();
$(scntDiv).append('<p><input type="text" name="comments[]" class="form-control col-md-10"/><i class="fa fa-minus" aria-hidden="true"></i>remove</p>');
i++;
});
$(document).on("click", '#remScnt', function(e) {
e.preventDefault();
if( i > 2 ) {
$(this).closest('p').remove();
i--;
}
// return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action="<?php echo site_url('admin/observation/edit/'.$id.'/'.$redirect)?>" enctype="multipart/form-data" id="edit_form">
<h2>Add Another Input Box</h2>
<div id="p_scents">
<p>
<label for="p_scnts"><input type="text" id="p_scnt" size="20" name="comments[]" value="" placeholder="Input Value" /></label>
</p>
</div>
<button type="submit" class="btn btn-primary update">Update</button>
</form>
I have modified the answer in the post dicussed here.
In my application I have two buttons - edit and save. When clicked on edit, the labels get converted into input fields, where the user can edit the content and save.
Everything is working fine, but the problem is that when the user clicks on the edit button twice, the content in the input fields becomes blank, i.e. the <input> value becomes blank.
Please suggest me a fix for this. Where am I going wrong?
<div id="companyName">
<label class="text-cname"><b>#Html.DisplayFor(m => m.Company)</b></label>
</div>
<div class="row center-block">
<input type="submit" class="btn btn-success" value="Save" id="btnSave" />
<input type="button" id="edit" class="btn btn-primary" value="Edit" />
</div>
<script>
$(document).ready(function () {
$('#edit').click(function () {
// for company name
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
$('#btnSave').click(function () {
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
});
});
</script>
You can use replaceWith() method to convert label to textarea.
$("#edit").click(function(){
var text = $("label").text();
$("label").replaceWith("<input value='"+text+"' />");
});
$("#save").click(function(){
var text = $("input ").val();
$("input ").replaceWith("<label>"+text+"</label>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="edit">Edit</button>
<button id="save">Save</button>
<br/><br/>
<label>Text</label>
The most simple fix would be to disable the edit button once you've clicked it, and enable it again after saving:
$(document).ready(function () {
$('#edit').click(function () {
$(this).prop('disabled', true);
/*for company name*/
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
$('#btnSave').click(function () {
$('#edit').prop('disabled', false);
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
});
});
When you click the second time the value of companyName is empty, that's why the <input> value becomes blank. This is a very simple solution, but you lose the focus on edit box which is easy to fix.
$('#edit').click(function () {
/*for company name*/
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
if(companyName != "")
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
Try This one
function EditContent(){
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
if (companyName != "") {
$('.text-cname').text('').append(lblCName);
}
lblCName.select();
}
function SaveContent(){
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="companyName">
<label class="text-cname"><b>Company</b></label>
</div>
<div class="row center-block">
<input type="submit" class="btn btn-success" value="Save" id="btnSave" onclick="SaveContent()" />
<input type="button" id="edit" class="btn btn-primary" value="Edit" onclick="EditContent()" />
</div>
I am using this code to generate dynamically ADD More input fields and then plan on using Save button to save their values in database. The challenge is that on Save button, I want to keep displaying the User Generated Input fields. However they are being refreshed on Save button clicked.
javascript:
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
</script>
HTML:
<form method="post">
<div id="itemRows">Item quantity:
<input type="text" name="add_qty" size="4" />Item name:
<input type="text" name="add_name" />
<input onclick="addRow(this.form);" type="button" value="Add row" />
</div>
<p>
<button id="_save">Save by grabbing html</button>
<br>
</p>
</form>
One approach is to define a template to add it dynamically via jQuery
Template
<script type="text/html" id="form_tpl">
<div class = "control-group" >
<label class = "control-label"for = 'emp_name' > Employer Name </label>
<div class="controls">
<input type="text" name="work_emp_name[<%= element.i %>]" class="work_emp_name"
value="" />
</div>
</div>
Button click event
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData));
counter += 1;
});
The main thing is to call e.preventDefault(); to prevent the page from reload.
You might want to check this working example
http://jsfiddle.net/hatemalimam/EpM7W/
along with what Hatem Alimam wrote,
have your form call an upate.php file, targeting an iframe of 1px.
I have a form like this:
<form action="#contact-form" method="post" class="th_contact-form" id="id-59907491">
<div class="form_line">
<label for="widget-2-your-email" class="th-field-label email" style="display:none;">Your Email<span>(required)</span></label>
<input type="text" name="widget-2-your-email" id="widget-2-your-email" placeholder="Your Email" class="email">
</div>
<div class="th_contact-submit">
<input type="submit" value="submit" class="th_button">
</div>
I want to change the value="submit" to say value="click here"
How do I do that using javascript? I do not have the liberty of changing the form code as it is auto-generated via a theme in wordpress, and they don't have the option of changing the button text.
Fastest way: document.querySelector("#id-59907491 [type=submit]").value = "click here";
Most stable way:
var frm = document.getElementById('id-59907491'),
inp = frm.getElementsByTagName('input'),
l = inp.length, i;
for(i=0;i<l;i++) {
if( inp[i].type == "submit") {
inp[i].value = "click here";
break;
}
}
Assuming there is only one button with the th_button class:
window.onload = function () {
var button = document.getElementsByClassName( 'th_button' )[0];
button.value = "Click Here";
};
I have this JQuery:
$(document).ready(function() {
$("#generate").click(function() {
var texts = [];
alert();
$("form label").each(function() {
var oLabel = $(this);
var oInput = oLabel.next();
texts.push(oLabel.text() + " " + oInput.val());
});
texts[0] += texts[1];
texts[2] += texts[3];
for(i=3;i<texts.length;i++)
texts[i-1] = texts[i];
texts[texts.length-1] = null;
$("#cont").html(texts.join("<br />"));
});
});
What it do is it reads form elements then types them as regular text (there is a purpose for this).
And this is how my form looks like ...
<div id="cont" style="float:right; width:75%; height:auto">
<form onSubmit="return generate();">
<label class="itemLabel" for="name">Name : </label>
<input name="name" type="text" class="itemInput" value="<? echo $queryB[1]; ?>" readonly="readonly" />
<label># Some Text</label><br />
<label for="priPhone" class="itemLabel">Customer Telephone Number : </label>Phone#
<input name="priPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[2]; ?>" />
<label for="secPhone"> // Mobile#</label>
<input name="secPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[3]; ?>" /><br />
<label class="itemLabel" for="email">Customer Email Address : </label>
<input name="email" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[4]; ?>" /><br />
<label>***************</label><br />
<label>Best Regards,</label><br />
<input name="another_field" type="text" /><br />
<label>last thing</label><br />
<button type="button" id="generate">Generate</button>
</form>
</div>
now, when I click the button "Generate", everything goes well except that it ignores "another_field" and doesn't get its value
Anyone got an idea to solve this? (Note: This piece of code will be running on around 25 forms so I need to have it working.)
UPDATE:
Sample output:
Name : username # Some Text
Customer Telephone Number : 90237590 // 3298579
Customer Email Address : email#host.com
***************
Best Regards,
last_field
last thing
Workaround
Since I'm having all the forms have the same ending, I've been able to get to this code:
texts[0] += " " + texts[1];
texts[1] = texts[2] + " " + texts[3];
for(i=4;i<texts.length;i++)
texts[i-2] = texts[i];
texts[texts.length-2] = texts[texts.length-3];
texts[texts.length-3] = $("#agent").val() ;
texts[texts.length-1] = null;
It solved the problem, but I'm looking for a better way to accomplish this.
Try this javascript:
$(document).ready(function() {
$("#generate").click(function() {
var texts = [];
$("form").children().each(function() {
var el = $(this);
if (el.prop('tagName') == "LABEL") texts.push(el.text());
if (el.prop('tagName') == "INPUT") texts.push(el.val());
if (el.prop('tagName') == "BR") texts.push("<br />");
});
$("#cont").html(texts.join(""));
});
});
Working example here:
http://jsfiddle.net/Q5AD4/6/
Your <br/> tag is the next tag after the label before "another_field". You should probably make your next call something like:
var oInput = oLabel.next('input');