Wrong id set when using h:selectOneRadio and f:selectItem - html

This is my code:
<h:panelGroup id="deliveryAddress" columns="2">
<h:selectOneRadio id="deliveryAddressRadioGroup" value="#{mybean.deliveryAddress}" layout="pageDirection" onclick="resetTextField()">
<f:selectItem id="pickedUp" itemValue="wird abgeholt (WET B4)" itemLabel="#{msg.subscriptionFormFieldDeliveryAddressPickedUp}"/>
<f:selectItem id="send2OrderingPerson" itemValue="Versand an Bestellenden" itemLabel="#{msg.subscriptionFormFieldDeliveryAddressSend2OrderingPerson}"/>
<f:selectItem id="send2SubscrOwner" itemValue="Versand an Abonnementsbesitzer" itemLabel="#{msg.subscriptionFormFieldDeliveryAddressSend2SubscrOwner}"/>
<f:selectItem id="send2SupportGroup" itemValue="Versand an Support-Gruppe" itemLabel="#{msg.subscriptionFormFieldDeliveryAddressSend2SupportGroup}"/>
</h:selectOneRadio>
</h:panelGroup>
From that I expect that the ids of the single buttons are pickedUp, send2OrderingPerson, send2SubscrOwner and send2SupportGroup. (or at least detailForm:xxx).
Instead, if I look at the resulting code, I get:
<span id="detailForm:deliveryAddress">
<table id="detailForm:deliveryAddressRadioGroup">
<tbody>
<tr>
<td>
<input id="detailForm:deliveryAddressRadioGroup:0" type="radio" onclick="resetTextField()" value="wird abgeholt (WET B4)" name="detailForm:deliveryAddressRadioGroup">
<label for="detailForm:deliveryAddressRadioGroup:0"> will be piched up (WET B4)</label>
</td>
</tr>
<tr>
<td>
<input id="detailForm:deliveryAddressRadioGroup:1" type="radio" onclick="resetTextField()" value="Versand an Bestellenden" name="detailForm:deliveryAddressRadioGroup">
<label for="detailForm:deliveryAddressRadioGroup:1"> send to ordering person</label>
</td>
</tr>
<tr>
<td>
<input id="detailForm:deliveryAddressRadioGroup:2" type="radio" onclick="resetTextField()" value="Versand an Abonnementsbesitzer" name="detailForm:deliveryAddressRadioGroup" checked="checked">
<label for="detailForm:deliveryAddressRadioGroup:2"> send to subscription's owner</label>
</td>
</tr>
<tr>
<td>
<input id="detailForm:deliveryAddressRadioGroup:3" type="radio" onclick="resetTextField()" value="Versand an Support-Gruppe" name="detailForm:deliveryAddressRadioGroup">
<label for="detailForm:deliveryAddressRadioGroup:3"> send to support group</label>
</td>
</tr>
</tbody>
</table>
</span>
What's wrong?

Related

esp32, button onclick Can't find variable: of function

I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.
in the below code,
I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.
Inspector output
const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset='UTF-8'">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="500; url=/">
<title>System Settings</title>
<body onload="show_admin()">
<div class="banner">
<h1>X Controller</h1>
</div>
<div class="split left">
<div class="centered">
These are my button
<button onclick="show_admin()">Admin</button>
<br/>
<button onclick="show_wifi()">WIFI</button>
<br/>
<button onclick="show_tags()">Tags</button>
<br/>
</div>
</div>
<div class="split right">
<div class="centered" id="showdata">
</div>
</div>
</body>
<script>
These are my functions
function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
<form action="/ADMINSetting" method="POST">
<table><tr>
<td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
<td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
<input type="submit" value="Update Admin Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
</body>
</html>
)=====";
I have tried rearranging the function and moving its position. with no luck
Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML.
It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.
I added the below to the html section
<div class="split right">
<div class="centered" id="showdata">
<form id="adminForm">
<table>
<tr>
<td> User Name </td>
<td>
<input type="String" name="UserName" placeholder="%s">
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type="String" name="UserPass" placeholder="%s">
</td>
</tr>
</table>
<input type="submit" value="Update Admin Details">
</form>
and the following to the script section
function admin(){
document.getElementById("wifiForm").style.display="none";
document.getElementById("tagForm").style.display="none";
document.getElementById("adminForm").style.display="block";
}

How to connect two inputs in the same form

I'm doing a form that have a multiple checklist, the user can select whatever they want and they neet to put a date, I already configured the checklist but, How can I connect the input date to the input checkbox because they need to be related to.
Soo my final result should be like:
results [{ 'Tramit1', 'date1' }, { 'Tramit2', 'date2' }];
Here's my current code of the part I'm talking about (because the form is bigger):
<table class="table table-bordered">
<thead>
<tr>
<th> # </th>
<th>Tràmit</th>
<th>Validesa de l'autorització</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let permiso of permisos">
<td id="first">
<div class="form-check form-check-aj">
<label class="form-check-label">
<input (change)="onChange(permiso.nom, $event.target.checked)" type="checkbox" class="form-check-input">
<i class="input-helper"></i></label>
</div>
</td>
<td id="first">{{permiso.nom}}</td>
<td>
<div id="datepicker-popup" class="input-group date datepicker">
<input type="date" id="datePicker{{permiso.id}}" name="bday" />
<span class="input-group-addon input-group-append border-left">
<span class="mdi mdi-calendar input-group-text"></span>
</span>
</div>
</td>
</tr>
</tbody>
</table>

Two HTML inputs with same Id and Name solve dynamically

As you can see i want to have two or more inputs with samo Id and Name, but HTML doesn't allow that, so how can i solve this on some other way and how to make active button change it's color
<table border="0" cellspacing="0" cellpadding = "0" style="font-size:x-small">
<tr valign="bottom" style="height:10px">
<td width="30px" style="vertical-align: top">
</td>
<td width="30px" style="vertical-align: middle" align="center" nowrap="nowrap">
<label style="font-size:small">
Time period</label>
<input type="hidden" id="ReportParameter" value = "1" name="ReportParameter" />
<input class="button" id="showDailyReport" name="searchQueue" type="submit" value="Day" onClick="onClickHandler(this)" />
<input type="hidden" id="ReportParameter" value = "2" name="ReportParameter"/>
<input class="button" id="showWeeklyReport" name="searchQueue" type="submit" value="Week" onClick="onClickHandler(this)" />
</td>
</tr>
</table>
You can define specific class for every button and do the visual changes on that class
ex
<input class="button button-red" id="showDailyReport" name="searchQueue" type="submit" value="Day" onClick="onClickHandler(this)" />

How to add values in asp

I'm a junior in high school in a software engineer and web development class. My issue is i assigned a value to many of my asp control objects; however, i cannot figure out how to add and display their values. Here is my code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="pc.aspx.cs" Inherits="pc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Millennium Computers Online Order Form</title>
<link href="computer.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="c_order" id="c_order" runat="server"
action="pc.aspx" method="post">
<table id="tb1" cellpadding="5" cellspacing="5" border="0" >
<tr>
<!-- Logo and header information -->
<td id="header" style="height: 65px">
<img src="mclogog.jpg" alt="heading" />
</td>
</tr>
<asp:Panel runat="server" ID="frmMillenium" >
<!-- Shipping info -->
<tr>
<td id="specifications">
<fieldset class="spec">
<legend id="bill">Specifications</legend>
<table width="100%" id="specs"> <!-- 100% -->
<tr>
<td><label for="fname" >Frame Color<span>*</span></label></td>
<td><input type="text" name="fname" id="fname" size="27" />
</td>
</tr>
<tr>
<td><label for="address1">Keyboard Color<span>*</span></label></td>
<td><input type="text" name="address1" id="address1" size="57" /></td>
</tr>
<tr>
<td><label for="city">Touchpad Color<span>*</span></label></td>
<td><input type="text" name="city" id="city" size="40" />
</tr>
<tr>
<td colspan="2" id="ast">
* = Required field, must be filled in. <%-- <input id="news" type="checkbox" align="left" /> <label id="news">Check here if you'd like to receive our newsletter</label> --%>
</td>
</td>
</tr>
</table>
</fieldset>
<p id="infotext">About Us</p>
<p id="info">Welcome to Millenium Computers. Our website is designed to allow users to create their own computer. Our job is to make a computer most suited
for you, and accomadate prices as well. We offer many differant computer features with our standard designed model. We have been building computers for over
20 years and we garuntee customer satisfaction. So, what are you waiting for? Build your computer now!</p>
</td>
</tr>
<!-- End Shipping info -->
<!-- Computer Options -->
<tr>
<td>
<fieldset class="build">
<legend>Your Computer</legend>
<table width="100%">
<tr>
<td><label for="proc">Processor speed:</label></td>
<td><asp:DropDownList name="proc" ID="proc" runat="server">
<asp:ListItem value="ghz">2.4 GHz: $158</asp:ListItem>
<asp:ListItem value="3.2ghz">3.2 GHz: $184</asp:ListItem>
<asp:ListItem value="4ghz">4.0 GHz: $200</asp:ListItem>
</asp:DropDownList>
<%--<select name="proc" id="proc">
<option>2.4 GHz: $158</option>
<option>3.2 GHz: $184</option>
<option>4.0 GHz: $200</option>
</select>--%></td>
<td><label for="mem" id="memory">Memory:</label></td>
<td><asp:DropDownList name="mem" ID="mem" runat="server">
<asp:ListItem value="1gb">1 GB: $20</asp:ListItem>
<asp:ListItem value="2gb">2 GB: $30</asp:ListItem>
<asp:ListItem value="4gb">4 GB: $80</asp:ListItem>
<asp:ListItem value="8gb">8 GB: $180</asp:ListItem>
</asp:DropDownList><%--<select name="mem" id="mem">
<option>1 GB: $20</option>
<option>2 GB: $30</option>
<option value="4">4 GB: $80</option>
<option>8 GB: $180</option>
</select>--%></td>
</td>
<td rowspan="3" id="buildxtrs">
<span id="txtExtras">Extra's</span><span id="chk">(check what you want)</span><br />
<%--<input id="dvd" name="dvd" type="checkbox" />--%>
<asp:checkbox for="dvd" id="dvd" runat="server" />
<label for="dvd" id="dvdop">DVD player: $80</label><br />
<%--<input id="cdb" name="cdb" type="checkbox" />--%>
<asp:checkbox for="cdb" id="cdb" runat="server" />
<label for="cd-b" id="cd-bop">CD burner: $30</label><br />
<%--<input id="dvb" name="dvb" type="checkbox" />--%>
<asp:checkbox for="dvb" id="dvb" runat="server" />
<label for="dv-b" id="dv-bop">DVD burner: $110</label><br />
<%--<input id="lan" name="lan" type="checkbox" />--%>
<asp:checkbox for="lan" id="lan" runat="server" />
<label for="lan" id="lanop">LAN card: $45</label><br />
<%--<input id="mdm" name="mdm" type="checkbox" />--%>
<asp:checkbox for="mdm" id="mdm" runat="server" />
<label for="mdm" id="mdmop">Modem: $90</label><br />
</td>
</tr>
<tr>
<td><label for="hd">Hard Drive Size:</label></td>
<td><asp:DropDownList name="hd" ID="hd" runat="server">
<asp:ListItem value="240gb">240 GB: $80</asp:ListItem>
<asp:ListItem value="500gb">500 GB: $100</asp:ListItem>
<asp:ListItem value="750gb">750 GB: $150</asp:ListItem>
<asp:ListItem value="1tb">1 TB: $219</asp:ListItem>
</asp:DropDownList>
<%--<select name="hd" id="hd">
<option>240 GB: $80</option>
<option>500 GB: $100</option>
<option>750 GB: $150 </option>
<option>1 TB: $219</option>
</select>--%></td>
<td><label for="mtr" id="monitor">Monitor Size:</label></td>
<td><asp:DropDownList name="mtr" ID="mtr" runat="server">
<asp:ListItem value="15">15": $100</asp:ListItem>
<asp:ListItem value="17">17": $500</asp:ListItem>
<asp:ListItem value="19">19": $760</asp:ListItem>
<asp:ListItem value="21">21": $830</asp:ListItem>
</asp:DropDownList>
<%--<select name="mtr" id="mtr">
<option>15": $100</option>
<option>17": $500</option>
<option>19": $760</option>
<option>21": $830</option>
</select> --%></td>
</tr>
<tr>
<td><label for="cdr">USB Ports:</label></td>
<td><asp:DropDownList name="cdr" ID="cdr" runat="server">
<asp:ListItem value="1port">1 Port: No Charge</asp:ListItem>
<asp:ListItem value="2port">2 Ports: $30</asp:ListItem>
<asp:ListItem value="3port">3 Ports: $120</asp:ListItem>
<asp:ListItem value="4port">4 Ports: $218</asp:ListItem>
</asp:DropDownList>
<%--<select name="cdr" id="cdr">
<option>1 Port: No Charge</option>
<option>2 Ports: $30</option>
<option>3 Ports: $120</option>
<option>4 Ports: $218</option>
</select>--%></td>
</tr>
</fieldset>
</td>
</tr>
</table>
<!-- Payment information -->
<tr>
<td>
<fieldset class="case">
<legend>Computer Case (Optional)</legend>
<img src="51.99g.png" alt="Fire Case" style="height:100px;" />
<%-- start here for radio buttons--%>
<asp:RadioButton id="Radio1" value="fire" GroupName="plan" name="plan" runat="server"/><label for="plan">$51.99</label>
<%--<input type="radio" id="Radio1" value="1" name="plan" />--%>
<img src="69.99g.png" alt="Black Case" style="height:100px;" />
<asp:RadioButton id="Radio2" value="black" GroupName="plan" name="plan" runat="server"/><label for="plan">$69.99</label>
<%--<input type="radio" id="Radio2" value="2" name="plan" />--%>
<img src="149.99g.png" alt="Blue-Orange Case" style="height:100px;" />
<label for="plan3"><input type="radio" id="Radio3" value="3" name="plan" />$149.99</label>
</fieldset>
<fieldset class="pay">
<legend id="pay" >Payment Information</legend>
<table width="100%">
<tr>
<td><label for="card">Credit Card:</label></td>
<td><select id="card" name="card">
<option>Visa</option>
<option>Master Card</option>
<option>American Express</option>
<option>Discover</option>
</select>
<label for="exp">Expires On:</label>
<select id="exp" name="exp">
<option>01</option><option>02</option><option>03</option><option>04</option>
<option>05</option><option>06</option><option>07</option><option>08</option>
<option>09</option><option>10</option><option>11</option><option>12</option>
</select> /
<select>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option><option>2013</option>
</select></td>
<tr>
<td><label for="cname">Name On Card:</label></td>
<td><input id="cname" name="cname" type="text" size="53" /></td>
</tr>
<tr>
<td><label for="cnum">Card Number:</label></td>
<td><input id="cnum" name="cnum" type="password" size="54" /></td>
</tr>
<tr>
<td><label for="pnum">Phone Number:</label></td>
<td><input id="pnum" name="pnum" type="text" size="53" /></td>
</tr>
</tr>
</table>
</fieldset>
<img id="modelimg" src="milleniumcomputergo.png" alt="Millenium Computer" />
<p id="model">One of our hand-constructed laptops</p>
</td>
</tr>
<!-- Buttons -->
<tr>
<td>
<table>
<tr>
<td align="center">
onclick="calculatePrice">Submit Order</button>--%>
<asp:Button ID="btnSubmit" runat="server" Text="Submit Order" onclick="btnSubmit_Click"/>
</td>
<td align="left">
<button id="cancel" name="cancel" type="reset" value="cancel">Cancel</button>
</td>
</tr>
</table>
</td>
</tr>
</asp:Panel>
</form>
</body>
</html>
and my cs page:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class pc : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
frmMillenium.Visible = false;
int total;
}
}
so again, my objective is to add all the selected values of the user (ex all the radio buttons and drop down list selections selected) and add them together and display the total. Any help would be greatly appreciated, Thanks!
in the .cs or code behind page, you can reference the values for the controls on your page by simply referencing the control id name and the appropriate property.
If your using any of the Visual Studio development platform, it should automatically (using intellisense) show you the methods and properties of the control you're referencing.
Example from your code (Note..crude sample below and this is free hand so errors may abound...)
//Sum costs (note: change your total data type to double)
total = 0;
double memCost;
if(Double.TryParse(mem.SelectedItem.Text.SubString(mem.SelectedItem.Text.IndexOf("$")+1), out memCost) { total += memCost; }
//add a value property to the dvd (and othercheckboxes) with the dollar amount and do the following
if(dvd.checked){ total += dvd.value; }
//rinse and repeat...
//Display results
string Summary = string.Empty;
if(mem.SelectedItem.Text != string.Empty){ Summary = Summary + mem.SelectedItem.Text + "<br />"; }
//rinse and repeat
//Add a littleral control to your form and assign the "Text" property the Summary variable above
Hope this helps get you started...
Dave

SelectOneRadio and Disable inputText

Here is my html code.
<table >
<tr>
<th rowspan="3">
<h:selectOneRadio layout="pageDirection"
onClick="alert('selam')" id="selectOneRadio">
<f:selectItem itemValue="Categori" itemLabel="Radio 1" />
<f:selectItem itemValue="Service" itemLabel="Radio 2" />
<f:selectItem itemValue="Follower" itemLabel="Radio 3" />
</h:selectOneRadio>
</th>
<td>
<h:inputText value="inputText 1" />
</td>
</tr>
<tr>
<td>
<h:inputText value="inputText 2" />
</td>
</tr>
<tr>
<td>
<h:inputText value="inputText 3" />
</td>
</tr>
</table>
I want to Select One of the radioButtons. When I click one of them I want the inputText be disabled.
For example:
İf I click Radio 1 , then input Text 1 will be disabled.
İf I click Radio 2 , then input Text 2 will be disabled.
İf I click Radio 3 , then input Text 3 will be disabled.
How can I do this?
Bind the radio button value to a managed bean property and use <f:ajax> to send an ajax request and update parts of the view when the radio button changes and use disabled attribute to disable the <h:inputText> depending on the selected radio button item value.
E.g.
<h:panelGroup id="inputs">
<table>
<tr>
<th rowspan="3">
<h:selectOneRadio value="#{bean.radio}" layout="pageDirection">
<f:selectItem itemValue="Categori" itemLabel="Radio 1" />
<f:selectItem itemValue="Service" itemLabel="Radio 2" />
<f:selectItem itemValue="Follower" itemLabel="Radio 3" />
<f:ajax render="inputs" />
</h:selectOneRadio>
</th>
<td>
<h:inputText value="#{bean.input1}" disabled="#{bean.radio == 'Categori'}" />
</td>
</tr>
<tr>
<td>
<h:inputText value="#{bean.input2}" disabled="#{bean.radio == 'Service'}" />
</td>
</tr>
<tr>
<td>
<h:inputText value="#{bean.input3}" disabled="#{bean.radio == 'Follower'}" />
</td>
</tr>
</table>
</h:panelGroup>
with
#ManagedBean
#ViewScoped
public class Bean {
private String radio;
private String input1;
private String input2;
private String input3;
// ...
}
Have a look at this, i think this is what you are looking for
<html>
<head>
<script type="text/javascript">
function enable_area(opt)
{
//get the required document element and disable corresponding element.
document.form.textarea1.disabled = (opt == 'Categori' ? true : false);
document.form.textarea2.disabled = (opt == 'service' ? true : false);
document.form.textarea3.disabled = (opt == 'Follower' ? true : false);
}
</script>
</head>
<body>
<form action="" method="post" name="form">
<!--Pass the value field as selector when clicked on radio button-->
Radio1 <input type="radio" name="radio" value="Categori" onclick="enable_area(this.value);" />
<textarea name="textarea1"></textarea>
<br />
Radio2 <input type="radio" name="radio" value="service" onclick="enable_area(this.value);" />
<textarea name="textarea2"></textarea>
<br />
Radio3 <input type="radio" name="radio" value="Follower" onclick="enable_area(this.value);" />
<textarea name="textarea3"></textarea>
</form>
</body>
</html>