In MVC form I have a drop down list which has 3 hard coded options.
<select name="ComparisonType">
<option>select ..</option>
<option>Life</option>
<option>Income</option>
</select>
On form submit values will be saved but there need to add validation for First option. If user submit form he should see message.
Please advice how to handle it. I'm not using Model here.
Modify your html as shown:
<select name="ComparisonType">
<option value="0">select ..</option>
<option value="Life">Life</option>
<option value="Income">Income</option>
</select>
Jquery :
$('form').submit(function(e){
if($('select[name=ComparisonType]').val() == "0")
{
alert("Please select any value from dropdown");
e.preventDefault(); //or return false;
}
});
Edit :-
DEMO Link
You will have to use Javascript/Jquery to achieve this functionality as you are not using a model here. So you can work around with this code which will validate your dropdown on submitting your form. Here goes :
<script type="text/javascript">
$(document).ready(function () {
$('#submitButtonId').click(function (){
var period = $("#dropdownId option:selected").text();
if (period == "select") {
//means first option is selected.
}
else {
//some other option is selected.
}
});
});
i have five dropdown and five texbox and I'm checking on click of any of the dropdown the corresponding texbox should get enabled/disabled through javascript am using master page in asp.net
e.g: if am selecting dropdownlist1 then texbox1 should get enabled,for one textbox its working how to make it work for five textbox
function HideTextBox(ddlId) {
var ControlName = document.getElementById(ddlId.id);
if (ControlName.value == 0)
{
document.getElementById('<%=txtComment1.ClientID%>').disabled = true;
}
else {
document.getElementById('<%=txtComment1.ClientID%>').disabled = false;
}
}
You can use JQuery, it is better way. Set two class to each textBox, first .textBox1 .myTexts,
the first class must include an id for text boxes. Such as .textBox1, .textBox2 ect. And your dropbox value must include just text box's id.
$(document).ready(function(){
$("#dropBoxID").change(function(){
$(".myTexts").attr('disabled','disabled');
$(".textBox"+$(this).val()).removeAttr("disabled")
});
});
try this
http://jsfiddle.net/3WJtM/
function HideTextBox(ddlId) {
var ControlName = document.getElementById(ddlId.getAttribute("id"));
var idTxt = ControlName.getAttribute("txt");
if (ControlName.value == 0)
{
document.getElementById(idTxt).disabled = true;
}
else {
document.getElementById(idTxt).disabled = false;
}
}
on every object select, add an attribute txt with the name of te input text
In the javascript you search this textbox for enabled or disabled
for example
<select id="ddl1" txt="txt1" onchange="HideTextBox(this);" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="input" id="txt1" disabled/>
I have been working on an MVC app. Currently I use #Html.EditorFor(model => model.TextField) to display a textbox.
Now I want to use a WYSIWYG HTML Editor instead but don't know how to incorporate this into the Razor View. I already have the field set as to allow html in my model.
Any advice would be appreciated.
If you want to use TinyMCE then you can do something like this:
The Model
public class EditorModel
{
[UIHint("tinymce_full"), AllowHtml]
public string TextField { get; set; }
}
The Template under Shared -> EditorTemplates
#*
Don't forget to reference the JQuery Library here, inside your view or layout.
<script src="#Url.Content("~/Scripts/jquery-x.x.x.min.js")" type="text/javascript"></script>
*#
<script src="#Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
<script type="text/javascript">
(function () {
$(function () {
$('##ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').tinymce({
// Location of TinyMCE script
script_url: '#Url.Content("~/Scripts/tinymce/tiny_mce.js")',
theme: "advanced",
height: "500",
width: "500",
verify_html: false,
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist", //,autosave
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
// Example content CSS (should be your site CSS)
// content_css : "#Url.Content("~/Content/style.css")",
convert_urls: false,
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
valid_elements: "##[span]"
});
});
})();
</script>
#Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
View Implementation
#Html.EditorFor(m=>m.TextField)
Am having several boxes(more than 100) that will create dynamically with
<div id="window5"></div>
<div id="window18"></div>
<div id="window190"></div>
Now If i click on one box the colour should be red,then if i click on the other box the colour should be changed to red(the first box colour should come to normal).I used some code like this,but it is not taking the css class.
How can i get the dynmic id of this case.
css file:
.selected{
color: red;
}
used javasscript code as;
<script type="text/javascript">
$(document).ready(function () {
$("div[id *= 'window']").click(function (e) {
$(".selected").removeClass("selected");
$(this).addClass("selected");
e.stopPropagation();
});
$(document).click(function () {
$(".selected").removeClass("selected");
});
});
</script>
That's because they are generated.
You have to use the .on statement.
$("div[id *= 'window']").on('click', function (e) {
If you're using a version of jQuery older than 1.7 please use .live() instead:
$("div[id *= 'window']").live('click', function (e) {
You will have to use jquery's .live or .on because you generate divs dynamically.
To change background color of the divs, you'll have to use 'background-color' in css instead of 'color'.
http://jsfiddle.net/fFcua/
i wnt to swap image on click,bt here if m clicking from down image to up but again its not coming on down image if m clicking on that image...
m geting some error-x.attr("src") is undefined
$(document).ready(function () {
$('#sortdivlink').click(function () {
var x = $("img[src$='../Images/Sort_down.png'][name='stCodeDSC']");
if (x.attr("SRC") == "../Images/Sort_down.png") {
x.attr('src', x.attr('src').replace("../Images/Sort_down.png", "../Images/sort_up.png"));
}
else {
x.attr('src', x.attr('src').replace("../Images/sort_up.png", "../Images/Sort_down.png"));
}
});
});
I would imagine this is due to the selector you're using to assign x, which is likely returning null. I would consider maybe adding an Id or CSS class to the image, and then simplifying the selector to something like this:
var x = $('img.sortDirectionImage');
Alternatively, if you know that the sortdivlink element, will only have a single image, you could simply search for an img element within the context of that element, for example:
// within the click function scope
var x = $('img', this);
Edit
Additionally, I would recommend using more recognisable variable names; you might know what x is, but the next person that comes to read your code might not.
you could use a <div> with a css class with a background-image and dimensions, and use $(div).toggleClass("new-image") to use the updated background-image
that will greatly simplify your code.
[EDIT]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style>
.first-image
{
background-image: url( 'http://www.google.com/press/zeitgeist2001/google_logo.gif' );
width:218px;
height:90px;
background-position:center;
background-repeat:no-repeat;
}
.second-image
{
background-image: url( 'http://www.google.com/doodle4google/2008/images/regional_doodles/CO-80106-16a267f8-3.jpg' );
width:350px;
height:224px;
background-position:center;
background-repeat:no-repeat;
}
</style>
<script>
$(document).ready(function( )
{
$("#target-div").click( function( )
{
$("#target-div").toggleClass("second-image");
});
});
</script>
</head>
<body>
<div id="target-div" class="first-image"></div>
</body>
</html>
Look at my script I wrote long time ago (without any jQuery):
function changeImg(element) {
var img = document.getElementById(element);
if (img.src == "../images/expand.png") {
// collapse
img.src = "../images/collapse.png";
}
else {
// expand
img.src = "../images/expand.png";
}
}
Normal HTML-Markup:
<span onclick="changeImg('ansprechpartner');return false;">...</span>
Maybe it will work for you...