Question:--
I am using following HTML code showing error message using tool tip whenever length of Textbook equal to zero,
but i couldn't set my defined message inside tool tip.
<body class="claro">
<form action="">
Enter Name:--
<input type="text" name="firstname" data-dojo-props="" data-dojo-type="dijit.form.TextBox"
trim="true" id="firstname" propercase="true">
<button id="button4" data-dojo-type="dijit.form.Button" type="button">Submit
<script type="dojo/method" event="onClick" args="newValue">
alert("Value selected is: "+newValue);
var firstNameId=dijit.byId("firstname").value;
alert('firstNameId.length:----'+firstNameId.length);
if(firstNameId.length==0)
{
var textBox = dijit.byId("firstname");
dijit.showTooltip(
textBox.get("invalidMessage"),
textBox.domNode,
textBox.get("justMessage"),
!textBox.isLeftToRight()
);
}
else
{
alert('wrong');
);
}
<br>
Help me out....
It's been a while since you posted this question, but if you still need it, here's an answer.
Dijit/form/TextBox doesn't have a showTooltip method. To show a tooltip you can instead call something like:
var textBox = dijit.byId("firstname");
textBox.invalidMessage = "Whatever you want";
Tooltip.show(textBox.get("invalidMessage"),
textBox.domNode, textBox.get("tooltipPosition"),
!textBox.isLeftToRight());
Be sure to include dijit/Tooltip!
Related
Github repo: https://github.com/tomkovladko/goormProblem
I posted my Todolist App(from Colt's lecture on Udemy) on Goorm and everything works just fine except one thing.
I tried to make a POST method so that if you press enter it goes to /addItem and creates and add new <li> to the body.
that unfortunately doesn't work and i just get this:
{ newItem: '' }
I compared it to PostRequestDemo that Colt did and it's almost the same code, here:
Mine
app.post("/newItem", function(req,res){
var newItem = req.body.newItem
console.log(newItem) #here is where i get the empty string... it should print something i inputed to the form (for example "banana")
res.redirect("/")
})
---------------------
<form action="/newItem" method="POST">
<input type="text" name="newItem" placeholder="Add New Todo">
</form>
Colt's
app.post("/addFriend", function(req, res){
var newFriend = req.body.newFriend
friends.push(newFriend)
res.redirect("friends")
})
---------------------
<form method="POST" action="/addFriend">
<input type="text" name="newFriend" placeholder="Name" required>
<button>Submit</button>
</form>
if you need more code just let me know bum I'm very very confused because I just started using goorm and express and all of that
I'm running into a really baffling problem where I have an extremely simple (read, newbie trying to understand) web form. The form looks like this:
<form id="myform">
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
</form>
Then I have some also very simple js that I just want to use to check what the value is that the user has before doing some other things and submitting.
function search()
{
var form = document.querySelector("form");
s = form.elements[0].value;
alert(form.elements[0].type);
alert(form.elements[0].value);
}
What I don't understand is why, whatever I do, the first alert shows type "text" like I want, and the second one returns nothing at all. It doesn't matter what's in the field, when I submit, it goes away before the javascript even catches it.
I also tried
document.forms["myform"].addEventListener("submit", function(event) {
event.preventDefault();
});
And it seemed to have no effect on the fact that the page always submits when I refresh, but it did stop my button from submitting.
;tldr I just want the text value from my text field so I can do some validation, but it's always empty.
edit
Let me know if I can "close" questions. The problem was how I bound the function to the button, which I hadn't even considered. Be careful with those "()"
You may have to change the keyword "search" to something else like:
<script type="text/javascript">
function doSearch() {
var t = document.getElementById('t');
alert(t.type);
alert(t.value);
}
</script>
Then this will work:
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
do search
Fairly new to ASP.NET CORE, come from WPF background.
Having some trouble understanding how to pass local variables around.
I have a form:
<span id="clock"></span>
<form asp-action="Create" asp-controller="Session" method="post" asp-route-session="#Model.Session">
<input asp-for="#Model.Session.ClientId" class="form-control" style="display: none" />
<ejs-dropdownlist id="clinics" dataSource="#Model.LinkableClinics" placeholder="Select Clinic" popupHeight="220px" ejs-for="#Model.Session.ClinicId">
<e-dropdownlist-fields text="Name" value="ClinicId"></e-dropdownlist-fields>
</ejs-dropdownlist>
<ejs-dropdownlist id="employees" dataSource="#Model.LinkableEmployees" placeholder="Select Employee" popupHeight="220px" ejs-for="#Model.Session.EmployeeId">
<e-dropdownlist-fields text="Name" value="EmployeeId"></e-dropdownlist-fields>
</ejs-dropdownlist>
<ejs-datetimepicker id="startdatetimepicker" placeholder="Select a date and time" ejs-for="#Model.Session.StartTime"></ejs-datetimepicker>
<ejs-datetimepicker id="enddatetimepicker" placeholder="Select a date and time" ejs-for="#Model.Session.EndTime"></ejs-datetimepicker>
<div class="form-group">
<input type="submit" value="Create Session" class="btn btn-primary" />
</div>
</form>
and I would like to add asp-route-offset to my form but I can't figure out how to pass a locally calculated variable into this routing.
This is a post, so I can't just use Url.Redirect() custom url builder.
I've also tried to add a hidden field and run a calculation inside the "value"
<input asp-for="#Model.Session.Offset" class="form-control" style="display: none" value="getValue()"/>
I'm calculating my offset in my <script> section as follows:
<script type="text/javascript">
window.onload = loaded;
function loaded() {
var clockElement = document.getElementById("clock");
function updateClock(clock) {
clock.innerHTML = new Date().getTimezoneOffset() / 60;
}
}
</script>
I've tried setting variables or the #Model object here, but nothing seems to want to stick.
Anyone have experience trying to pass a variable like this? Or a better way to pass UTC offset into my timestamp?
You're trying to mix and match things happening server-side and client-side. Your script which gets the offset runs client-side, after the server has sent the response. Your Razor code runs server-side, before the client has even received the page.
Long and short, if you want to update the value, you have to do it via client-side means, namely JavaScript:
document.getElementById('#Session_Offset').value = new Date().getTimezoneOffset();
You can't use something like asp-route-offset at all, because the offset is coming from the client and can't be used to generate the post URL. As a result, you'll need to stick with the hidden input approach.
I'm trying to get a variable value from a number input without success.
HTML:
<input type="number" min="0" max="5" name="quantity" id="quantity" class="quantity" value="1" />
<div class="selectedvalue"></div>
SCRIPT:
$().ready(function() {
var quantity = $('input[type=number][name=quantity]').val();
$(".selectedvalue").html(quantity);
});
JSFIDDLE
I only can get the attribute value (1)in the number input but not the actual selected value.
Check the example inside W3schools.
In your example, you use the value 1, and always show the value 1, because your set inside the tag.
You does not need jQuery for get this.
The type from your input is number, and add the id from your number for get the value by Id with document.getElementById("yourIdFromInput").value;
<!DOCTYPE html>
<html>
<body>
Number: <input type="number" id="myNumber" value="2">
<p>Click the button to display the number of the number field.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> input elements with type="number" are not supported in IE 9 and earlier versions.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myNumber").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The <p> with innerHTML will show inside html the value with this script.
Reference:
all Explication about that here
Code W3schools.
I have searched high and low for solution for this but I have not been able to find anything. I am playing around with the dojo ValidatationTextBox dijit. I have tried to both declarative and programmatic methods and every time it comes up as a readonly input field. The code provided shows my attempt using the declarative method. I got the exact same result using a programmatic route similar to the "new textbox" calls below. In both methods the html for the ValidatationTextBox is generated with two child divs. One with class=dijitReset dijitValidationContainer and one with class=dijitReset dijitInputField dijitInputContainer. It is the later class that holds all of the html input and dijit properties and the former that defines the form as readonly and also gives it a value of 'x'. What am I doing wrong? Any help or explanation regarding why this is not working will be much appreciated. Thanks
<script>
require(["dojo/parser", "dijit/form/TextBox", "dijit/form/ValidationTextBox","dojo/domReady!","dojox/validate","dojox/validate/web"],
function(parser, textbox, ValidationTextBox,validate){
parser.parse();
new textbox({
id: "fName",
maxlength: 25,
name: "fName",
trim: "true",
propercase: "true"
}, "fName");
new textbox({
id: "lName",
maxlength: 25,
name: "lName",
trim: "true",
propercase: "true"
}, "lName");
});
</script>
</head>
<body class="tundra">
<h3>Sign-up for our great offers:</h3>
<form id="registration_form">
<div class="grouping">
<label for="fName">First Name:</label>
<input id="fName" /><br />
<label for="lName">Last Name:</label>
<input id="lName" /><br />
<label for="email">Your Email:</label>
<input type="text" name="email" required="true" readonly="false"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp:'[a-z0-9._%+-]+#[a-z0-9-]+\.[a-z]{2,4}', invalidMessage:'Please enter a valid e-mail address'" /><br />
<button id="btn">Sign Up!</button>
</div>
</form>
</body>
I think the problem may be with your regExp however you can write a keyup function and call it when the user types it will validate the email address using Dojo's built in email validation. Also for your fname and lname fields try setting required = "true". You can do this to implement on the fly validation since if your fields are not required you need to call validation on your form when you post. You can refer to this Form Validation Fiddle
HTML
<input type= "text" name ="email" data-dojo-type="dijit/form/ValidationTextBox" missingMessage="Email Address Required" invalidMessage="Invalid Email Address" onkeyup="validateMe(this.value);" required="true" />
js
function validateMe(email){
var isValid = false;
isValid = dojox.validate.isEmailAddress(email);
return isValid;
}