I have a form with multiple checkboxes and a button, by default the button will be disable but after checking at least 2 or more than 2 checkboxes, the button should become active. How can i do this in javascript. code is
<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|9' id="A8" />
<label for="A8">A8</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|6' id="A7" />
<label for="A7">A7</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|5' id="A6" />
<label for="A6">A6</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|4' id="A5" />
<label for="A5">A5</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|3' id="A4" />
<label for="A4">A4</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
<label for="A3">A3</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
<label for="A2">A2</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
<label for="A1">A1</label>
</td>
</tr>
</table>
<button type="submit" name="next" />
</form>
Try below JQuery snippet;
<script type="text/javascript">
$(document).ready(function () {
$(":checkbox").click(function () {
var n = $("input:checked").length;
if (n < 2) {
$("button").attr("disabled", "disabled");
}
else {
$("button").removeAttr("disabled");
}
});
});
</script>
You can do it in this way.
window.onload = function() {
var arrCheckbox = document.getElementsByName('seatdata[]');;
arrCheckbox = Array.prototype.slice.call(arrCheckbox);
arrCheckbox.forEach(function(oneCheckbox, key) {
oneCheckbox.onchange = function() {
var intCheckedLength = document.querySelectorAll('input[name="seatdata[]"]:checked').length;;
if (intCheckedLength >= 2) {
document.getElementById("next").removeAttribute('disabled');
} else {
document.getElementById("next").setAttribute('disabled', true);
}
}
})
}
I have given id next to submit button
<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
</tr>
</table>
<button id = "butId" type="submit" name="next">
</form>
<script>
$(document).ready(function(){
$('#butId').attr("disabled","disabled");
}
function checkUncheck(obj){
var count = 0;
if(obj.value != 1){
$('#'+obj.id).val(1);
count+=1;
}else{
$('#'+obj.id).val(0);
}
var allCheck = document.getElementsByName('seatdata[]');
for(var i=0;i<allCheck.length;i++){
if(allCheck[i].value == 1){
count+=1;
}
if(count >= 2){
$('#butId').removeAttr("disabled");
}else{
$('#butId').attr("disabled","disabled");
}
}
}
</script>
<script>
var count;
function checkseat()
{
count = $('input[type="checkbox"][name="seatdata[]"]:checked').length;
alert(count);
if(count > 2)
{
$("#next").removeAttr("disabled");
}
else
{
$("#next").attr("disabled", true);
}
}
Add id="next" disabled to submit and add onChange="checkseat()" to each checkbox named as seatdata[]
First, you want to change your button so it starts disabled and add an id:
<button type="submit" name="next" disabled id="enable-on-two" >Stuff</button>
Next, write a function to count the number of selected checkboxes:
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
Then, write your event handler to actually change the state of the button:
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
}
Finally, bind that event handler to your whole form, since the individual change events from the checkboxes will bubble up:
document.getElementById('world').addEventListener('change', onChange, false);
Here's a fiddle demonstration: https://jsfiddle.net/wphgs09r/
var checkboxes = $('[type="checkbox"]')
checkboxes.change(() => {
$("button").prop( "disabled", checkboxes.filter(":checked" ).length >= 2 ? false : true )
})
Related
when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.I have append a table on click function, but i want to stop append when i click fourth time on button and also change the color of table at that time
I am new in coding..please help me!
<script>
function yesnoCheck(that) {
if (that.value == "single") {
document.getElementById("first").style.display = "block";
$("#dynamic-forms").empty();
document.getElementById("dynamic-forms").style.display = "none";
document.getElementById("t1").value = "";
$("#dynamic-forms").empty();
document.getElementById("t2").value = "";
$("#dynamic-forms").empty();
document.getElementById("t3").value = "";
$("#dynamic-forms").empty();
document.getElementById("t4").value = "";
$("#dynamic-forms").empty();
document.getElementById("t5").value = "";
$("#dynamic-forms").empty();
document.getElementById("t6").value = "";
$("#dynamic-forms").empty();
document.getElementById("formButton").value = "";
// document.getElementById("form1").value = "clear";
// this.removeparent(form.firstElementChild);
}
else {
document.getElementById("first").style.display = "none";
}
if (that.value == "multiple") {
document.getElementById("second").style.display = "block";
}
else {
document.getElementById("second").style.display = "none";
}
}
// $(document).ready(function () {
$(document).on("click","#tbl1",function (click) {
click.preventDefault();
this.parentElement.remove();
})
$(document).ready(function () {
$("#formButton").click(function () {
// document.form1.style.backgroundColor = 'salmon';
// event.target.style.backgroundColor = 'salmon';
// form1.style.backgroundColor = 'coral';
document.getElementById("dynamic-forms").style.display = "block";
// form1.style.backgroundColor = 'coral';
$("#dynamic-forms").append(
`
<form id="form1" style="margin-bottom:10px;margin-top:10px">
<button style="float:right; margin-right:400px;" type="button1" id="tbl1" value="clear">-</button>
<table style="background-color: #91c8e3;">
<tr>
<td id="location">Location
<input type="text" value="`+$("#pan").val()+`">
</td>
<td>P1
<input type="text">
</td>
</tr>
<tr>
<td>P2
<input type="text">
</td>
<td>P3
<input type="text">
</td>
</tr>
<tr>
<td>Sometime
<input type="text">
</td>
<td>Full day
<input type="text">
</td>
</tr>
</table>
</form>
`
)
$("#pan").val("");
});
});
jQuery(function ($) {
function copyForms($pan, $location) {
$(':input[name]', $location).val(function () {
return $(':input[name=' + this.name + ']', $pan).val();
});
}
$('#pan').on('click', function () {
copyForms($('#pan'), $('#location'));
});
});
</script>
</head>
<body style="background-color: #0979ad; ">
<br><br>
<center>
<div>
<select id="selector" onchange="yesnoCheck(this);">
<option value="select">__Select__</option>
<option value="single">Single</option>
<option value="multiple">Multiple</option>
</select>
</div>
</center>
<br><br>
<center>
<div id="first" style="display: none;">
<table id="tbl" style="background-color: #225670ad;">
<tr>
<td>Location
<input id="t1" type="text">
</td>
<td>P1
<input id="t2" type="text">
</td>
</tr>
<tr>
<td>P2
<input id="t3" type="text">
</td>
<td>P3
<input id="t4" type="text">
</td>
</tr>
<tr>
<td>Sometime
<input id="t5" type="text">
</td>
<td>Full day
<input id="t6" type="text">
</td>
</tr>
</table>
</div>
</center>
<center>
<div id="second" style="display:none;">
<label>Location</label>
<input type="text" id="pan" name="pan">
<button type="button" id="formButton">+</button>// when click on this button
</div>
</center>
<br><br><br>
<center id="dynamic-forms">
</center> <br><br>
</body>
</html>
Hello,I am new in coding and this is my code i want to change my table color repeatedly on click function
when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.
check this resssources:
How do you get random RGB in Javascript?
https://sebhastian.com/jquery-change-background-color/
A new row is dynamically creating on clicking "add Row" button through function in jQuery.
But when I select radio input in new row then selected value of previous radio input is removing.
Please run and see the codes as below:
enter image description here
function add_row(table_row_count)
{
$("#add-row_"+table_row_count).hide();
$("#delete-row_"+table_row_count).hide();
var table_row_count = parseInt(table_row_count);
table_row_count += 1;
var markup =
'<tr id="tbl_row_'+table_row_count+'" >'+
'<td><label>'+table_row_count+'</label></td>'+
'<td>'+
'<label>Value in Range? :</label>'+
'<input type="radio" name="option" id="option_1_row_'+table_row_count+'" value="1" > YES'+
'<input type="radio" name="option" id="option_2_row_'+table_row_count+'" value="2" > NO'+
'</td>'+
'<td id="capacity_from_row_'+table_row_count+'" >'+
'<label>Range From :</label><br>'+
'<input type="text" name="capacity_from[]" id="capacity_from_'+table_row_count+'" />'+
'</td>'+
'<td>'+
'<label id="lbl_capacity_range_'+table_row_count+'" >Range Upto :</label><br>'+
'<input type="text" name="capacity_upto[]" id="capacity_upto_'+table_row_count+'" />'+
'</td>'+
'<td class="align-middle"></i> Add Row</td>'+
'<td class="align-middle"></i> Delete Row</td>'+
'</tr>';
var table = $("#tbl_details tbody");
table.append(markup);
}
function delete_row(table_row_count)
{
var r = confirm("Are you sure to delete row");
if(r == false){
return;
}
var table_row_count = parseInt(table_row_count);
var previous_row = table_row_count - 1;
$("#add-row_"+previous_row).show();
if(previous_row != 1){
$("#delete-row_"+previous_row).show();
}
$("#tbl_row_"+table_row_count).remove();
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h3>Enter Details</h3>
<table class="table table-striped" id="tbl_details">
<tbody>
<tr id="row_1">
<td>1.</td>
<td>
<label>Value in Range? :</label>
<input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
<input type="radio" name="option" id="option_2_row_1" value="2" > NO
</td>
<td id="capacity_from_row_1" >
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_1" />
</td>
<td>
<label id="lbl_capacity_range_1" >Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_1" />
</td>
<td class="align-middle"></i> Add Row</td>
<td class="align-middle"></td>
</tr>
</tbody>
</table>
</body>
</html>
How to solve the issue. kindly help me.
Thanks in advance.
Different radio button groups are created when the name attribute of the radio buttons is different. Also, in the solution below, I made it easier to express dynamic content by using template literals.
Note the following statement in the dynamic element written into the markup variable in the add_row() method:
<input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
<input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO
/* This variable will be used to create new radio button groups. */
let counter = 0;
function add_row(table_row_count) {
$("#add-row_"+table_row_count).hide();
$("#delete-row_"+table_row_count).hide();
var table_row_count = parseInt(table_row_count);
table_row_count += 1;
/* With each iteration, the content of the counter variable is incremented. */
++counter;
var markup =
`<tr id="tbl_row_${table_row_count}">
<td>
<label>${table_row_count}</label>
</td>
<td>
<label>Value in Range? :</label>
<!-- Note the name="option${counter}" statement so that the radio buttons have different groups. -->
<input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
<input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO
</td>
<td id="capacity_from_row_${table_row_count}">
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_${table_row_count}"/>
</td>
<td>
<label id="lbl_capacity_range_${table_row_count}">Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_${table_row_count}"/>
</td>
<td class="align-middle">
<a href="javascript:void(0)" class="text-success add-row" id="add-row_${table_row_count}" onClick="add_row('${table_row_count}');" >
<i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row
</a>
</td>
<td class="align-middle">
<a href="javascript:void(0)" class="text-danger delete-row" id="delete-row_${table_row_count}" onClick="delete_row('${table_row_count}');" >
<i class="fa fa-trash fa-lg text-danger" aria-hidden="true"></i> Delete Row
</a>
</td>
</tr>`
var table = $("#tbl_details tbody");
table.append(markup);
}
function delete_row(table_row_count) {
var r = confirm("Are you sure to delete row");
if(r == false){
return;
}
var table_row_count = parseInt(table_row_count);
var previous_row = table_row_count - 1;
$("#add-row_"+previous_row).show();
if(previous_row != 1){
$("#delete-row_"+previous_row).show();
}
$("#tbl_row_"+table_row_count).remove();
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h3>Enter Details</h3>
<table class="table table-striped" id="tbl_details">
<tbody>
<tr id="row_1">
<td>1.</td>
<td>
<label>Value in Range? :</label>
<input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
<input type="radio" name="option" id="option_2_row_1" value="2" > NO
</td>
<td id="capacity_from_row_1" >
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_1" />
</td>
<td>
<label id="lbl_capacity_range_1" >Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_1" />
</td>
<td class="align-middle"></i> Add Row</td>
<td class="align-middle"></td>
</tr>
</tbody>
</table>
</body>
</html>
This is happening because you are using the same name for radio button. And it is default behavior of radio that if you are using the same name for radio button then only one can be selected at time.
For Example
1.) If you have two radios with same name
Only one value can be selected at a time.
2.) Now after adding another row your code will look like
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/>
name is same for all radio buttons so only one will be selected at a time.
Fix:
In order to fix this issue while adding new row append row number in front of name. That will fix the issue like you did for id attribute.
'<td>'+
'<label>Value in Range? :</label>'+
'<input type="radio" name="option_'+table_row_count+'" id="option_1_row_'+table_row_count+'" value="1" > YES'+
'<input type="radio" name="option_'+table_row_count+'" id="option_2_row_'+table_row_count+'" value="2" > NO'+
'</td>'+
Fixing this will fix the issue.
*** Change dynamic radio input name. here, your code create all dynamic radio input with the same name. ***
Allow button should be disabled only if all boxes are checked. How do I do it? I have done the HTML part as given below. How to do the logic part of it?Allow button should be disabled even if one box is unchecked
<form role="form" action="{{{basePath}}}/consent" method="post">
<table style="width:100%;
border-collapse: collapse;">
<tr style="border-collapse: collapse;">
<td> <span>
<span style="color: #111;"><b>Open</b></span><span style="color: #0078bf;"><b>Bank</b></span>
</span></td><td>Account Information</td>
<td><input type="checkbox" name="information" value="info" checked></td>
</tr>
<tr style="border-collapse: collapse;">
<td> <span>
<span style="color: #111;"><b>Open</b></span><span style="color: #0078bf;"><b>Bank</b></span>
</span></td>
<td>Account Balance</td>
<td><input type="checkbox" name="balance" value="bal" checked></td>
</tr>
<tr style="border-collapse: collapse;"> <td> <span>
<span style="color: #111;"><b>Open</b></span><span style="color: #0078bf;"><b>Bank</b></span>
</span></td>
<td>Account Transactions</td>
<td><input type="checkbox" name="transaction" value="trans" checked></td>
</tr>
</table>
</div>
{{#if scopes}}
<!--<ul class="list-group">
{{#each scopes}}
<li class="list-group-item">{{this}}</li>
{{/each}}
</ul>-->
<script type="text/javascript">
$('#account-selector').change(function(){
console.log(this.value);
//console.log(accounts[this.value].amount);
})
</script>
<br><label style="margin-left:25%;" class="account-select">Please select an account</label><br>
<select style="width:100%;" class="dropbdown" id="account-selector" required name="account_number">
<option selected="selected" disabled="disabled">--Select an Account--</option>
{{#each accounts}}
<option value="{{this.account_number}}">{{this.label}} ({{this.account_number}})</option>
{{/each}}
</select>
<br>
<span id="amount-balance"></span>
{{else}}
<h3>The application does not require any permissions.</h3>
{{/if}}
{{#if to}}
<div class="panel panel-default">
<div class="panel-body">
<div>I agree to transfer <strong>{{amount}} GBP</strong> to account number: <strong>{{to}}</strong></div>
</div>
</div>
{{/if}}
{{#if tnc}}
<p>I agree to the Terms and conditions</p>
{{/if}}
<br><p>By clicking <strong>Allow</strong>, you will allow <strong>Accenture AISP</strong> and <strong>OpenBank</strong> to use your information in accordance with their respective terms of service and privacy policy for 90 days.
</p>
<div class="consent-button">
<button type="submit" name="allow" value="allow" class="btn btn-primary grass-btn" style="width:48%">Allow</button>
<button type="submit" name="deny" value="deny" class="btn btn-primary grass-btn" style="width:48%">Cancel</button>
</div>
</form>
$(document).ready(function () {
$(":checkbox").change(function () {
debugger;
var all_checked;
$(":checkbox").each(function () {
if (this.checked) {
all_checked = true;
}
else {
all_checked = false;
return false;
}
})
if(all_checked)
{
//enable your button here
}
else
{
//disable your button here
}
})
})
here whenever a checkbox is getting checked or unchecked it will check for all checkbox type input and then if any of them is unchecked it will give false in "all_checked" variable
There be an more result for your search in the stack overflow refer it.here one of the result
<input type="button" class="check" value="Check All" />
<input type="button" class="delete" value="allow" disabled />
<br/>
<input type="checkbox" class="cb-element" value="1" />Checkbox 1
<br/>
<input type="checkbox" class="cb-element" value="2" />Checkbox 2
<br/>
<input type="checkbox" class="cb-element" value="3" />Checkbox 3
<br/>
$('.check:button').click(function () {
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$('.delete:button').prop('disabled', !checked)
$(this).data('checked', checked);
if (checked == true) {
$(this).val('Uncheck All');
} else if (checked == false) {
$(this).val('Check All');
}
});
$('input:checkbox').change(function () {
$('.delete:button').prop('disabled', $('input:checkbox:checked').length < 3)
})
$('.delete:button').click(function () {
var array = $('input:checkbox:checked').map(function () {
return this.value
}).get();
console.log(array, array.join())
})
This will work fine for you
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(":checkbox").change(function () {
debugger;
var all_checked;
$(":checkbox").each(function () {
if (this.checked) {
all_checked = true;
}
else {
all_checked = false;
return false;
}
})
if (all_checked) {
//enable your button here
$("#bttn_submit").prop("disabled", false)
}
else {
//disable your button here
$("#bttn_submit").prop("disabled", "disabled")
}
})
})
</script>
<form action="/action_page.php" method="get">
<input type="checkbox" name="vehicle" value="Bike" checked> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input id="bttn_submit" type="submit" value="Submit">
</form>
</html>
I have a repeating table with a hidden row and when clicking the a checkbox I have the row appearing, however when adding more than one table the same row always appears instead of the row that has just been cloned. I would appreciate any help with this.
My code looks like the following:
HTML:
<table class="repeatingTable">
<tr>
<td>
<label for="name">Name</label>
</td>
<td>
<input type="text" name="name" id="InputName" class="InputID_1" />
</td>
<td>
<label for="req">Required</label>
</td>
<td>
<input type="checkbox" name="req" id="CheckBox" class="ChexkBox_1" readonly="readonly" />
</td>
</tr>
<tr id="HiddenFields" class="HiddenFields_1">
<td>
<label for="Box">Box Number</label>
</td>
<td>
<input type="number" name="Box" id="InputBoxNo" class="InputBoxNo_1" readonly="readonly" />
</td>
<td>
<label for="id">ID Number</label>
</td>
<td>
<input type="number" name="id" id="inputNo" class="InputNo_1" />
</td>
</tr>
</table>
<div class="expensesBtns">
<input id="repeatingBtn" type="button" value="Add Another" />
</div>
Javascript:
document.getElementById("HiddenFields").style.visibility = "hidden";
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
document.getElementById("HiddenFields").style.visibility = "hidden";
}
else {
document.getElementById("HiddenFields").style.visibility = "visible";
}
})
$('#repeatingBtn').click(function (e) {
//$('.expensesSection').clone(false).find("*[id]").andSelf().each(function () {
// $(this).attr("id", $(this).attr("id") + "_cloned");
//})
e.preventDefault();
var lastRepeatingGroup = $('.repeatingTable').last();
var cloned = lastRepeatingGroup.clone(true);
cloned.insertAfter(lastRepeatingGroup);
cloned.find("input").val("");
//resetAttributeNames(cloned);
});
I have a js fiddle here: jsfiddle
Any help is greatly appreciated.
Check your UPDATED FIDDLE.
Worked after some changes in ChexkBox_1 click event, you have to use $(this) instead of document.getElementById("HiddenFields") to deal with current checkbox clicked :
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"hidden");
}
else {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"visible");
}
});
NOTE : when you clone the row you have to change id because element IDs should be unique within the entire document.
So I am making a Greasemonkey script for a mybb forum. What it does is that when you submit a post it adds code to the beginning and the end of the post. Well even though that is a bad explanation just look at the code, it explains itself
function form_submit(event) {
var form = event ? event.target : this;
var arTextareas = form.getElementsByTagName('textarea');
for (var i = arTextareas.length - 1; i >= 0; i--) {
var elmTextarea = arTextareas[i];
elmTextarea.value = "[font=Tahoma][color=white]" + elmTextarea.value + "[/color][/font]";
}
form._submit();
}
window.addEventListener('submit',form_submit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = form_submit;
Now it works everywhere I want it to except the quickreply post reply button. I am assuming this is because the quickreply button uses AJAX to submit the form and the page does not get reloaded.
So I am wondering how I can have it so that when I click the quickreply button it appends the text I want it to. I have searched around for a while and anything that i could find did not work
Also, here is the code for the button that uses ajax(The button that doesn't work with the above code)
<input id="quick_reply_submit" class="button" type="submit" accesskey="s" tabindex="2" value="Post Reply">
And here is where it is located
<!-- start: showthread_quickreply -->
<br />
<form method="post" action="newreply.php?tid=2023403&processed=1" name="quick_reply_form" id="quick_reply_form">
<input type="hidden" name="my_post_key" value="de77ee8401edd4fe176f2c6a3787d411" />
<input type="hidden" name="subject" value="*" />
<input type="hidden" name="action" value="do_newreply" />
<input type="hidden" name="posthash" value="a67ff7b68df0a0951770f7f4a24cce8f" id="posthash" />
<input type="hidden" name="quoted_ids" value="" id="quoted_ids" />
<input type="hidden" name="lastpid" id="lastpid" value="18370730" />
<input type="hidden" name="from_page" value="1" />
<input type="hidden" name="tid" value="2023403" />
<input type="hidden" name="method" value="quickreply" />
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2">
<div class="expcolimage"><img src="http://cdn.myforums.net/images/blackreign/collapse.gif" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>
<div><strong>Quick Reply</strong></div>
</td>
</tr>
</thead>
<tbody style="" id="quickreply_e">
<tr>
<td class="trow1" valign="top" width="22%">
<strong>Message</strong><br />
<span class="smalltext">Type your reply to this message here.<br /><br />
<label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" checked="checked" /> <strong>Signature</strong></label><br />
<label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" /> <strong>Disable Smilies</strong></label></span>
</td>
<td class="trow1">
<div style="width: 95%">
<textarea style="width: 100%; padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea>
</div>
<div class="editor_control_bar" style="width: 95%; padding: 4px; margin-top: 3px; display: none;" id="quickreply_multiquote">
<span class="smalltext">
You have selected one or more posts to quote. Quote these posts now or deselect them.
</span>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="tfoot"><input type="submit" class="button" value="Post Reply" tabindex="2" accesskey="s" id="quick_reply_submit" /> <input type="submit" class="button" name="previewpost" value="Preview Post" tabindex="3" /></td>
</tr>
</tbody>
</table>
</form>
<!-- end: showthread_quickreply -->
You need to show us the javascript that associates itself to that button. If it's AJAX powered, that's the only way to know what it's doing.
That said, this code will probably work:
function form_submit (event) {
var form, bClickNotSubmit;
if (event && event.type == 'click') {
bClickNotSubmit = true;
form = document.getElementById ('quick_reply_form');
}
else {
bClickNotSubmit = false;
form = event ? event.target : this;
}
var arTextareas = form.getElementsByTagName ('textarea');
for (var i = arTextareas.length - 1; i >= 0; i--) {
var elmTextarea = arTextareas[i];
elmTextarea.value = "[font=Tahoma][color=white]" + elmTextarea.value + "[/color][/font]";
}
if ( ! bClickNotSubmit ) {
form._submit();
}
}
window.addEventListener ('submit', form_submit, true);
document.getElementById ('quick_reply_submit').addEventListener ('click', form_submit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = form_submit;
If it doesn't work, save the target page (complete HTML, JS, CSS) to a disk, zip the files together and share the zip -- so that we can see what is happening with that button.