how to pass java script value to php in codeigniter - php

i have a form where two fields are dynamically generated through java script when a button is clicked.when the button is clicked each time,the two text field will generate again and again.now i have got the count of text field generated in a hidden field in JavaScript.How can i get the value of hiddenfield in controller and insert the values of text fields in database,by appending comma in data when the text box value is entered each time.please help me.
my javascript is
<script>
var countbox=0;
var textbox1=0;
var textbox2=0;
function getField()
{
var newtextbox1="name1"+countbox;
var newtextbox2="name2"+countbox;
document.getElementById('renderDiv').innerHTML+='<br/><input type="text" id="'+newtextbox1+'" name="'+newtextbox1+'" /><br/><input type="text" id="'+newtextbox2+'" name="'+newtextbox2+'" />';
document.getElementById('renderDiv').innerHTML+='<br/><input type="hidden" id="hiddentextField" name="hiddentextField" value="'+countbox+'" />';
countbox +=1;
}
</script>
my html code is
<input type="button" id="button1" onclick=getField();/>
<div id="renderDiv">
</div>
inside this div the two textfield is generated along with the hidden field
i am not getting the value of textfield in controller while submitting and i am not getting the count of textfield.i tried like $hiddenfield=$this->input->post('hiddentextField');

you will have to post the variable inorder to pass this to the server
<script>
var countbox=0;
var textbox1=0;
var textbox2=0;
function getField()
{
var newtextbox1="name1"+countbox;
var newtextbox2="name2"+countbox;
document.getElementById('renderDiv').innerHTML+='<br/><input type="text" id="'+newtextbox1+'" name="'+newtextbox1+'" /><br/><input type="text" id="'+newtextbox2+'" name="'+newtextbox2+'" />';
document.getElementById('renderDiv').innerHTML+='<br/><input type="hidden" id="hiddentextField" name="hiddentextField" value="'+countbox+'" />';
countbox +=1;
window.location.href = "index.php?name=" + countbox-1;
//change index.php to your page name
}
</script>
then in the same page
<?php
$hiddenfield=$_GET["name"];
?>

I had the same problem before, what I did is I insert those text box inside a table, lets say, tableSample
then I use jQuery find
var _content = '';
var _findcontent = $("#tableSample");
_findcontent.find("tr").each(function(){
$(this).find("td").each(function(){
$(this).find("input").each(function(){
_content += $(this).val+'~'+$(this).attr("id")+'|';
});
});
});
Then use ajax to pass it to your PHP
$.post("<?php echo site_url('controller_name/method_name'); ?>",
{
content : _content
}
,function( _data){
jAlert("alert",_data,"alert");
});
In your PHP, you can use explode to get the desired values,
$content_from_page = $this->input->post("content");
$explode_string = array();
$explode_string = explode("|",$content_from_page );
$explode_arr = array()
for($x=0;$x<count($explode_string)-1;$x++)
{
$explode_arr[] = explode("~",$explode_string[$x];
}
then print_r($explode_arr); to check
*Note: The only problem with this approach is that, if the character that is inserted into the textbox is ~ or |, coz that is the delimiter used.

Related

Keep value of input which is generated by Javascript after submitting

I have this code to append the input panel #yearPanel after the select box #before changed.
$("#before").change(function() {
var selected = $('#before option:selected').text();
if(selected == bankShowYear) {
$(yearPanel).insertAfter("#yearAnchor");
var value = $("#yearHiden").val();
$("#year").val(value);
} else {
$("#yearPanel").remove();
}
});
I want to keep the input value of #year in #yearPanel after submitting by PHP. I tried to store the value in #yearHidden and assign it to #year after all the input are rendered but it doesn't work.
How to keep the input value?
Try this:
$("#before").change(function() {
var selected = $('#before option:selected').text();
if(selected == bankShowYear) {
$(yearPanel).insertAfter("#yearAnchor");
var value = $("#yearHiden").val();
$("#year").val(value).attr('name', 'year');
} else {
$("#yearPanel").remove();
}
});
Then, on your next page:
$("#year").value(<?php echo $_REQUEST['year']?>);
OR
<input id="year" value="<?php echo $_REQUEST['year']?>" />
your input needs a name attribute in order for it to be passed along to your serverside php script
You need to pass the value to PHP via a hidden field and PHP will have to render it on the next page. In other words the value needs to go from the client-side to the server-side and back to the client-side.

how to get different id values using keyup in jquery function

$(document).keyup(function(e){
var idd = $(".hidd").val();// Here i can't get the correct value of "class hidd" and always get value 1
var sss = ".comment_tarea" + idd;
$tArea = $(sss);
alert(sss);
if ($tArea.is(":focus") && e.keyCode == 13) {
var t = $tArea.val();
}
});
$id1=0;
while(...){
$id1++;
<form >
<? $t =$id1; $comment_tarea = "comment_tarea".$t;
echo("comment");
echo($comment_tarea);
?>
<textarea class="<? echo $comment_tarea; ?>" name="tarea"></textarea>
<input type="hidden" class="hidd" value="<?php echo htmlspecialchars($id1); ?>" />
</form>
}
In the Jquery function, there is always value 1 in variable idd of class "hidd" for all textarea that means all class of $comment_tarea such as "comment_trea1", "comment_trea2", "comment_trea3", "comment_trea4",.......ans so on.
Here the textarea input value is change by $id1 which is unique.
How can get the correct idd value means get idd=1 for "comment_trea1",get idd=2 for "comment_trea2", get idd=3 for "comment_trea3" and so on...
pls help .
.val() returns only the value of the first matched element.
What you need to do is call .val() on every matched element:
$(".hidd").each(function() {
alert($(this).val());
});
You are using val() with the selector and it will return value of element at zero index always. To get the value of element at one index if exists you can use $(".hidd").eq(1).val();
You better bind the keyup with your text area instead of binding with document. AS you are generating forms in loop and each loop iteration generates textarea with hidden field. You can relate the hidden field with the form enclosing textarea.
$("textarea[name=tarea]").keyup(function(e){
var idd = $(this).closest('form').find('.hidd').val();
//your code
}

Change text input values dynamically

My question might be quite easy for you guys, but it's hard for me...
I have a text field and I want to change its value between once <label id="some_id"> is clicked. Until what I've described now, I can do it myself with jQuery, but here comes the complex part (for me, obviously):
I have two values I want for that text field, and once that <label> is clicked, it switches to the value that isn't shown, but once we click it again, it goes back to the original text the text field contained.
I have to keep my jQuery/JS internal because I get the desired values from the database and I don't want to make my .js files .php.
This is what I got:
<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />
It does the first part I need, changing the value of the field to the new value, but once that button gets clicked again, I want the original text.
Thank you.
You can compare its current value to the available possibilities.
<label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">​
var possibilities = ["foo", "bar"];
$('#toggle').click(function(){
var old_val = $("#stuff").val(), new_val;
if (old_val == possibilities[0])
new_val = possibilities[1];
else
new_val = possibilities[0];
$("#stuff").val(new_val);
});​
demo
First, don't use inline JavaScript.
You can use a combination of .toggle() and data-* attributes for this. For example, using a data-toggle attribute for the value you want to toggle with.
<label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>​
$("label[for][data-toggle]").each(function() {
var $this = $(this);
var $for = $("#" + $this.attr("for"));
var originalValue;
$this.toggle(function() {
originalValue = $for.val();
$for.val($this.data("toggle"));
}, function() {
$for.val(originalValue);
});
});​
See it here.
UPDATE #1
I added usage of for attribute of <label>.
UPDATE #2
If you don't want to use .toggle() due to the deprecation notice.
$("label[for][data-toggle]").each(function() {
/* cache */
var $this = $(this);
var $for = $("#" + $this.attr("for"));
var originalValue = $for.val();
/* state variable */
var which = 0;
$this.click(function() {
$for.val(which ? originalValue : $this.data("toggle"));
which = 1 - which;
});
});​
See the non-.toggle() alternative here.
For doing this, on the first button click you need to store the current value of input in some variable and then on 2nd click you can assign that variable to input value. If you donot want to have js file, you can simply use <script></script> tags to write the jquery.
`<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">
<script>
var currentValue="";
function replaceText(newval){
currentValue= $("#html").val();
if(currentValue!=newval)
$("#html").val(newval);
$("#label").attr("onclick","replaceText('"+currentValue+"')");// Here we assigned the other value to label onclick function so that it will keep on toggling the content.
}
</script>`
DEMO HERE
You can store the values into JavaScript variables and use jQuery click method instead of onclick attribute.
var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";
$('label[for=html]').click(function() {
$('#html').val(function(i, currentValue) {
return currentValue === def ? up : def;
});
});

How to dynamically add an HTML array element[]

I have a form where I need to dynamically add as many text fields as the user wants to. I want the text fields to be an array, for example:
<input type="text" name="room_text[]">
I've already built something I thought would work. It successfully adds more text boxes. I added two more text boxes with javascript dynamically, making the form look like this:
<input type="text" name="room_text[]">
<input type="text" name="room_text[]">
<input type="text" name="room_text[]">
BUT, when I posted it to the PHP file, it only gets the first value. The reason why I know this is a javascript problem is becuase it works fine if you have more than one text box on page load. Its just when you add more text boxes with javascript.
If this helps, this is the jquery function I use to add the boxes:
$('.add').live("click", function() {
var mu = $(this).parent('td').parent('tr');
var clone = $(this).parent('td').parent('tr').clone();
$(clone).children('td').children('.add').remove();
$(clone).children('td').children('.redtext').remove();
$(clone).children('td').children('.remove').css("display", "inline");
$(clone).css("display", "none");
$(mu).after(clone);
$(clone).show("fast");
});
I believe the problem resides in the .clone() function. Can you try a different method, say ...
$('.add').live("click", function() {
var mu = $(this).parent('td').parent('tr');
var clone = '<tr>' + $(this).parent('td').parent('tr').html() + '</tr>';
$(clone).children('td').children('.add').remove();
$(clone).children('td').children('.redtext').remove();
$(clone).children('td').children('.remove').css("display", "inline");
$(clone).css("display", "none");
$(mu).after(clone);
$(clone).show("fast");
});
UPDATED - Oops. In that version "clone" is a string, not an element, so the .children() functions aren't working ... here's a corrected version:
$('.add').live("click", function() {
var mu = $(this).parent('td').parent('tr');
var clone = $('<tr>' + $(mu).html() + '</tr>');
$(clone).children('td').children('.add').remove();
$(clone).children('td').children('.redtext').remove();
$(clone).children('td').children('.remove').css("display", "inline");
$(clone).hide();
$(mu).after(clone);
$(clone).show("fast");
});​

Get value of multiple hidden form values, within a table

I ve been trying to obtain the value of my form input elements, but I am just not having any luck with it.
I have the following form within a while loop in PHP, so there will be multiple forms.
<form method='POST' action=".$_SERVER['SCRIPT_NAME']." name='form_set_deadline' class='form_set_deadline'>
<input type='hidden' value='".$data3['unique_name']."' name='file_id' class='file_id' />
<input type='hidden' value='".$user_id."' name='client_id' class='client_id' />
<table>
<tr>
<td align='left'><input type='button' name='set_file_options' value='Submit' class='set_file_options' /></td>
</tr>
</table>
</form>
Now, I am trying to get the value of the hidden fields of jquery, but just don't know how to access the hidden field values. Remember, there are multiple of these forms on the page. Here is the jquery form, contained within a function.
function setFileOptions(){
$('.set_file_options').each(function(e){
$(this).unbind("click").click(function(e){
e.preventDefault();
//set form variables
var file_id = // DON'T KNOW HOW TO GET THE HIDDEN FIELD INPUT VALUE?
alert(file_id);
}); //END THIS CLICK FUNCTION
});
} //END MAIN FUNCTION
Thanks for the help/tips!
So after all the input received from you all, I have decided to use the following to get all the form data:
var form_data = $(this).closest('form').serialize();
Thanks again!
var file_id = $(this).closest('form').find('.file_id').val();
Alternatively, a pure JS solution:
var file_id = this.form.elements['form_id'].value;
A selector to select all <input type="hidden"/> elements:
var hiddens = $(this).closest('form').find(':hidden');
//hiddens.eq(0) = file_id
//hiddens.eq(1) = client_id
If you do not have anything attached to your classnames, I recommend to drop these attributes, and use the name-attribute selector:
var file_id = $(this).closest('form').find('[name="file_id"]').val();
Try this,
$(this).closest('form').find(':hidden'); //should get you the hidden fields inside the form
And there could be more than one fields so you may need iterate to get all the hidden fields,
var field_val = [];
$.each ($(this).closest('form').find(':hidden'), function (index) {
field_val [$(this).attr('class')] = $(this).val();
});
var file_id = $(this).closest('table').siblings('.file_id').val()
Have you tried:
var file_id = $('input[name="file_id"]').val();
Try this:
var fileid = $(this).parents('form').find('.file_id').val();

Categories