Develop Reference

checked radio button after tr onclick in pure javascript. Performace also matter

I've been searching many times on how to check radio button in tr onclick in pure javascript but I only see Jquery. Can someone convert this jquery code to pure javascript or any will do. Performance also matter. Any help will be greatly appreciated
$('tr').click(
function() {
$('input[type=radio]',this).attr('checked','checked');
}
);
My html. I use radio buttons in selecting a record in the table before deleting or updating it. When a user clicks a row, I want my radio button to be selected in pure javascript and not Jquery because perfomance matter
<tr onclick="myfunc(this)">
<td><input type="radio" name="rd" value="somevalue"></td>
<td>some text</td>
<td>another text</td>
</tr>
<tr onclick="myfunc(this)">
<td><input type="radio" name="rd" value="somevalue"></td>
<td>some text</td>
<td>another text</td>
</tr>
<tr onclick="myfunc(this)">
<td><input type="radio" name="rd" value="somevalue"></td>
<td>some text</td>
<td>another text</td>
</tr>
<!-- more tr -->
<script type="text/javascript">
function myfunc(o){
o.onclick = function() {
// code goes here
o.("input[type=radio]").checked = true; //something like this
}
}
</script>

I made an example for you. It's consisted of two radio groups. The top one is alone in it's own row while the bottom radio group is made of two radio buttons each in it's own cell.
All you have to do is pass the id of the radio you wish to alter. Like this (run the snippet):
function checkMe(id)
{
document.getElementById(id).checked = true;
}
<table border="1" cellspacing="0">
<tr onclick="checkMe('radio1')">
<td colspan="2"><input type="radio" name="radioFirst" id="radio1" /></td>
</tr>
<tr>
<td onclick="checkMe('radio2')"><input type="radio" name="radioSecond" id="radio2" /></td>
<td onclick="checkMe('radio3')"><input type="radio" name="radioSecond" id="radio3" /></td>
</tr>
</table>

How to make message box in asp.net mvc with javascript

I want to create message box like this, which has pink background color
And when display that message box, page is not dark.
Thank you.

If you are using bootstrap:
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Here is a Bootply as an example.
For jQuery, to get a message box, you can use this

There are many ways:
Use bootstrap model
Check this w3schools link
Or try jquery dialog box:
HTML:
<div id="dialog">
<table>
<tr>
<td >Question</td>
<td colspan="2">Yes/No</td>
</tr>
<tr>
<td>Question 1</td>
<td><input name="Input1" style="text-align:center;" type="radio" /></td>
<td><input name="Input1" style="text-align:center;" type="radio" /></td>
</tr>
<tr>
<td>Question 2</td>
<td><input name="Input2" style="text-align:center;" type="radio" /></td>
<td><input name="Input2" style="text-align:center;" type="radio" /></td>
</tr>
</table>
</div>
jQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
Check this link

Cannot hide fields and populate field based on selection

I am trying to:
1. Hide and display fields based on SELECT a field
2. Populate a field based on check boxes
However neither is working. Both were based on working solutions from others. The only difference I can think of is that I am using TABLE to format them. But I don't know if that makes a difference.
The HTML code:
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td><select id="business" name="business" >
<option value="1">Sell</option>
<option value="2">Buy</option>
<option value="3">Both</option>
<option value="4">Trade</option>
<option value="5">Freight</option>
<option value="6">Customs</option>
</select>
</td>
</tr>
<div id="freight">
<tr>
<td><b>Service Type:</b></td>
<td><select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b></td>
<td><input type="text" name="tollfree" />
</td>
</tr>
</div>
<tr>
<td valign="top"><b>Your Email Address:</b></td>
<td><input type="text" name="email" /></td>
</tr>
<div id="customs">
<tr>
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder<br />
</td>
</tr>
</div>
<tr>
<td><b>Products/Services:</b></td>
<td><input type="text" name="products" /></td>
</tr>
<div id="brand">
<tr>
<td><b>Brand Names:</b></td>
<td><input type="text" name="brands" /></td>
</tr>
</div>
</table>
</form>
The jQuery code for doing these:
$(':checkbox').click(function() {
$('input[name=products]').val(
$(':checkbox:checked').map(function() {
return $(this).val();
}).get().join(',')
);
});
$(document).ready(function () {
toggleFields();
$("#business").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#business").val() == 1 || ($("#business").val() == 2 || ($("#business").val() == 3)
$("#brand").show();
$("#freight").hide();
$("#customs").hide();
else
if ($("#business").val() == 5)
$("#brand").hide();
$("#freight").show();
$("#customs").show();
else
if ($("#business").val() == 6)
$("#brand").hide();
$("#freight").hide();
$("#customs").show();
else
$("#brand").hide();
$("#freight").hide();
$("#customs").hide();
}
For example when you select "Sell", "Buy" or "Both" (in Business), the SERVICE TYPE and TOLLFREE NUMBER fields are supposed to be hidden, as well as SERVICES field. They are wrapped in DIV id "freight" and "customs" and supposed to be invisible. But they are not. All fields are shown regardless.
Second problem is if you select Customs (in Business) the Services field which is composed of checkboxes is supposed to be shown and when click on the check boxes, the value in these checkboxes is supposed to populate the Products/Services field. It is not doing that either.
Here is the jsfiddle for this code:
http://jsfiddle.net/5SArB/571/
which is based on the working version of both
jsfiddle.net/5SArB/ (toggle fields based on form values)
and
jsfiddle.net/dTrVt/ (populate input field based on checkbox id values)
I am pulling my hair on this and just can't understand why it is not working. Any help is appreciated. Thank you in advance.

There are several issues with the code, the first of which is that the javascript is poorly formed.
You can't write if statements without curly braces if they take more than one line
The first if statement in toggleFields is missing some parentheses
Once you get that fixed, the other problem concerns the formation of your html table. Don't wrap the table rows with divs, since that's improper html table structure. Instead, you might take out the divs, and assign the "id"s to the table rows instead. Essentially what you would be doing then is showing/hiding table rows rather than showing/hiding divs containing the table rows.
The resulting HTML would be then:
<tr id="freight">
...
</tr>
Rather than:
<div id="freight">
<tr>
...
</tr>
</div>
Here's a fiddle with the proposed changes.
Hope that helps!
Edit: In case somebody comes across this in the future, the problem was a simple issue with load order -- the document wasn't ready when the click event was bound. The solution is as simple as moving the click event inside the document.ready callback.

As already mentioned, you have syntax errors and you can't have div as a child of table.
In the if...else if statements you are missing the block definitions...
Also assign the ids to the tr instead of nesting it in a div.
Also the code can be simplified as
$(':checkbox').click(function () {
$('input[name=products]').val($(':checkbox:checked').map(function () {
return $(this).val();
}).get().join(','));
});
jQuery(function ($) {
$("#business").change(toggleFields).change();
});
function toggleFields() {
var el = $('#business option:selected').data('el'),
els = el ? '#'+el.split(/,\s*/).join(', #'):'';
var $els =els? $(els).show():$();
$('.bussiness-field').not($els).hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td>
<select id="business" name="business">
<option value="1" data-el="brand">Sell</option>
<option value="2" data-el="brand">Buy</option>
<option value="3" data-el="brand">Both</option>
<option value="4">Trade</option>
<option value="5" data-el="freight, customs">Freight</option>
<option value="6" data-el="customs">Customs</option>
</select>
</td>
</tr>
<tr id="freight" class="bussiness-field">
<td><b>Service Type:</b>
</td>
<td>
<select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b>
</td>
<td>
<input type="text" name="tollfree" />
</td>
</tr>
<tr>
<td valign="top"><b>Your Email Address:</b>
</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr id="customs" class="bussiness-field">
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent
<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder
<br />
</td>
</tr>
<tr>
<td><b>Products/Services:</b>
</td>
<td>
<input type="text" name="products" size="40" />
</td>
</tr>
<tr id="brand" class="bussiness-field">
<td><b>Brand Names:</b>
</td>
<td>
<input type="text" name="brands" />
</td>
</tr>
</table>
</form>

reload on same tr after ajax call

HTML:
<table border="1">
<tr id="main_account">
<td width="50%">
<h3 style="margin-left:10px">Details</h3>
<table width="270">
<tr>
<td>First name:</td>
<td><input type="text" name="first_name" id="id_first_name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="id_last_name" /></td>
</tr>
<!-- other html -->
</table>
</td>
</tr>
<tr id="authorised_reporter">
<td width="100%" colspan="2">
<form method="post" action="." id="reporter-form">
<table width="100%">
<tr>
<td style="width:100px;">First name:</td>
<td><input type="text" name="first_name" id="id_first_name" /> </td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="id_last_name" /> </td>
</tr>
<tr>
<td>Daytime phone:</td>
<td><input id="id_phone_daytime" type="text" class="trim-space" name="phone_daytime" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
onpage load id #main_account is shown and id #authorised_reporter is hidden.If #authorised_reporter is clicked #authorised_reporter is in display block and #main_account is in display none state.In #authorised_reporter tab i am updating the user data using ajax,after sucess call i am reloading the page.Since onload i am showing the #main_acount by default after reload it takes me to #main_account but what i required is after sucess ajax call on pagereload the page should show #authorised_reporter tab and not #main_account tab.
I tried the below but not working,takes me to #main_account
//other code not shown
success: function() {
location.reload();
$('#authorised_reporter').css("display", "block");
$('#main_account').css("display", "none");
$("#sucess").show();
$("#sucess").text("Changes has been updated.");
}

Your changes may not apply since,
location.reload();
It will reload the content and later part of success function will not effect. If you can be more specific and supply more html, will be able give you an answer. You can use .done() in jQuery also.

Try with the below:
Example: 1
$("#main_account").hide();
if the answer is not related to you please disregard it.
Example:2
To have graceful degredation as well, you could stick with the hiding done via jQuery, just give the edit <tr> rows a class, e.g. <tr class="edit"> then hide all of those at once with jQuery outside the table, like this:
<script type="text/javascript">
$(function() {
$("tr #main_account").hide();
});
</script>
This approach, instead of hiding them off the bat with CSS is more friendly to those with JS disabled, if you might have an audience of users like that, go with this .hide() approach.

keep input boxes visible after form submission

I have a form with a show/hide input box element. When I submit the form the page refreshes
and it returns to default state with all but the first input box hidden. What I want is to keep all boxes that were show prior to submission still visible after submission. is this possible?
function show(id){
if (document.getElementById(id+"-link").style.display=="none") {
document.getElementById(id+"-link").style.display="block";
document.getElementById(id+"-input").style.display="block";
}
}
<html>
<form action='form.html' method='POST'>
<table>
<tr>
<td><input type="text" id="a1" name="em_1"></td>
<td>and</td>
</tr><tr>
<td><input type="text" id="b1-input" name="em_2" style="display:none"></td>
<td><a href="#null" style="display:none" id="b1-link"
onclick="show('c1')">and</a></td>
</tr><tr>
<td><input type="text" id="c1-input" name="em_3" style="display:none"></td>
<td><a href="#null" style="display:none" id="c1-link"
onclick="show('d1')">and</a></td>
</tr><tr>
<tr>
<td><input type='submit' name='submit'></td>
</tr>
</table>
</form>
</html>