So I have this form:
<form data-ajax="false" name="frm" action="cmd_go.php" method="post" >
<input type="hidden" name="cmd" value="insertarlineapedidomultiple">
<input type="hidden" name="mod" value="yes">
<!--<input id="insertList" type="hidden" name="insertList" value="">-->
<input type="hidden" name="o" value="<?php echo $o ?>">
<div id="div_lista_familias" data-role="collapsibleset" data-content-theme="a" data-iconpos="right">
</div>
<input class="insertar btn-azul ui-btn ui-corner-all" data-role="none" type="submit" value="Insertar"/>
</form>
Then we have some Javascript code to populate the form content after calling a web service:
function listaProductos(alb, fam){
var ok = false;
$.ajax({
type: 'GET',
url: url_servicio + alb + '/' + fam + '/productos',
dataType: "json", // data type of response
//async: false,
error: function(){
ok = false;
},
success: function(data){
var content;
var acum = 0;
for(i=0; i<data.length; i++){
ok = true;
var qty = get_item_qty_inline(data[i].itemid);
var qty2 = get_item_qty2_inline(data[i].itemid);
var qty3 = get_item_qty3_inline(data[i].itemid);
var dto = get_item_dto1_inline(data[i].itemid);
content = '<fieldset class="ui-grid-d">';
content += '<div class="ui-block-a"><label for="name">';
content += data[i].itemid + ' ' + data[i].nombre + '</div>';
content += '<div class="ui-block-c ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset""><input type="number"';
content += ' name="cantidad[]" pattern="[0-9]*" id="number-pattern"';
content += ' value="' + qty + '" placeholder="Uds1" onfocus="this.oldvalue = this.value;" onchange="onChangeQty(this); this.oldvalue = this.value;"></div>';
content += '<div class="ui-block-b ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset""><input type="number" name="dtoporc1[]" pattern="[0-9]*" id="number-pattern"'
content += ' value="' + dto + '" placeholder="%Dto1"></div>';
content += '<div class="ui-block-d ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset""><input type="number"';
content += ' name="cantidad2[]" pattern="[0-9]*" id="number-pattern"';
content += ' value="' + qty2 + '" placeholder="Uds2" onfocus="this.oldvalue = this.value;" onchange="onChangeQty(this); this.oldvalue = this.value;"></div>';
content += '<div class="ui-block-e ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset""><input type="number"';
content += ' name="cantidad3[]" pattern="[0-9]*" id="number-pattern"';
content += ' value="' + qty3 + '" placeholder="Uds3" onfocus="this.oldvalue = this.value;" onchange="onChangeQty(this); this.oldvalue = this.value;"></div>';
content += '<input type="hidden" name="idalbaran[]" value="' + alb +'">';
content += '<input type="hidden" name="itemid[]" value="' + data[i].itemid +'">';
content += '<input type="hidden" name="famalbaran[]" value="' + fam +'">';
content += '<input type="hidden" name="itemdesc[]" value="' + data[i].nombre +'">';
content += '<input type="hidden" name="precioventa[]" value="' + data[i].precio + '">';
content += '<input type="hidden" name="dtoporc2[]" value>';
content += '<input type="hidden" name="dtoporc3[]" value>';
$('#'+fam.replace(/ /g, '_')+'_content').append(content);
acum += parseFloat(qty || 0) + parseFloat(qty2 || 0) + parseFloat(qty3 || 0);
$('#'+fam.replace(/ /g, '_')+' .ui-li-count').html(acum);
}
},
complete: function(data, status){
if (!ok){
$('#'+fam.replace(/ /g, '_')).remove();
}
}
});
}
Finally, this is the PHP code we have in cmd_go.php
//GET variables
if(isset($_GET)){
$params = array_keys($_GET);
for ($i=0;$i<count($params);$i++)
if(isset($_GET[$params[$i]])){
$nv=$params[$i];
$$nv=$_GET[$params[$i]];
}
}
//POST variables
if(isset($_POST)){
$params = array_keys($_POST);
for($i=0;$i<count($params);$i++)
if(isset($_POST[$params[$i]])){
$nv=$params[$i];
$$nv=$_POST[$params[$i]];
//print "$nv : ".$$nv.'<br />';
}
}
var_dump($itemid);
The problem is that not all values are posted, because our $itemid array only has 91 elements, when our web service returns about 400. Out HTML form is correctly displayed with all 400 items, but out PHP var_dump returns:
array(91){[0]=>string(6) "173771" [1]=>string(6) "173772" [2]=>string(6) "564814"...[90]=>string(6) "548115"}
Any ideas on why POST could be taking only 91 records??
You need to check max_input_vars value in php.ini. It can lead to such behavior.
http://php.net/manual/en/info.configuration.php#ini.max-input-vars
Related
I have use this form for uploading multiple files. But i have used jQuery for append multiple file input. I have try multiple method for validate in laravel but its not working. If we used only single file validate its working. But if we used multi file validation its not working.
If we use this and upload all file at a time in with multiple attribute file input its working.
If we upload multiple file one by one after that its not working.
// My View
#include('flash.flash_message')
<form action="{{route('company.upload')}}" method="post" id="formUpload">
<div id="newinput">
<input type="file" name="files[]" class="form-control" />
</div>
<input type="submit" value="uplaod" />
</form>
<div class="btn btn-info" id="add_btn">Add</div>
// My jQuery
$(document).on('click','#add_btn',function(){
var newRowAdd =
'<input type="file" name="files[]" class="form-control" />';
$('#newinput').append(newRowAdd);
});
// My Controller
<?php
public function store(Request $request)
{
$request->validate([
'files' => 'required',
'files.*' => 'mimes:doc,docx|max:15720',
] );
try
{
$array = [
'created_at'=>date('Y-m-d H:i:s')
];
$data = Company::create($array);
// there my uplaoding code
if($request->hasFile('file'))
{
$newData = Company::findOrFail($data->id);
$docs = array();
$files = $request->file('file');
if($files){
foreach($files as $file) {
$fileName = time().rand(100000,999999).'_'.$data->id.'.'.$file->extension();
$docs[] = $fileName;
$file->move(public_path('company'), $fileName);
}
}
$newData->doc = !empty($result) ? serialize($result) :'';
$newData->updated_at = date('Y-m-d H:i:s');
$newData->save();
}
}
catch(\Exception $e)
{
return redirect()->back()->with('error',$e->getMessage());
}
}
// I Also used this
$input_data = $request->all();
$validator = Validator::make(
$input_data, [
'files.*' => 'required|mimes:jpg,jpeg,png,bmp|max:20000'
],[
'files.*.required' => 'Please upload an image',
'files.*.mimes' => 'Only jpeg,png and bmp images are allowed',
'files.*.max' => 'Sorry! Maximum allowed size for an image is 20MB',
]
);
if ($validator->fails()) {
// Validation error..
}
var i = 1;
jQuery("#addRow").click(function () {
var html = '';
var scr = '';
html += '<div id="addedRow" class="form-row mb-4">';
html += '<div class="form-group col-md-4">';
html += '<label for="filename[' + i + ']">File type</label>';
html += '<span class="text-danger">*</span>';
html += '<select class="form-control" id="filename' + i + '" name="filename[' + i + ']" required><option selected="selected" value="">Select file type</option><option value="claim">Claim</option><option value="reimbursements">Reimbursements</option><option value="policy">Policy</option><option value="ecards">Ecards</option><option value="data">Data</option><option value="others">Others</option></select>';
html += '<span class="badge">';
html += '<small id="sh-text4" class="form-text mt-0">Select the file type you are uploading/linking</small>';
html += '</span>';
html += '</div>';
html += '<div id="Other' + i + '" class="form-group col-md-4">';
html += '<label for="other[' + i + ']">Specify file type</label> <span class="text-danger">*</span>';
html += '<input class="form-control" placeholder="Specify the file type" name="other[' + i + ']" type="text" id="other[' + i + ']" >';
html += '<span class="badge">';
html += '<small id="sh-text4" class="form-text mt-0">Specify the file type as you selected the file as "Other"</small>';
html += '</span>';
html += '</div>';
html += '<div id="upload' + i + '" class="form-group col-md-4">';
html += '<label for="upload[' + i + ']">Upload file</label>';
html += '<span class="text-danger">*</span>';
html += '<input class="form-control" name="upload[' + i + ']" type="file" id="upload[' + i + ']" required>';
html += '<span class="badge">';
html += '<small id="sh-text4" class="form-text mt-0">Upload the file | Formats allowed: <strong>PDF, DOC, ZIP, JPG, PNG GIF and Excel</strong></small></span>';
html += '</div>';
html += '<div class="form-group col-md-4" style="padding-top: 30px;">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
html += '</div>';
html += '</div>';
jQuery('#newRow').append(html);
scr += '<script';
scr += '>$(document).ready(function(){ $("#filename' + i + '").change(function () { if ($(this).val() === "others") {$("#Other' + i + '").show(); document.getElementById("other[' + i + ']").required=true}else{ $("#Other' + i + '").hide(); document.getElementById("other[' + i + ']").required=false;}}); $("#Other' + i + '").hide(); }); </';
scr += 'script>';
jQuery('#newScript').append(scr);
i++;
});
// remove row
jQuery(document).on('click', '#removeRow', function () {
i--;
$(this).closest('#addedRow').remove();
});
This is how I have implemented this in my project you can see there is a variable that you need to pass here
<input type="file" name="files['+i+']" class="form-control" />;
You have to increase the value of i once the row is added
I've got a form which currently works as a single line allowing different input fields based on the Production drop down.
i.e. If you choose CPE or CPM you get the inputs for Impressions and Targeting. If you choose Eggs2Go then you only get Impressions.
While this works so far, if I add a line and use the drop down menu it affects the first ID tag changing that line and not the new lines options.
function showTargetCheck(that) {
if (that.value == "CPM" || that.value == "CPE" || that.value == "SWIFT") {
document.getElementById("showTarget").style.display = "block";
document.getElementById("showImpressions").style.display = "none";
}
else if (that.value == "EGGS") {
document.getElementById("showImpressions").style.display = "block";
document.getElementById("showTarget").style.display = "none";
}
else {
document.getElementById("showTarget").style.display = "none";
document.getElementById("showImpressions").style.display = "none";
}
}
Is there a way I can give an auto increment to each new line so that the showTarget and ShowImpressions act individually?
Details in the fiddle
You can't repeat ID's in a page, they must be unique by definition.
The common approach to repeating rows like this is to use common classes for like elements and isolate instances within your event handlers by looking up to parent row element and then looking inside that specific row for needed elements
Assume we change all the repeating ID's to same class name you would then do something like the following in jQuery
$('#tableContainer').on('change', 'select', function(e){
// get row instance starting from `this`
var $row = $(this).closest('.tableRow'),
currVal = $(this).val(),
// flags for toggling various classes
showImpressions = false,
showTarget = false;
if (currVal == "CPM" || currVal == "CPE" || currVal == "SWIFT") {
showTarget = true;
}
// other conditionals to set flags based on other values
// now toggle display of instances of classes within row instance
$row.find('.showTarget').toggle(showTarget);
$row.find('.showImpressions').toggle(showImpressions);
});
As mentioned by charlietfl, ids are unique.
Using your existing coding format
Change all id to class
Find the second parentNodes of your select tag
Once the main parentNode is Found, find your siblings input boxes that you need to change
Snippet below
/*
New IO Line
*/
$('#addNewIOLine').click(function() {
$('#IOLine').append(
'<div class="tableRow">' +
'<div class="tableLeft">' +
'<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<select name="products" onchange="showTargetCheck(this);">' +
'<option>Select one</option>' +
'<option disabled>---</option>' +
'<option value="PRODUCTION">Production</option>' +
'<option value="CPE">CPE</option>' +
'<option value="CPM">CPM</option>' +
'<option value="SWIFT">Swift</option>' +
'<option value="EGGS">Eggs2Go</option>' +
'</select>' +
'</div>' +
'<div class="showImpressions" style="display: none;">' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
'<div class="showTarget" style="display: none;">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="Targeting">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="rates">' +
'</span>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="grosscost">' +
'</span>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="netcost">' +
'</span>' +
'</div>' +
'<div class="tableRight">' +
'<input type="text" placeholder="Notes" class="notes">' +
'</div>' +
'</div>');
});
#tableContainer {
display: table;
}
.tableRow {
display: table-row;
}
.tableLeft,
.tableRight,
.tableMiddle {
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showTargetCheck(that) {
if (that.value == "CPM" || that.value == "CPE" || that.value == "SWIFT") {
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "block";
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "none";
} else if (that.value == "EGGS") {
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "block";
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "none";
} else {
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "none";
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "none";
}
}
</script>
<!-- IO Table -->
<div id="tableContainer">
<!-- IO Row -->
<div class="tableRow">
<!-- Start Date -->
<div class="tableLeft">
<h4>Start</h4>
<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">
</div>
<div class="tableMiddle">
<h4>End</h4>
<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">
</div>
<!-- End Date -->
<!-- Products -->
<div class="tableMiddle">
<h4>Products</h4>
<select name="products" onchange="showTargetCheck(this);">
<option>Select one</option>
<option disabled>---</option>
<option value="PRODUCTION">Production</option>
<option value="CPE">CPE</option>
<option value="CPM">CPM</option>
<option value="SWIFT">Swift</option>
<option value="EGGS">Eggs2Go</option>
</select>
</div>
<!-- Products -->
<!-- Show Impressions Only -->
<div class="showImpressions" style="display: none;">
<div class="tableMiddle">
<h4>Impressions</h4>
<input type="number" placeholder="1000" class="imps">
</div>
</div>
<!-- Show Impressions Only -->
<!-- Show Targeting & Impressions -->
<div class="showTarget" style="display: none;">
<div class="tableMiddle">
<h4>Targeting</h4>
<input type="text" placeholder="Targeting">
</div>
<div class="tableMiddle">
<h4>Impressions</h4>
<input type="number" placeholder="1000" class="imps">
</div>
</div>
<!-- Show Targeting & Impressions -->
<!-- Rates -->
<div class="tableMiddle">
<h4>Rate</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="rates">
</span>
</div>
<!-- Rates -->
<!-- Gross Cost -->
<div class="tableMiddle">
<h4>Gross</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="grosscost">
</span>
</div>
<!-- Gross Cost -->
<!-- Net Cost -->
<div class="tableMiddle">
<h4>Net</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="netcost">
</span>
</div>
<!-- Net Cost -->
<!-- Notes -->
<div class="tableRight">
<h4>Notes</h4>
<input type="text" placeholder="Notes" class="notes">
</div>
<!-- Notes -->
</div>
<!-- IO Row -->
</div>
<!-- ADD NEW IO LINE -->
<div id="IOLine"></div>
<button type="button" id="addNewIOLine">+ Add New Line</button>
<!-- ADD NEW IO LINE -->
(Posted on behalf of the OP).
Working version here if anyone needs the reference:
/*
Toggle Impressions and Targeting Fields
*/
$('#tableContainer').on('change', 'select', function(e) {
// get row instance starting from `this`
var $row = $(this).closest('.tableRow'),
currVal = $(this).val(),
showImpressions = true,
showTarget = true,
showDefault = true;
if (currVal == "CPM" || currVal == "CPE" || currVal == "SWIFT") {
showTarget = true;
showImpressions = false;
showDefault = false;
} else if (currVal == "EGGS") {
showImpressions = true;
showTarget = false;
showDefault = false;
} else if (currVal == "DEFAULT" || currVal == "") {
showDefault = true;
showTarget = false;
showImpressions = false;
}
// other conditionals to set flags
// now toggle instances of classes within row
$row.find('.showTarget').toggle(showTarget);
$row.find('.showImpressions').toggle(showImpressions);
$row.find('.showDefault').toggle(showDefault);
});
/*
New IO Line
*/
$('#addNewIOLine').click(function() {
$('#IOLine').append(
'<div class="tableRow">' +
/* DATES */
'<div class="tableLeft">' +
'<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
/* PRODUCTS */
'<div class="tableMiddle">' +
'<select name="products">' +
'<option value="DEFAULT">Production</option>' +
'<option value="CPE">CPE</option>' +
'<option value="CPM">CPM</option>' +
'<option value="SWIFT">Swift</option>' +
'<option value="EGGS">Eggs2Go</option>' +
'</select>' +
'</div>' +
/* Show Default */
'<div class="showDefault">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="N/A" disabled>' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="N/A" class="imps" disabled>' +
'</div>' +
'</div>' +
/* Show Impressions Only */
'<div class="showImpressions">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="N/A" disabled>' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
/* Show Targeting & Impressions */
'<div class="showTarget">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="Targeting">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
/* RATES */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="rates">' +
'</span>' +
'</div>' +
/* GROSS COST */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="grosscost">' +
'</span>' +
'</div>' +
/* NET COST */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="netcost">' +
'</span>' +
'</div>' +
/* NOTES */
'<div class="tableRight">' +
'<input type="text" placeholder="Notes" class="notes">' +
'</div>' +
'</div>');
});
http://jsfiddle.net/16godohe/9/.
All else is working fine
jQuery:
$(".edit").click(function()
{
var user_id=$(this).attr('id');
var options = '';
$.getJSON("do_find_courses.php",{user_id:user_id}, function(data){
for (var i = 0; i < data.length; i++) {
if(data[i].optionDisplay=="No File Categories")
{
options = '<option disabled="disabled" selected="selected">No products</option>';
}
else
{
options +=' <input name="' + data[i].optionValue + '" type="checkbox" value="' + data[i].optionDisplay + '" />'+ data[i].optionDisplay +'<br>';
//options += '<option value="' + data[i].optionValue + '">' + data[i].optionDisplay + '</option>';
}
}
$("#chkbox"+user_id).slideToggle( "slow" ).html(options);
//$("#chkbox"+user_id).html(options);
});
return false;
});
php code generated for the a href
<?php
$get_students=mysql_query("SELECT user_id ,surname,name, admin FROM users WHERE users.admin=0 ORDER BY users.surname ASC") or die(mysql_error());
while($row=mysql_fetch_array($get_students))
{
echo'
<tr>
<td><h3>'.$row['surname'].'</h3></td>
<td>'.$row['name'].'</td>
<td><div id="chkbox'.$row['user_id'].'"></div></td>
<td>Delete
Edit</td>
</tr>';}
?>
$(document).ready(function{
$(".edit").unbind('click');
$(".edit").click(function(){ bla bla bla});
});
In form, I will be adding product info in. looping name eg. pname1, pname2 when add.
I realise now that when i wanna send to email we need the 'name'. what code should i put on php file to loop the pname?
noted: my form and php code is not in the same file.
or i should put them together and click to loop?
Php file put this?
<?php
$x=1;
while($x<=10)
{
echo "The number is: $x <br>";
echo ;
$x++;
}
?>
form in html
<div class="" id="" name="productlist"> <!-- Add Product Here -->
<ol><input class="fpname" type="text" id="addpname"placeholder="Product Name"/><input class="fpqty" type="number" id="addpqty" placeholder="Quantity"/><input class="fpprice" type="text" id="addpprice" placeholder="Price per Item"/><input type="button" id="padd" value="add"/>
</br><font color="red" size="1.5"><i>*Becareful when adding the Product, once added you are unable to edit the information except changing the quantity.</i></font>
</ol>
<ol id="addhereform"><input type="text" class="fpname" value="Product Name" readonly/><input class="fpqty" type="text" id="pqty" value="Quantity" readonly/><input type="text" class="fpprice" value="Total Price" readonly/>
</ol>
<ol><input class="fpname" id="fpships" type="text" Value="" readonly/><input class="fpqty" id="overallqty" type="text" value="" readonly/><input class="fpprice" type="text" id="overallprice" value="" readonly/>
</ol> <!-- Result -->
</div> <!-- Add Product End Here -->
jquery add button
var count = 1;
$('#padd').click(function(){
var pname = $('#addpname').val();
var pqty = $('#addpqty').val();
var pprice = $('#addpprice').val();
var totalpprice = (pqty * pprice).toFixed(2);
$('#addhereform').append('<li><input class="fpname" type="text" id="pname" name="pname' + count + '" value="' + pname + '" readonly/><input class="fpqty" type="number" id="pqty" name="pqty' + count + '" value="' + pqty + '"/><input type="text" id="pprice" name="pprice' + count + '" value="' + pprice + '" readonly hidden/><input class="fpprice" type="text" id="totalpprice" name="totalpprice' + count + '" value="' + totalpprice + '" readonly/><input type="button" id="premove" value="X"/></li>').before('</li>');
count++;
});
Ans:
$name1 = $_POST["name1"];
$name2 = $_POST["name2"];
$name3 = $_POST["name3"];
# and so on...
for($i = 1; $i <=5; $i++){
$productlist = ${'name' . $i};
echo $productlist;}
Thanks for everyones help,
Here's another method(better) I just found. no need to type all the super long loop way.
Stristr is find name keyword.
if($_POST){
foreach($_POST as $key => $value){
if(stristr($k, 'pname')){
echo "$v";
}
if(stristr($k, 'pqty')){
echo "$v";
}
if(stristr($k, 'pprice')){
echo "$v";
}
if(stristr($k, 'ptotalprice')){
echo "$v</br>";
}
}
}
I've never really heard of something this simple working in every browser, but firefox, so can anyone shed some light on this?
reply
and
jQuery:
var nameForm;
function quoteMe(commenterName, id, name) {
if (name == "")
nameForm = 'Name: <input type="text" class="input" name="username" value="" />'
else
nameForm = '<div class="outlineTitle2">'+name+'</div>'+'<input type="hidden" class="input" name="username" value="'+name+'" />'
if (jQuery("#replyForm"+id).length == 0) {
jQuery("#"+id).append('<form method="post" id="replyForm'+id+'"><br /><input type="hidden" name="cid" value="'+id+'" /><input type="hidden" name="nameOfTable" value="articles" />'+nameForm+'<br />Reply: <input type="text" class="input" name="commentReply" value="'+commenterName+'" style="width:80%" /><input type="submit" value="POST" name="addReply" class="bigButton" /></form>');
}
else {
jQuery("#replyForm"+id).remove();
}
}
More updates below under first answer.
http://cl.ly/082z3g04381G3r1i2e08
Try to replace quoteMe by alert and see what happens.If an alert pops up, it means you have a problem in your function.
The inline events work fine on Firefox too, here is common call I use:
label
even shorter:
label
if you use href="#", you need to return false at the onclick call, otherwise, the hash key will change in the address bar. It can be annoying, especially in ajax based apps.
it is often useful to pass to the function this, it will give you the reference to the clicked <a>. You don't have to play with id's to find it back.
You can't put a form as a child of a table element. Either use the table's parent node, or add a cell.
(For reference, a properly indented version of the source:
var nameForm;
function quoteMe(commenterName, id, name) {
if (name == "") {
nameForm = 'Name: <input type="text" class="input" name="username" value="" />'
}
else {
nameForm = '<div class="outlineTitle2">' + name + '</div>' +
'<input type="hidden" class="input" name="username" value="' + name + '" />'
}
if (jQuery("#replyForm" + id).length == 0) {
jQuery("#" + id).append('<form method="post" id="replyForm' + id + '">' +
'<br />' +
'<input type="hidden" name="cid" ' +
' value="' + id + '" />' +
'<input type="hidden" name="nameOfTable" ' +
' value="articles" />' +
nameForm + '<br />' +
'Reply: <input type="text" class="input" ' +
' name="commentReply" ' +
' value="' + commenterName + '"' +
' style="width:80%" />' +
'<input type="submit" value="POST" ' +
' name="addReply" class="bigButton" />' +
'</form>');
}
else {
jQuery("#replyForm" + id).remove();
}
}
).