i am working with codeigniter framework i am trying to use textboxes in HTML form when the user click the button a textbox will automatically generated by jquery but when i submit the form the other textbox values are posting correctly but i can't post the jquery textbox value.
here is the jquery code:
$("#button").live('click',function add(){
$("#tblRel").append(
'<tr ><td>'
+'<input type="text" class="input_value_short" id="prova" name="jquery_txt" value="prova" />'+
'</td><tr>'
);
});
HTML:
<?php echo form_open("validation/form_main");?>
<table id="tblRel" border="0">
<tr>
<td class="lable">Applicant Name:</td>
<td colspan="3"><?php echo form_input(array('name'=>'applicant_name','class'=>'input_value_long','value'=>set_value('applicant_name'))) ?></td>
</tr>
</table>
<?php echo form_submit(array('id'=>'submit','name'=>'Save','value'=>'Save record','class'=>'button_print'));?>
in the form_main() function i am posting like this:
form_main(){
$name = $this->input->post('applicant_name');
$jquery_txt = $this->input->post('jquery_txt');
}
i can get the value of $name but the $jquery_txt is empty
can anyone help me please! and sorry form my poor english.
$("#button").live('click',function add(){
$("#tblRel").append('<tr ><td><input type="text" class="input_value_short" id="jquery_txt" name="jquery_txt[]" value="prova" /></td><tr>');
});
I guess your name and is are different for the textbox..Make it same and if you have more than one textbox change the name of the textbox into array otherwise you will get only one value after posting it.
Change the jQuery code to this, and it should work fine. Your problem was that you were adding the contents with the "submit" button's click, which would submit the form and the contents would get appended after the submit request.
<script>
$("form").live('submit',function add(){
$("#tblRel").append(
'<tr ><td>'
+'<input type="text" class="input_value_short" id="prova" name="jquery_txt" value="prova" />'+
'</td><tr>'
);
return true;
});
</script>
Related
So I have a bunch of paragraph elements which are dynamically populated from a db. I have made the elements contenteditable. I now want to submit edits back the the db via a standard form submission. Is there a way to post the contenteditable elements back?
You have to use javascript one way or the other, it won't work as a "standard" form element as it would with a textarea or the like. If you like, you could make a hidden textarea within your form, and in the form's onsubmit function copy the innerHTML of the contenteditable to the textarea's value. Alternatively you could use ajax/xmlHttpRqeuest to submit the stuff a bit more manually.
function copyContent () {
document.getElementById("hiddenTextarea").value =
document.getElementById("myContentEditable").innerHTML;
return true;
}
<form action='whatever' onsubmit='return copyContent()'>...
If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:
<h2 #focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>
In "data" you can set a default value for mainMessage, and in methods I have:
methods: {
updateMainMessage: function(e) {
this.mainMessage = e.target.innerText;
}
}
"d-none" is a Boostrap 4 class for display none.
Simple as that, and then you can get the value of the contenteditable field inside "gift[main_message]" during a normal form submit for example, no AJAX required. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.
Does it NEED to be standard form submission? If you cannot or do not want use a form with inputs, you may try AJAX (XMLHttpRequest + FormData), through which you could perform asynchronous requests and control better how response shows up.
If you want it even simpler, try jQuery's $.ajax function (also $.get and $.post). It sends data using simple JS objects.
Made a fully working example based on Rob's idea:
After hitting submit, the (hidden) textarea is updated with the table-data, in JSON-format.
(return true to submit)
function copyContent() {
const table = [];
$("tr").each(function() {
const row = [];
$("th, td", this).each(function() {
row.push($(this).text());
});
table.push(row);
});
$("#rows").val(JSON.stringify(table));
// return true to submit
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit='return copyContent()'>
<textarea name="rows" id="rows" rows="4"></textarea>
<button type="submit">Submit</button>
</form>
<table class="table table-striped">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">edit </td>
<td contenteditable="true">me</td>
</tr>
<tr>
<td contenteditable="true">please</td>
<td contenteditable="true">😊</td>
</tr>
</tbody>
</table>
I am trying to load value of state field after change suburb dropdown. The suburb dropdown is coming from an ajax page after blur postcode text field. my jquery code is
$("#zip").blur(function(){
$.post("get_suburb_admin.php",{zip:$(this).val()}, function(d){
$("#suburb_cnt").html(d.suburb);
},'JSON');
});
$("#suburb").change(function(){
$.post("get_state.php",{suburb:$(this).val()}, function(a){
$("#state").val(a);
});
});
Html structure is
<tr>
<td>Suburb :</td>
<td id="suburb_cnt"><input type="text" name="suburb" id="suburb" value="<?php echo $row['suburb'];?>" /></td>
</tr>
<tr>
<td>Postcode :</td>
<td><input type="text" name="zip" id="zip" value="<?php echo $row['zip'];?>" /></td>
</tr>
<tr>
<td>State :</td>
<td id="state_cnt"><input type="text" name="state" id="state" value="<?php echo $row['state'];?>" /></td>
</tr>
But it is not responding after on change the suburb dropdown which is coming from ajax page. I am giving what is coming from ajax page here
$sql=mysql_query("SELECT town,region FROM au_postcode WHERE postcode='".$_REQUEST['zip']."'");
$arr=array();
$arr['suburb']='<select name="suburb" id="suburb">';
while($row=mysql_fetch_array($sql)){
$arr['suburb'].='<option value="'.$row['town'].'">'.$row['town'].', '.$row['region'].'</option>';
}
$arr['suburb'].='</select>';
echo json_encode($arr);
also suburb data is not getting after the form submit with method post.
$_REQUEST['suburb'] = nothing, after form submit
how can I solve it, pls help
try this
$("#suburb").change(function(){
var suburbVal = $(this).val();
$.post("get_state.php",{suburb:suburbVal}, function(a){
$("#state").val(a);
});
});
and same for #zip blur event
DOM prepares element on every page load/refresh but when you add thing dynamically to your page (without refreshing it) it does not re initiates DOM to go and detect that. So you have to notify javascript that find your element NOW. For which you can use/bind LIVE Method (for jQuery 1.7) or ON Method (for later versions of jQuery).
Here`s a simple example for CLICK event in jQuery.
$("#myButton").click(function(){
/*TO DO*/
});
and its another version (you can use LIVE/ON as per your jQuery`s Version)
$("#myButton").live("click", function(e){
/*TO DO*/
});
All the Best :)
I did not bind html element of suburb. You can do this by changing:
$("#suburb").change(function(){
$.post("get_state.php",{suburb:$(this).val()}, function(a){
$("#state").val(a);
});
});
to:
$("body").on("change","#suburb",(function(){
$.post("get_state.php",{suburb:$(this).val()}, function(a){
$("#state").val(a);
});
});
I have a html table(grid) which displays a few records for me.I want it to be editable, i.e user can edit the values and save them on pressing enter.
My table is something like this.I display records dynamically using php.
<a class="grayBucketBtn noMargin none" id="unpublish" href="#.">Unpublish</a>
<a class="grayBucketBtn" id="publish" href="#.">Publish</a>
<a class="grayBucketBtn" id="delete" href="#.">Delete</a>
<a class="grayBucketBtn" id="modify" href="#.">Modify</a>
<?php while ()//loop through ?>
<tr>
<td class="tableRadioBtn"><input type="checkbox" class="checkRowBody" id="checkRowBody" name="check"/></td>
<td class="tableShape">Round</td>
<td class="tableCarst">0.30</td>
<td class="tableColor">j</td>
<td class="tableClarity">SI1</td>
<td class="tableDimension">4.35x4.33x2.62mm</td>
<td class="tableDeptd">60.3%</td>
<td class="tableTablePer">60.3%</td>
<td class="tablePolish">Excellent</td>
<td class="tableSymmetry">Excellent</td>
<td class="tableCut">Very Good</td>
</tr>
<?php } ?>
Each row(tr) has a check box associated.If I check the check box,I get a edit button.When I click on the edit button,the selected row will turn into editable.So I want a function on the edit button,
$("#modify").click(function(){
//check if only one check box is selected.
//make it editable.
//save the content on pressing enter of the edited row.
});
I went through some questions but did not get a solution as most suggest some plugins which don't meet my requirements.So,some help would be useful.
Thanks for the time
This should cover turning them from text to inputs and back to text
$('#modify').click(function(){
$.each($(".checkRowBody:checked"),function(){
$.each($(this).parent('td').parent('tr').children('td:not(.tableRadioBtn)'),function() {
$(this).html('<input type="text" value="'+$(this).text()+'">');
});
});
});​​​​​​​​​
$('input[type="text"]').live('keyup',function(event) {
if(event.keyCode == '13') {
// do $.post() here
$.each($('input[type="text"]'),function(){
$(this).parent('td').html($(this).val());
});
}
});
​
​
When using checkboxes the user assumes more than one can be selected, if you want only one each time then just use radio buttons
I can't give you a complete solution but I can give you a direction:
First change the markup like this:
<tr>
<td class="tableRadioBtn"><input type="checkbox" class="checkRowBody" id="checkRowBody" name="check"/></td>
<td class="tableShape">Round<input class="hidden" value="Round" name="shape"/></td>
<td class="tableCarst">0.30 <input class="hidden" value="0.30" name="tableCarst"/></td>
...
//Do the same for all the columns
</tr>
Define the hidden class to display:none so all the inputs are hidden.
Once the user clicks a row, you remove the text of all the td elements and remove the hidden class from all the inputs:
$(".tableRadioBtn").click(function(){
//find the parent tr, then find all td's under it, empty the text and remove hidden class
$(this).closest('tr').addClass('editable').find('td').each(function(){
$(this).text('').removeClass('hidden');
});
});
//set a keypress event to detect enter
$(document).keypress(function(){
//if enter was pressed , hide input and set text
if(e.which == 13) {
var $editable = $('.editable');
$editable.find('input').addClass('hidden');
$editable.find('td').each(function(){
//set the text back
$(this).text($(this).find('input').val());
});
//post data via ajax.
}
}
Please note that i haven't tested this code so there might be some mistakes there, but this is a possible solution.
UPDATE:
In order to detect if more than one checkbox is checked use this:
if ($(':checked').length > 1){//do something}
So you want to make your selections and then invoke an action on the checked rows?
$('#delete').click(function() {
$.each($('.checkRowBody:checked').parent('td').parent('tr'),function() {
// probably want to carry out a $.post() here to delete each row using an identifier for the rows related record.
//I suggest applying an id or other attribute to the tr element and using that to pass a value with your $.post() data.
$(this).hide();
});
});
Is something wrong with my code?
<script>
function add(){
/* Get your form */
form = document.getElementById("test");
/* Create your input element */
input = document.createElement("input");
input.type="text";
input.name="array['artists']";
/* Append to form */
form.appendChild(input);
alert("done");
}
</script>
<table>
<tr>
<td align="right">Artist/s:</td>
<td><form id="test" enctype="multipart/data-form" method="post">
<input type="text" name="artists"/>
<input type="button" onclick='javascript: add()'/></form></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
Im trying to add another textbox below another but nothing happened. What should i do?
Seems to be working for me too.
When I first put it into an html file, Internet Explorer wouldn't let me run the javascript because the html file was local to my computer. Try another browser if that's what you're using. Or just click yest to allow it in IE if that's the case.
Seems to be working - fiddle
I just put a call to add() inside a setTimeout so it would execute a second after the page loads.
Are you just missing the call to add()?
edit: I didnt originally see the onclick bound. new working fiddle2
Works for me as well. Try testing in another browser..
Your HTML-formatting is not right. This is why the input-box (TextBox) is added after the 'add'-button and not underneath it as you would like.
You can try the following code:
var table = document.getElementById("tableAddRows");
var row = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td2.appendChild(input);
row.appendChild(td1);
row.appendChild(td2);
table.appendChild(row);
Add an id to the table (in the sample "tableAddRows").
Also, I added the Submit-button in a different table, like so (there are neater solutions):
<table>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
Also place the form-element around both tables.
I would also suggest to use JSRender or jQuery Templates to achieve your purpose.
Here's the sample code, if your still trying to figure it out.
i retrieved data from mysql table into html page i.e
$query="select * from student";
$result=mysql_query($query)or die(mysql_error());
while($rs=mysql_fetch_array($result))
{
?>
<tr>
<td align="center"><?php echo $rs['st_id']; ?></td>
<td align="center"><?php echo $rs['name']"; ?></td>
<td align="center"><input type="checkbox" name="checked[]" <?php if($rs['checked']==1){echo "checked"; } ?> /></td>
<td align="center"><img src="images/delete_icon.png" alt="Delete" /></td>
<td align="center"><img src="images/update.png" alt="Update" /></td>
this is gives me the output
assume that checkbox of id 1 is checked and retrieved from mysql table.
Now what i want to do is that when i checked the remaing two checkbox into this table and a function is called to ajax which goes to php page and update the value of checked field according to the given id (i.e 2 and 3 in this case). Not refreshing the whole page nor updating the whole record just the value of check box. i am new to ajax so
any help would be greatly appreciated.
Yes, exploring jqGrid isn't a waste of time at all. However, since you want to update only on change of checkbox value. Here's what you can do..
<input type="checkbox" name="check1" />
And..
$().ready(function(){
var st_id = <?php echo $rs['st_id']; ?>;
//Or you could use a hidden field in the form
$(':checkbox').click(function(){
var chkName = $(this).attr('name');
var checkVal = $(':checkbox[name='+chkName+']').attr('checked');//true or false
$.ajax({
url: 'MyApp/update.php?checboxName=' + checkVal,//Do update on server-side
success: function(data) {
alert('Updated successful.');
}
});
});
});
Also, you can do a $('formID').serialize() wihch returns name=value pairs of all form elements that can then be appended in the call to your php script.