I have this code
<script type="text/javascript">
$(function () {
$("#temperature").change(function (e) {
// elaboration
});
</script>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group" id="TemperatureGroup">
#Html.LabelFor(model => model.temperature, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.temperature, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.temperature, "", new { #class = "text-danger" })
<div id="infoPaintTemperature" class="col-md-10">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Salva" class="btn btn-default" />
</div>
</div>
</div>
}
I need to catch if the user have press Enter key inside the input "Temperature", to prevent elaboration of "change" javascript. I can't find anywhere how to get the info of which key has been pressed inside "change" function.
Thanks for who can help
EDIT
I would like to do two different elaboration in .change() if I leave the textbox or if I press Enter inside textbox.
I am assuming you want to trigger some function (elaboration inside "change" event callback) only if the user leaves the input box.
If that is the case then you can try using the .focusout((event) => {}) method of javascript.
It will be only triggered when input is focused out and inside which you can compare the currentInput value with previousInput value and accordingly trigger run the logic.
$(function () {
let previousInput = '' // blank for first time use
$("#temperature").focusout(function(e){
// console.log(e.target.value)
if (previousInput !== e.target.value) {
// Input changed
previousInput = e.target.value
// rest of elaboration
} else {
// Input not changed
}
});
});
You could try something like this;
$('input').on('keypress', function(e) {
if (e.keyCode == '13') {
e.preventDefault();
$(this).blur()
};
});
Which when the user presses ENTER will enact blur which can also enact the change.
.preventDefault(); will stop the form submitting when ENTER is pressed.
you muse use delegate to attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements, and you can use .temperature
$( ".form-horizontal" ).delegate( ".temperature", "change", function()
{ }
Related
I am trying to hide or show a textbox, in a ASP MVC razor view, now i using javascript to handle when i click the radio button which can help me to do hide or show function.
however, i want to base on database record hide and show the textbox, so if i use below code , i need to click the radio for hide or show a textbox, anyone can give me advise how to hide or show textbox base on database record and no need to click radio button? thanks
<script type="text/javascript">
const { checked } = require("modernizr");
function text(x) {
if (x == 0 ) document.getElementById("name").style.display = "block",
document.getElementById("address").style.display = "none",
else document.getElementById("name").style.display = "none",
document.getElementById("address").style.display = "block",
return;
}
</script>
//radio name
#Html.LabelFor(Model => Model.Type, "A")
#Html.RadioButtonFor(Model => Model.Type, "A" , new { #onclick = "text(0)", #id = "but1" })
#Html.LabelFor(Model => Model.Type, "B")
#Html.RadioButtonFor(Model => Model.Type, "B" , new { #onclick = "text(1)", #id = "but2" })
//textbox(name)
<div class="form-group col-md-6" id="name">
#Html.LabelFor(model => model.name, new { #class = "control-label" })
#Html.TextBoxFor(model => model.name, new { #class = "form-control"e })
</div>
//textbox(address)
<div class="form-group col-md-6" id="address">
#Html.LabelFor(model => model.address, new { #class = "control-label" })
#Html.TextBoxFor(model => model.address, new { #class = "form-control" })
</div>
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
text(#Model.Value);
})();
</script>
This is a document ready function. Your text() method will be called when page is loaded.
Use #Model.Value your initial db value. That way it will work for the first time with the value which is in the db.
Hi I'm running my head in to a wall.
I am trying to make a javascript/jquery event that detects when my mouse is over a button. when the mouse is over the button I want a tooltip containing the required message from the input that still needs to be filled out. I want it to only be the last required message and I want the message to change until there are no more required to fill out.
This is what I have tried so far.
my Razor cshtml
...Irrelevant html code
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-4">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "col-form-label col-md-12" })
</div>
<div class="col-sm-6">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control",title = Global.ToolTipName, data_toggle = "tooltip" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-4">
#Html.LabelFor(model => model.Phone, htmlAttributes: new { #class = "col-form-label col-md-12" })
</div>
<div class="col-sm-6">
#Html.EditorFor(model => model.Phone, new { htmlAttributes = new { #class = "form-control", title = Global.ToolTipPhone, data_toggle = "tooltip" } })
#Html.ValidationMessageFor(model => model.Phone, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-12">
<div class="row">
<div class="col-sm-12">
<input id="Send" type="submit" value="#Global.btnSend" title = "Not Implemented Yet!" data_toggle = "tooltip" class="btn btn-default" />
</div>
</div>
</div>
...Irrelevant html code
and my script looks like this
<script type="text/javascript">
$(document).on('mouseenter', '#Send', function () {
var allinput = $('input[data-val-required]').get();
allinput.forEach(item => this.attr('data-original-title', item.title));//<--- tried this doesn't seem to work.
//allinput.forEach(item => this.attr('data-original-title', item.title).tooltip('fixTitle').tooltip('show')); <--- and tried this didn't work either
//allinput.forEach(item => this.attr('title', item.title).tooltip('fixTitle').tooltip('show'));<--- then I tried this didn't work either
$(this).tooltip('show');
});
$(document).on('mouseleave', '#Send', function () {
$(this).tooltip('hide');
});
</script>
So I am at a loss where I went wrong here. a pointer to the right direction or a little help here would be appreciated, Even telling me if I am Far off my mark or very close to would also be considered a big help.
with the help of CodeThing I've produced a working example of what I wanted to do.
$(document).on('mouseenter', '#Send', function () {
var allinput = $('input[data-val-required]').get();
var lastval = '';
$.each(allinput, function () {
if ($(this).val() == '') {
var forName = this.id;
var closestName = "label[for='" + forName + "']";
lastval += $(this.parentNode.parentNode).find(closestName).text() +", ";
}
});
lastval = "Need to fill out these fields: " + lastval
$(this).attr('title', lastval).tooltip('fixTitle').tooltip('show');
});
$(document).on('mouseleave', '#Send', function () {
$(this).tooltip('hide');
});
However this only works in Firefox. I really need this also to work in both Edge and Chrome.
In that case, try the below code and add data-html="true" attribute to send button. It display all blank fields tooltip on new line in send buttons tooltip.
$(document).on('mouseenter', '#Send', function () {
var allinput = $('input[data-val-required]').get();
var lastval = '';
$.each(allinput, function() {
if($(this).val() == '') lastval += $(this).attr('title')+'<br />';
});
$(this).attr('title', lastval).tooltip('fixTitle').tooltip('show');
});
$(document).on('mouseleave', '#Send', function () {
$(this).tooltip('hide');
});
I have a textfield and a date textfield. I am trying to connect them with Javascript, but I encounter a problem. My script is:
<script>
$("#solDate").change(function () {
if ($(this).val().trim() == '') {
$("#caseStatus").val('In Progress');
$("#solvedBy").val('Pick an option');
$("#solvedBy").change();
}
else if ($(this).val().trim() != '' && $("#solvedBy").val().trim() == '') {
$("#caseStatus").val('Solved');
$("#solvedBy").val('Please, pick the issue solver');
$("#solvedBy").change();
}
});
</script>
When date is picked from calendar, it should set a value 'Please, pick the issue solver'. It works perfectly.
Then, if you entered the date incidentally, it should return the previous default value - "Pick an option".
In both cases, a change is triggered.
Then, another trigger is listening for these changes.
<script>
$("#solvedBy").change(function () {
if ($(this).val() == 'Please, pick the issue solver') {
$("#saveBtn").attr('disabled', true);
$("#slvByValMsg").text('You have solution date and no solver');
}
else if ($(this).val().trim() == '' && $("#solDate").val().trim() != '') {
$("#saveBtn").attr('disabled', true);
$("#slvByValMsg").text('You have solution date and no solver');
}
else {
$("#saveBtn").attr('disabled', false);
$("#slvByValMsg").text('');;
}
});
</script>
After my troubleshooting, it turns out, that the first if statement on the first script doesn't trigger a change. It may be because it doesn't recognize the default pick option with value ''. I am not sure. Anyhow, when I delete the date from the textfield, the value of the other textfield doesn't change to 'Pick an option', but to ''.
HTML Code:
#Html.LabelFor(model => model.Solution_Date, htmlAttributes: new { #class = "control-label col-md-2" })<sup> 1 </sup>
<div class="col-md-10">
#Html.TextBoxFor(model => model.Solution_Date, new { #id = "solDate", #class = "one", #type = "datetime" })
<br />
#Html.ValidationMessageFor(model => model.Solution_Date, "", new { #class = "text-danger" })
</div>
#Html.LabelFor(model => model.Solved_by, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="dropdown">
#Html.DropDownListFor(model => model.Solved_by, (IEnumerable<SelectListItem>)ViewBag.SlvBy, "Pick an option", new { #id = "solvedBy" })
<br />
#Html.ValidationMessage("Solved_by", "", new { #id = "slvByValMsg", #class = "text-danger" })
</div>
I know there are probably better ways to do this, but I'm looking for a resolution mainly because I don't know why this change trigger doesn't fire.
Thanks in advance!
I've found what causes the issue. It turns out that
$("#solvedBy").val('Pick an option');
Cannot be executed, because this is the default option and the value behind it is ''. This must be messing with the .change() triggers and created havoc in other scripts as well.
I changed it to
$("#solvedBy").val('');
...and everything works now.
I have the following autocomplete functions. The form gets autosubmitted when a one of suggested values is clicked:
var submitAutocompleteForm = function (event, ui) {
var $input = $(this);
$input.val(ui.item.value);
var $form = $input.parents("form:first");
$form.submit();
};
var createAutoComplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-source-autocomplete"),
select: submitAutocompleteForm,
};
$input.autocomplete(options);
};
$("input[data-source-autocomplete]").each(createAutoComplete);
This works just fine. The form has this additional hidden input:
<input id="autocomplete" name="autocomplete" type="hidden" value="False" />
Now, I want change submitAutocompleteForm function to change this input's value to true upon submit:
$form.submit(function (e) {
$(this).children('#autocomplete').val(true);
});
but this inner function is never invoked. Even tried with a simple alert inside, this also never gets invoked.
What am I doing wrong?
EDIT:
Html code:
#using (Ajax.BeginForm("LoadBook", new { id = Model.CollectionId }, new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "bookDetailsPlaceHolder",
OnComplete = "animateBookLoad"
}))
{
#Html.Hidden("autocomplete", false)
<div class="form-horizontal">
<div class="form-group form-custom">
<div class="col-md-12">
#Html.TextBox("bookDetails", null, new { #class = "form-control pull-left", #placeholder = "Szukaj tytułu", data_source_autocomplete = Url.Action("Autocomplete") })
<span class="input-group-btn">
<button id="addCopySearchBtn" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
}
<div id="bookDetailsPlaceHolder" style="display:none">
</div>
Also, I noticed that when I manually hit the submit button, the inner function gets invoked... So it seems to me that $form.submit() submits the form (obviously) but the $form.submit(function () { } actually gets invoked when the form is being submitted.
I'll try to specify whan I need:
I need the submitAutocompleteForm function to submit the value in TextBox, but also to change the hidden input's value. I cannot write something like $('#form").on('submit', function () { } as I do not want input's value to be changed when user manually submits the form.
$form.submit(function (e) {
e.preventDefault();
$(this).children('#autocomplete').val(true);
});
This stops the form from sending which means the function below will be able to manipulate the form elements. However this means you do have to AJAX the form data via JavaScript or submit the form again.
I have a MVC page that show and hide some text-boxes depend on drop Down value change using Jquery. The page is working by itself but when I put under the menu when I go to other menu option and comeback to this it shows all the text boxes. this is my Jquery code in the view:
function toggleDIvDisplay(e) {
if (!e)
e = '';
$('button.search').toggle(e != '');
$('#divAppName').toggle(e == 1);
$('#divSSN').toggle(e == 2);
$('#divRemref').toggle(e == 3);
}
$(document).ready(function () {
$('button.search').click(function (evt) {
evt.preventDefault();
var container = $('#customer-results');
container.hide();
$('table tbody', container).empty();
var searchMethod = $('##Html.IdFor(model => model.SearchMethod)').val();
switch (searchMethod) {
case '1':
getByFirstNameAndLastName();
break;
case '2':
getBySSN();
break;
case '3':
getByRemRef();
break;
default:
return false;
}
});
toggleDIvDisplay();
});
This is my Textboxes and search button in view:
<div class="clearfix" style="margin-top:20px">
Search By:
#Html.DropDownListFor(model => model.SearchMethod, Model.AvailableSearchMethods, new { onchange = "toggleDIvDisplay(this.value)" })
</div>
<div id="divAppName" class="pull-left" style="margin-top:35px">
First Name:
#Html.TextBoxFor(model => model.FirstName)
Last Name:
#Html.TextBoxFor(model => model.LastName)
</div>
<div id="divSSN" class="pull-left" style="margin-top:35px">
SSN:
#Html.TextBoxFor(model => model.SSN)
</div>
<div id="divRemref" class="pull-left" style="margin-top:35px">
RemRef:
#Html.TextBoxFor(model => model.RemoteRefNumber)
</div>
<div class="pull-left" style="margin-top:35px;margin-left:50px">
<button class="btn btn-success search pull-left">Search</button>
</div>
and this is the link in the menu:
<li>#Html.ActionLink("Application Document Lookup", "Search", "Doc")</li>
var searchMethod = $('##Html.IdFor(model => model.SearchMethod)').val();
the #Html is rendered on the server side (MVC).
Only after it is rendered and sent to your browser, your jQuery can see it.
Eventually, if you Inspect your page you will not find anything with an Id like this.
it should be $("#ID OF THE DROP DOWN HERE")
On the otherhand, jQuery cannot run the functions on your Model, so you have to either your View Or your jQuery to do so, but not both.