Change Button Text - javascript

I am learning php and want to set the display text for a button that I have. I know that you can use javascript to change the button text,but that (at least from what I have seen) works for .onclick I want the button text to be changed when the page loads. By default the button text on my page when it loads displays Submit Query when my page loads I want the text to read Button on Page
Is there a way using php to 1) set the button text and 2) have it span 2 rows in the table?
This is the code I am working with:
<html>
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td rowspan="2"><input type="submit" name="btn123" text="Button On Page"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

You should use value instead of text for your submit button
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btn123" value="<?php echo 'Button On Page'; ?>" style="width:100%"></td>
</tr>
</table>
</div>
</div>
</form>
</body>

If you always know what you want your button to say, you don't need php or javascript. You can just use the html "value" attribute. You are incorrectly using a attribute labled "text", you should use "value". Update your code to the following.
Change your button html from:
<input type="submit" name="btn123" text="Button On Page">
To:
<input type="submit" name="btn123" value="Button On Page">
Edit:
In order to have your button go full width. You should use "colspan" instead of "rowspan". Your td is in a row, and needs to span columns.
Change this code from:
<td rowspan="2"><input type="submit" name="btn123" value="Button On Page"></td>
to (note that I added an id of "button" to your button):
<td rowspan="2"><input type="submit" id="button" name="btn123" value="Button On Page"></td>
Then add a little css:
#button{
width: 100%;
}
Here is a fiddle with a working example:
https://jsfiddle.net/joeydehnert/m1ttcr86/

Related

how to make a field requried when the checkbox is checked

hello i am new to jsp and javascript, and i would like to a make a field required when the checkbox is checked,
<tr>
<th class="clsTableHeaderLeft">InterCompany</th>
<td class="clsDisplayText">
<% if (!tHideField.equals("")){
out.println(tRecord.get(idxInterComFlag).toString());
}
%>
<input type="checkbox" class="clsInputText" <%=tHideField%> name="txtInterComFlag" onchange="chgStatus(txtStatus);" size="25" maxlength="20"
<%=tRecord.get(idxInterComFlag).toString().equals("Y")?" checked":""%>
/>
</td>
</tr>
<tr>
<th class="clsTableHeaderLeft">Entity Code</th>
<td class="clsDisplayText">
<% if (!tHideField.equals("")){
out.println(tRecord.get(idxInterComCode).toString());
}
%>
<input type="text" class="clsInputText" <%=tHideField%> name="txtInterComCode" size="25" maxlength="20" />
</td>
</tr>
also the checkbox value is 'on' when checked , how can I make it to Y or N? thank you!
I had a same requirement, so i Choose to follow this flow:
Create an onclick function at check box
Get element ID of the html input element that needs to be changed
create new html input element as required and replace it using Java script.
Here is my sample Code:
function fxctco() {
var newHTML="<input type='number' name='fctc' required/>";
document.getElementById("ctc").innerHTML = newHTML;
}
<table><tr><TD ><input type="radio" name="fx"value="YES" onClick="fxctco()"> Yes
<input type="radio" name="fx"value="NO" checked> No</TD></tr>
<tr><TD id="ctc"> <INPUT TYPE="number" NAME="fctc" /></TD></tr>
<tr>
<TD align="center"><INPUT TYPE="submit" class="button" VALUE="submit"></TD>
</tr> </table>

Hide/Display Form Section

I have a table in which five fields have upload rows.Each time, I submit a row,the pages refreshes. However, I want to hide all the 4 rows, when the first submit button is clicked, then it should show the next row, and hide the previous row. This should continue till the last one. I have tried the following, but not working. ie all the rows are displaying. I need assitance on how to achieve this feat.
<script>
$("#othBtn1").click(function(){
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function(){
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});
</script>
This will continue till the last button. See the HTML below:
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
<tr id="oth1">
<th width="26%">Other Request (1):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc1" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt1" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(1):<input type="file" name="jfile1"/></td>
<td width="29%"><input type="submit" name="othBtn1" id="othBtn1" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth2">
<th width="26%">Other Request (2):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc2" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt2" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(2):<input type="file" name="jfile2"/></td>
<td width="29%"><input type="submit" name="othBtn2" id="othBtn2" value="Add to Request" class="btn btn-success" /></td>
</tr>
<tr id="oth3">
<th width="26%">Other Request (3):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc3" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt3" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(3):<input type="file" name="jfile3"/></td>
<td width="29%"><input type="submit" name="othBtn3" id="othBtn3" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth4">
<th width="26%">Other Request (4):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc4" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt4" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(4):<input type="file" name="jfile4"/></td>
<td width="29%"><input type="submit" name="othBtn4" id="othBtn4"value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth5">
<th width="26%">Other Request (5):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc5" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt5" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(5):<input type="file" name="jfile5"/></td>
<td width="29%"></td>
</tr>
</table>
You have a couple of issues.
You are missing a opening bracket for your table <.
You are missing the # in your selector.
Change,
table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
to,
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
and change,
$("#othBtn1").click(function() {
$("#oth2").show();
$("oth1").hide();
$("oth3").hide();
$("oth4").hide();
$("oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("oth1").hide();
$("oth2").hide();
$("oth4").hide();
$("oth5").hide();
});
to,
$("#othBtn1").click(function() {
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});
In your example you missed the # in front of the id selectors.
And you can simple combine everything to a single event listener. No need for doing it manually for each button.
$("#tableRec input[id^=othBtn]").click(function() {
$("#tableRec tr").hide();
$(this).closest("tr").next().show();
});
tr {
display: none;
}
tr:first-child {
display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableRec">
<tr>
<td>1</td>
<td><input type="submit" id="othBtn1" value="Add to Request" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="submit" id="othBtn2" value="Add to Request" /></td>
</tr>
<tr>
<td>3</td>
<td><input type="submit" id="othBtn3" value="Add to Request" /></td>
</tr>
<tr>
<td>4</td>
<td><input type="submit" id="othBtn4" value="Add to Request" /></td>
</tr>
<tr>
<td>5</td>
<td>table end</td>
</tr>
</table>

how to do dynamic divs - expand collapse loop

I need a function that allows my client to add more divs on the form or not, clicking on a button (+) for example, like a loop
this loop should repet divs and the button to add more divs, like bellow on the pic
does anybody has an ideia of how to do it?
is expand collapse the best way of doing it?
Thank you very much!
I am not certain what is your desire so I post both options:
If you want to expand hidden existing fields and asuming you can use JQUery:
<table>
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
<tr class="hiddenarea" style="display: none;">
<th>Field3 (Hidden)</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$(".hiddenarea").toggle();
});
</script>
///////////////////////////////////
The second solution to add a new line to the table is:
<table id="mytable">
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
});
</script>

Storing text box values in temporary table

I have a form that contain ten text boxes for entering some data. That form has a submit button and a next button. When I click on the next button, it has to open again ten text boxes, and has to store previous information into a temporary table in a MySQL database or in any other way. And finally, if I click on the submit button, it has to store that complete information into another permanent MySQL database table.
How can I do this?
This is what I tried so far:
<form name="form2" action="addingstuden_data.jsp" method="POST">
<table align="center">
<th colspan="3" class="style30"><font size="5">Adding Students for<%=stream%>-<%=year3%></th>
</table>
<table align="center" border="1">
<tr>
<td class="heading" align="center" >SNo</td>
<td class="heading" align="center" >Student Id</td>
<td class="heading" align="center">Student Name</td>
</tr>
<%
int i;
for(i=0;i<62;i++)
{
%>
<tr>
<td><input type="text" name="SNo" value="<%=i%>" id="r2" size="1"> </td>
<td><input type="text" name="stdid" id="sid" size="4" value=""> </td>
<td><input type="text" name="stdname" id="sname" value=""> </td>
</tr>
<% } %>
</table>
<table width="100%" class="pos_fixed">
<tr>
<td align="center" class="border"><input type="submit" name="submit" value="submit"> </td>
</tr>
</table>
</form>
Try this, Style it according to your need
<form name="myform" method="POST" action="youraction">
<div id="forms">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
</div>
<input type="button" name="next" value="next" onclick="next()">
<input type="submit" name="submit" value="Submit">
</form>
Javascript code
function next()
{
var ele = document.getElementById('forms');
for(var i=0;i<10;i++)
{
var name = document.createElement("input");
name.setAttribute('type',"text");
name.setAttribute('name',"feilds[]");
ele.appendChild(name);
}
}
On server side loop through feilds[] array and get all the values

How to close the table on click in JavaScript?

I have a table which takes the user details. The code is as follows:
<table id="record" border=1>
<tr>
<td>Emp Name</td>
<td><input type="text" placeholder="Employee Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="Address"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add">
<input type="button" value="Cancel">
</td>
</tr>
</table>
Now, when I click on the Cancel button, the table should close. How can I do this?
Just give the input button an id...
<input type="button" id="close" value="cancel">
Then add some Jquery...(assuming you are using jquery)
$(document).ready(function(){
$('#close').click(function(){$('#record').hide();});
});
DEMO HERE
Or theres the one liner...
<input type="button" value="cancel" onclick="$('#record').hide();">
DEMO 2
EDIT
And....Your request for just pure javascript...
<input type="button" id="close" value="Cancel" onclick=" document.getElementById('record').style.display = 'none';">
DEMO 3

Categories