I am trying to execute the below JS. I have a radio button , which on click should set a property of variable RefreshMapping to child as specified in the below code. however, this doesnt seem to be working. I have set the default value of RefreshMapping to template, every time i select the radio button the value should change to child, which does not. Any help would be appreciated.
</script>
<SPAN nowrap>
<body>
<table cellpadding='0' cellspacing='0' width=''>
<tr>
<td class='{DataValueWrite}' nowrap='nowrap' width='' align="top">
<input <pega:include name="ClientValidation"/> type="radio" class="Radio" name="<pega:reference name="$this-name" />" onclick="document.getElementById('RefreshMapping').value='child';document.getElementById('RefreshMapping').click();" id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)" />"
<pega:when java="<%= tools.getProperty("SelectedProduct.ChildProd").toString().equals("child") %>"> checked
</pega:when>
<pega:when java="<%= tools.getProperty("SelectedProduct.PROD_LEVEL").toString().equals("5") %>">
disabled
</pega:when>
value="true"><font class = "LabelName">Child Sub-Product/ Services</font>
</td>
</tr>
</table>
</body>
</SPAN>
P.S: This is in a tool called Pega PRPC, so ignore the syntax as it is specific to PEGA
First, your html seems malformed, why are there body tags inside of spans.
Second, are you sure there is an html element on the page with the id 'RefreshMapping'? Verify that is the result of if you are trying to get this radio button.
Third, the value for your input is currently set to "true" via 'value="true"', to select a radio button in javascript you must set the element to checked. This will give the property specified in the name attribute the value of the inputs' value attribute. Radio buttons usually have multiple input tags to the same radiobutton group, in order to select a button in that group, you get that specific element and set it to checked via document.getElementByID("id").checked = "true";
Related
I have these radio buttons.
<input type="radio" id="flip" name="flip" value="Head" checked="checked" /> Head
<input type="radio" id="flip" name="flip" value="Tail" /> Tail
I am trying to process a form with ajax for which I tried to get the value of these radio buttons with this
var dataString = {
flip: $("#flip").val()
};
console.log(dataString.flip);
Now when I do console.log to check the value its sending I am always getting Head and not Tail even if I select Tail as a choice. Can anyone help me as why is it so?
get value by name not id :
$("input[name='flip']:checked").val();
id cannot be duplicate. It need to be unique.In this case you can use name attribute
Use name to select get the selected radio button value
$("input:radio[name=flip]:checked").val();
you cannot have the same ID multiple times! that is the reaon why it only displays one of the two.
ID #flip is an unique element(you cannot have more than more #flip element). Use .flip instead of #flip.
And also change id="flip" to class="flip"
I am using Struts 2.1.6. I am having an issue while trying to set the value of an attribute using onchange event within the <s:iterator> tag.
<s:iterator value="myList" status="rowStatus">
<tr>
<td><s:textfield name="myList[%{#rowStatus.index}].abc" value="%{model[#rowStatus.index].abc}" onchange="myList[%{#rowStatus.index}].changeFlag = "true"/></td>
<td><s:textfield name="myList[%{#rowStatus.index}].changeFlag" value="%{model[#rowStatus.index].changeFlag}" /></td>
</tr>
</s:iterator>
The list myList has multiple objects and if there is a change to the value of abc attribute of any particular row then I am trying to set the value of the changeFlag to true. However it doesn't work.
How to do it?
The onchange attribute in the s:textfield tag is
Set the HTML onchange attribute on rendered HTML element
and the rendered html element is <input type="text">. For this element the onchange attribute defines a javascript function to handle the event. So you can create a function doChange(). But before you need to add id attribute
HTML id attribute
this allows to locate element in the document by id.
<s:iterator value="myList" status="rowStatus">
<tr>
<td><s:textfield id="myList[%{#rowStatus.index}].abc" name="myList[%{#rowStatus.index}].abc" value="%{model[#rowStatus.index].abc}" onchange="doChange('myList[%{#rowStatus.index}].changeFlag')"/></td>
<td><s:textfield id="myList[%{#rowStatus.index}].changeFlag" name="myList[%{#rowStatus.index}].changeFlag" value="%{model[#rowStatus.index].changeFlag}" /></td>
</tr>
</s:iterator>
<script>
function doChange(dest) {
document.getElementById(dest).value = 'true';
}
</script>
P.S.: The version of Struts that you are using is too old (2.1.6). You should know how to get the newer version. See How to know a version of Struts 2.
I have this inbox or mails which I needed to mark using checkbox for multiple deletions. The problem is that when I click the checkbox it always go to method read() because of onclick inside the tag. All I want is simple marking. Please see the code below:
#foreach ($messages as $message)
<tr onclick="document.location='{{route('account.message.read', array($message->id))}}'">
<td> <input type="checkbox" name="msg" value="{{$message->id}}"></td>
<td><strong>{{Str::words($message->subject, 5, '...')}}</strong> {{Str::words($message->message, 20, '...')}}</td>
</tr>
#endforeach
Now how can I mark each row without going inside that method? I am a newbie btw.
All you need to is attach handler to checkbox and use stopPropagation from bubbling up into trees, see below example :
HTML
Supposed we have table rows with onclick inline javascript and inside it have input:
<table>
<tr onclick="return alert('Hai')">
<td>
<input type="checkbox" />Click Me
</td>
</tr>
<table>
And here the handler :
$('input').click(function(e){
// normally if we removed this line of code
// alert will getting called as checkbox is checked/unchecked
// was inside table rows
// but with this propagation, we disabled it
// from bubbling up into tree
e.stopPropagation();
});
DEMO
you could put the onclick inside the tags excluding the checkbox cell
otherwise you could call an actual onclick function while capturing the click event and check that x is greater than lets say 50px!
<script type="text/javascript">
document.getElementById('emailRow1').addEventListener("click",function(e){
var x=e.pageX-this.offsetLeft;
if(x>50){
rowClicked();
}
},true);
</script>
<table><tbody><tr id='emailRow1'><td style="width:50px;">This area wont trigger onclick</td><td>I trigger onclick</td><td>i trigger onclick</td>
Then you can set custom parameters on your object and recall them using this.customPropertyName to determine what row was clicked! hope this helps
I have one html table row having dynamic checkboxes with same id in a jsp page and I want to fetch the value of selected checkboxes from this page and use it to another jsp page .I'm using request.getParameter to fetch the value but I'm getting null in other jsp page.Please suggest me what to do ?
Here is the code where i have dynamic checkbox (index.jsp):
<% for (RecordField recordField : flds) { %>
<tr>
<td width="15" bgcolor="#46A0F0"><input type="checkbox" name="tablechkboxl"
id="fieldName" / ></td>
<td width="200" >
<%= recordField.getFieldName() %> //dynamic fields
<%}
%>
</td></tr>
Now i want to use the selected checboxes value in other jsp as (Submit.jsp):
for (Enumeration e = request.getParameterNames(); e.hasMoreElements();){String[]
checkedcolumns = (String) request.getParameterValues("tablechkboxl");
System.out.println("Now i am getting "+checkedcolumns );
}
But instead of getting name of checked columns i am getting "on".Anyone please suggest.
Selected checkbox has a default value as "on".
So you have to override default value of the checkbox.
<input type="checkbox" name="tablechkboxl" value="<%= recordField.getFieldName() %>" />
on is the default value. If you want a different value then you need to give the input element a value="something" attribute.
I am using the following code
<tr id="row">
<td><input type="text" name ="first" id="first" onclick="goto("row")"/>
</td>
<td><input type="text" name ="second" id="second"/>
</td>
</tr>
<script>
function goto(row)
{
var row=document.getElementById("row");
}
</script>
here in the goto() function i am getting the table row by using id.I need to get the second text box inside this row when i clicking the first text box.How can i get the second text box using the table row id. Any idea ?.
First off, you're missing some equals (=) signs in your HTML. You might want to change that to name="first" and name="second". Secondly, I'm not sure why you have two elements with the same id of "second" when you could have changed one of them to "first" so they don't collide, and then you could easily select the second one with getElementById("second"). Simple mistake, right?
Change the ids, make them unique and you could directly access the input textbox like:
var txtbox = document.getElementById("YourTextboxId");