I have an accordion table and i want to get the row id values using Jquery and checkboxes.To make things easier i am using a hidden value field.when i try to do that hidden input id always set to the last row value instead giving me all the values.
My accordion table innerHTML is like this
<div id="acc22" class="accBox">
<p class="accordianHead">
<div class="accordianBody">
<form id="form_22" action="" method="post" encoding="">
<div style="display:none;">
<table id="item_tbl_22" class="accTable" cellspacing="0" cellpadding="0" border="0" width="100%">
<thead class="greyBg paddingHead">
<tbody>
<input id="cloth_id22" type="hidden" value="72" name="fabric_id">
<input id="cloth_colour_id22" type="hidden" value="824" name="data[Cloth][cloth_id]">
<tr id="S3639-1-1_824" style=" ">
<tr id="S3639-1-2_824" style=" ">
<tr id="S3639-1-3_824" style=" ">
<tr>
</tbody>
</table>
</form>
</div>
This is my hidden id
<input type="hidden" id="form_te[<?php echo $id;?>]" value="<?php echo $tbl_content;?>" />
This is my Jquery method
$("input[name='s_i_width[]']:checked").each(function(event) {
printArray.push($('#form_te'+ this.value).val());
console.log($('#form_te'+ this.value).val());
How to archive this?
Sorry about that, i think the special character need to add extra code.
Try this.
$("#form_te\\["+<?php echo $id;?>+"\\]").val()
And thanks for this guys.
Find DOM element by ID when ID contains square brackets?
Did you tried
$('#form_te['+<?php echo $id;?>+']').val()
Related
I have a problem is how to populate all the values above to the table below once I click add button.I am using php ,jquery and html to create it. Anyone can guide me how do it like below the picture? I have search in the internet to find the solution, but can't get it the solution. Below the picture is client show me want to create like this add table like below the picutre.
Hope someone can guide me or give me example to solve me the problem. Thanks.
Try this, see if fits your needs:
HTML:
<form role="form">
<label for="name"></label>
<input type="text" id="name">
<label for="age"></label>
<input type="number" id="age">
<label for="gender"></label>
<input type="text" id="gender">
</form>
<table id="table">
<thead>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</thead>
<tbody>
<tr>
<td>Felipe</td>
<td>29</td>
<td>M</td>
</tr>
</tbody>
</table>
<button id="addButton">Add</button>
JS:
$('#addButton').click(function(){
var newTableRow = '<tr><td>'+ $('#name').val() +'</td><td>'+ $('#age').val() +'</td><td>'+ $('#gender').val() +'</td></tr>';
$('#table tr:last').after(newTableRow);
})
This script can be triggered as you click the button to save the data or after the response from your back-end.
I have created a form in view file of my laravel 5.4 app where i can add more input fields using jquery clone() function. in this form i also use jquery select2 plugin.
Here is form:
<form name="tempform" action="{{route('temppris.store')}}" method="POST">
{{csrf_field()}}
<table class="table table-hover small-text" id="tb">
<tr class="tr-header">
<th >Sl.No.</th>
<th class="col-lg-2" >Type</th>
<th class="col-lg-3">Medicine Name</th>
<th colspan="2" class="col-lg-2">Dosage</th>
<th colspan="2" class="col-lg-2">Duration</th>
<th>Total Qty</th>
<th class="col-lg-1"> Remarks</th>
<th><span class="glyphicon glyphicon-plus"></span></th>
<tr>
<td><input type="text" name="slno[]" style="width:100%;" readonly></td>
<td ><select name="meditype[]" class="meditype" style="width:100%;"></select> </td> </td>
<td class="col-lg-4"><select name="medicine[]" class="medicine" style="width:100%;"></select></td>
<td><input type="number" value="1" class="dos input-sm" style="width:40px;" min="1" name="dos[]" step="0.1"></td>
<td class="col-lg-2"><select class="dosage" style="width:100%;" name="dosage[]" ></select></td>
<td><input type="number" value="1" class="NoOfDuration input-sm" style="width:40px;" min="1" name="NoOfDuration[]" min="1"></td>
<td class="col-lg-2"><select class="duration" name="duration[]" style="width:100%;"></select></td>
<td><input type="number" class=" total" min="1" name="total[]" style="width:50px;"></td>
<td class="col-lg-2"><select name="remarks[]" class="remarks" style="width:100%;"></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
<div class="form-group">
<label>Doctor Advice</label>
<textarea name="docadvice" id="docadvice" class="form-control"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
<div class="form-group">
<button type="submit" class="form-control btn btn-success">Save Template</button>
<input type="hidden" name="doc_id" value="{{Auth::user()->doc_id}}">
</div>
</div>
</div>
</form>
Here is my jquery codes:
$('#addMore').on('click', function() {
$(".meditype").select2('destroy');
$(".medicine").select2('destroy');
$(".remarks").select2('destroy');
$(".duration").select2('destroy');
$(".dosage").select2('destroy');
var data = $("#tb tr").last().clone(true).appendTo("#tb");
data.find("input").val('');
data.find("select").val('');
I am a noob in controller code. so how can i get values of my all elements of form in controller . including those are dynamically created using jquery. i tried many times but only get null value or just value of first row. in jquery i initialize my select2 elements on form loading and also reinitialize them after cloning. so its working fine while i clone it. It may work for others because I search for this but not found on internet. But now getting values of this form in controller became headache for me. Trying from last 3 days but not working.
UPDATE
Here is Codes I am trying just for checking:
$count=count($request->get('medicine'));
$temppris->medicines=$count;
$medicine=$request->get('medicine');
foreach($medicine as $index => $value)
{
$tempmedicine=new tempmedicine;
$tempmedicine->medicine_dosage=$medicine[$index]=>$value;
$tempmedicine->save();
}
first make dd function inside the store function as dd($request->medicine);
please post the result then i will tell you what is the reason
Thanks for the reply try adding the medicines in the cloned from element and use the same dd($request->medicine); method if you get all the values inside array its working perfectly but if you are getting only the values of the original div element its definitely its naming problem
please post you result as follows by populating array so that i can view
for Example
array:2 [▼
0 => "2"
1 => "3"
]
have you tried this
$medicine=$request->get('medicine');
foreach($medicine as $index => $value)
{
$data = $value['medicine']; //here name will be your stored medicine name
print_r($data);
exit();
}
i figure out this friends. its just a silly mistake of placing my <form> tag and closing it before closing of div that i have in my form. in browser console showing warning error of unmatched tags but i just ignoring it. wasted 3 days to this silly mistake. you should all check such warning every time using form. i just place my form tag at the starting of my div in which i makin my tag..hope this will help others..
I have a form with a table (values in it can be edited) in it, like this:
<form action="file.php" id="myform" method="POST">
<input name="inp">
<div class="divclass">
<table id="mytable" name="mytable">
<tr><th>col1</th><th>col2</th></tr>
<tr><td contenteditable='true'>val11</td>
<td contenteditable='true'>val12</td></tr>
<tr><td contenteditable='true'>val21</td>
<td contenteditable='true'>val21</td></tr>
</table>
</div>
<input type='submit' name='submit' value='Submit'>
</form>
<?php
print_r ($_POST)
?>
So, when I click on submit, the entire form should be submitted right?
But just the inputs - inp & submit get submitted to the form, which I know when I print the post parameter array in php.
Can someone please explain how I can get the table data too in my post parameter array $_POST?
Also how do I trigger an onchange event on the table? I tried this, but it didn't seem to work :
$("#mytable").change(function (event) {
console.log("changed")
console.log($("#keno_config_table").val())
})
When you submit a form only the values inside selector elements gets submitted not all html elements.
However, if you can add an input tag inside <td> tag you'll be able to submit the values.The following code should work for you.
<form action="file.php" id="myform" method="POST">
<input name="inp">
<div class="divclass">
<table id="mytable" name="mytable">
<tr><th>col1</th><th>col2</th></tr>
<tr><td contenteditable='true'><input type="hidden" value="val11" name="value1"> val11</td>
<td contenteditable='true'><input type="hidden" value="val12" name="value2"> val12</td></tr>
<tr><td contenteditable='true'><input type="hidden" value="val21" name="value3"> val21</td>
<td contenteditable='true'><input type="hidden" value="val21" name="value4"> val21</td></tr>
</table>
</div>
<input type='submit' name='submit' value='Submit'>
</form>
jQuery
$("#mytable input[type='text']").change(function (event) {
console.log("changed")
console.log($(this).val())
});
PHP
<?php
if (!empty($_POST)){
echo "Post data received";
echo "Value 1 :".$_POST["value1"];
echo "Value 2 :".$_POST["value2"];
echo "Value 3 :".$_POST["value3"];
echo "Value 4 :".$_POST["value4"];
}else{
echo "Post data is empty. No value is passed from HTML to the server";
}
?>
So, when I click on submit, the entire form should be submitted right?
No. It isn't a form control.
But just the inputs - inp & submit get submitted to the form
inputs are form controls (as are selects, textareas and buttons).
Can someone please explain how I can get the table data too in my post parameter array $_POST?
Using JavaScript, listen for a submit event on the form element and copy the HTML of the table into the value property of a hidden input.
Alternatively: Use input elements in your table cells instead of using contentEditable.
I offer you to do this
<form action="file.php" id="myform" method="POST">
<input name="inp">
<div class="divclass">
<table id="mytable" name="mytable">
<tr>
<th>col1</th>
<th>col2</th>
</tr>
<tr>
<td><input name='col1[]' style='border:0;outline:0;display:inline-block' value='value'></td>
<td><input name='col2[]' style='border:0;outline:0;display:inline-block' value='value'></td>
</tr>
<tr>
<td><input name='col1[]' style='border:0;outline:0;display:inline-block' value='value'></td>
<td><input name='col2[]' style='border:0;outline:0;display:inline-block' value='value'></td>
</tr>
</table>
</div>
<input type='submit' name='submit' value='Submit'>
</form>
(of course, make a class for styles, I just wanted to do it simpler). Inputs will look like contenteditable tags without borders and you will be able to get an array of all col1 and col2 like $_POST['col1'] and $_POST['col2'] Also, you may change values to placeholders if you don't want default data to be sent.
I am building a online exam application, here paper name and no. of papers are retrieved from database. Now I want to get the paper code of that paper for which I clicked the start button. Code for the table is here:
<form method="post" action="exam_page.php" >
<table >
<tr style="background-color: #7F859E;color:white; height:50px;">
<th style="padding-left:140px; width:550px;">Paper</th>
<th style="padding-left:40px;">Time</th>
<th style="padding-left:40px;">Duration</th>
<th style="padding-left:40px; width:250px;"></th>
</tr>
<?php
$i=1;
while($row=mysql_fetch_array($rs)){?>
<tr style="height:80px; background-color: #CCCCCC;">
<td style="padding-left:40px;">
<input type="text" value="<?=$row['paper_code']?>" name="paper_code<?=$i?>" readonly><?=$row['paper_name']?>
</td>
<td style="padding-left:40px;">
<input type="text" value="<?=$row['time']?>" readonly style="width:90px;">
</td>
<td style="padding-left:40px;">
<input type="text" value="<?=$row['duration']?> Min" readonly style="width:90px;">
</td>
<td style="padding-left:40px;"><button style="width:100px;">Start</button></td>
</tr>
<?php $i++; } $_SESSION['exam']=$i; ?>
</table>
</form>
Name your submit button, (also make it a submit type) and assign the paper code to its value attribute.
<button type="submit" style="width:100px;" name="clicked" value="<?=$row['paper_code']?>">
Start
</button>
Now, in exam_page.php you can get the value of the clicked button from $_POST['clicked']. (Or whatever you decide to name it.)
To get the values from the other inputs associated with the button you clicked, you can add the paper code to their names instead of using $i.
<input type="text" value="<?=$row['time']?>" name="time[<?=$row['paper_code']?>]">
and in exam_page.php you can get the value from $_POST['time'][$_POST['clicked']], etc.
If they aren't intended to be editable in your form, though, I would recommend using something else to display them and just loading them from the database in exam_page.php instead. Otherwise, your users will be able to override the readonly attribute and submit different values.
Try using javascript onclick functions:
<script>
function getPaperCode(paperCode)
{
alert(paperCode);
}
</script>
Then edit your input add onclick event:
<input type="text" value="<?php echo $row['paper_code']; ?>" onclick="getPaperCode('<?php echo $row["paper_code"]; ?>');" name="paper_code<?php echo $i; ?>" readonly><?=$row['paper_name']?>
Once you click. it will alert the value of the button
passed your unique id value or examcode via hidden field like this
<input type="hidden" name="id" value="<?=$row['eid']?>">
and on button click perform query like
$id=$_POST['id'];
select * from table_name where id='$id';
I am building a simple application that will allow the users to add rows to a table and generate that table so the user can type in data into the rows and columns.
So far I have managed to create the rows dynamically jsfiddle
Now what I need to do is when the user hits generate (I am using PHP for this), the table must be shown in a html text area.
I did try the below code but didn't work
<form action="1.php" method="post">
<?php
echo $table = '<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
<tr><td colspan=3>sdsdsdsds</td></tr>
<tr><td colspan=1>fsdfsf</td><td colspan=2>sdffsdfsf</td></tr>
</table>';?>
<textarea name="thetable" style="display:none"><?php echo $table ?></textarea>
<input type="button" name="add" value="Add 1 Column" id="addrows1" style="color:#3300FF; font-size:16px; " />
<input type="submit" name="gen" value="Generate Table" style="color:#3300FF; font-size:16px; " />
</form>
<?php
if(isset($_POST['gen']))
{
var_dump($_POST['thetable']);
}
?>
Any help on how i can fix this?
From yous jsfiddel, I've add <input> in your code.
$('#maintable tr:last').after('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr>');
Why didn't try to add <input>? Hope this help you
You can enable the contenteditable when generating your rows to make them editable instantly. You won't be needing to hit the generate button anymore but if you really want it to clicked first, then please feel free to edit this in any way you want. Here's an example:
HTML - It's still the same. I did nothing in here.
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
<tr>
<th align="center"> Roll No </th>
<th align="center"> First Name </th>
<th align="center"> Last Name </th>
</tr>
<tbody>
<tr><td>1</td><td>John</td><td>Sample</td></tr>
</tbody>
</table>
<input type="button" name="add" value="+Add" id="addrows" style="color:#3300FF; font-size:16px; " />
<input type="button" name="add" value="Generate table to edit" id="" style="color:#3300FF; font-size:16px; " />
SCRIPT - Put the additional code in every <td>. Put id too so you can get their values and save them into your database.
var counter = 1;
$("#addrows").click(function(){
$('#maintable tr:last').after('<tr><td id="col1'+counter+'" contenteditable="true">...</td><td id="col2'+counter+'" contenteditable="true">...</td><tdid="col3'+counter+'" contenteditable="true">...</td></tr>');
});
NOTE - If you want the generate table button to be clicked, you need to use jQuery ajax and a database (if you want to save the values you're going to create). I gave you some links that could help you. Hope I gave you a good start about your concern.
About contenteditable
About jQuery.ajax()
About serialize()
Tutorial on how to use contenteditable with PHP, MySQL, and jQuery
Ajax