Pop-up message with var documents - javascript

I'm trying to make a form with pop up message where if the user doesn't fill up the input box nothing will happen and I'm done with that using required = "required" of input type number.
What I need is when the input box has been filled a message will pop up and says that the item is added when the button is clicked by the user.
Here's my code:
<label style="color:#000000;">Qty:
<input type="number" min="1" name="qty" required = "required" />
SCRIPT:
<script type="text/javascript">
function myFunction()
{
var a=document.forms["abc"]["qty"].value;
if (a!=null){
alert("Item has been successfully added to your Cart");
}
}
</script>
echo '<td>'.'<input name="but" type="image" value="'.$row3['id'].'"
src="images/button.png" onclick="myFunction()" />'.'</td>';

You missed the name of form - "abc" - in function myFunction You call element by
var a=document.forms["abc"]["qty"].value;

You have to use an id for your input tag.
<label style="color:#000000;">Qty:
<input type="number" min="1" id="qty" name="qty" required = "required" />
function myFunction()
{
var a=document.forms["abc"]["qty"].value;
if (a!=null && a!= ""){
alert("Item has been successfully added to your Cart");
}
}
Also check for empty fields

Related

How to know required field validation triggered or not? [duplicate]

This question already has answers here:
JavaScript validation for empty input field
(15 answers)
Closed 3 years ago.
I have a big form with lot of fields and most of them are required fields. so i wanted to show pop-up alert message saying please fill required field.
<input name="fname" id="fname" type="text" class="form-control" required>
also i m showing usual message below that particular field,
i need something like on submit click
If (some fields required field error got triggered )
{
show alert pop-up message ;
}
I am new to this thing so..
function checkEmpty()
{
var fname = document.getElementById('fname').value;
if(!fname)
{
alert('Field is empty')
}
}
<form onsubmit='checkEmpty'>
<!--Form contents-->
</form>
Validation with javscript can easily be bypassed since it happens in the client side.
Try this
<form onsubmit="myFunction()">
<input name="fname" id="fname" type="text" class="form-control" required>
<form>
Use the following Function to check fields
function myFunction() {
var fname=document.getElementById('fname').value;
if(!fname)
{
alert("please fill required field");
}
}
You can check multiple fields in if conditions by putting || Sign. eg you have 2 filed fname and lname. You can check by if(!fname || !name)
You need to show overall alert as well as individual error message below each required field.
To do so using jQuery,
<form>
<input name="fname" id="fname" type="text" class="form-control validateclass" required>
<span class="spnError"></span>
<input name="lname" id="lname" type="text" class="form-control validateclass" required>
<span class="spnError"></span>
<input id="btnClick" type="button" value="Submit Form"/>
</form>
<script type="text/javascript">
$(function () {
$("#btnClick").click(function()
{
$(".validateclass").each(function() {
var fieldValue =$(this).val();
if(fieldValue == null || fieldValue == "")
{
$(this).next().css( "color", "red" ).text("Field is required");
}
else
{
$(this).next().text("");
}
});
});
});
</script>

Validation of input field after value is inserted without button click Laravel HTML

I have a user with certain number assigned to them let's say 100. I have the value 100 passed to my view. There is an input field such that user can enter any value but if the value user enter is greater than 100 a warning must be displayed. I want this warning to be displayed as soon as user is finished entering the value and move to next input field. I want the warning to be shown without any button click.
Just add an oninput event to your input field and validate it with JavaScript.
<input type="text" value="100" oninput="validate()">
<script>
function validate() {
// validate
}
</script>
Or do it like here setting oninput event with Javascript
Suppose <input type="text" id="number" /> is input field.
$('#number').on('change', function(){
if(isNaN(parseInt($(this).val())) || $(this).val() > 100){
alert('You are doing wrong.');
$(this).focus().val(100);
}
})
$(document).ready(function(){
$('#number').on('change', function(){
if(isNaN(parseInt($(this).val())) || $(this).val() > 100){
alert('You are doing wrong.');
$(this).focus().val(100);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Number: <input type="text" id="number" /></label><br>
<label>Another Input<input type="text" id="number" /></label>

Updating Value of Input to user's Input

I'm trying to update a page by echoing the input of a user in real time through ajax. However, when a user types in something and clicks 'send' there is nothing echoed. But when I preset the input to a random word through html and click 'send' the word is shown. Why is this and how can I update the input value without manually doing so in html?
HTML
<input type="text" id="userName" name="typeit" value=""/>
<!-- Input containing preset value -->
<input type="text" id="userName" name="typeit" value="cindy"/>
<input type="button" id="text_value" value="send"/>
JQuery
// I used this to check if the actual input was being updated
$('#text_value').click(function() {
var text_value = $("#userName").val();
if(text_value=='') {
alert("Please enter a title first");
}else{
alert(text_value);
}
});
I think what you want is a keyboard event like keyup:
$('#userName').keyup(function() {
var text_value = $(this).val();
if(text_value=='') {
alert("Please enter a title first");
}else{
$("p").html(text_value);
}
});
Also id can only be used once on the page so you need to change one of them:
<input type="text" id="userName" name="typeit" value=""/>
<!-- Input containing preset value -->
<input type="text" id="somethingElse" name="typeit" value="cindy"/>
<input type="button" id="text_value" value="send"/>
<!--for my example-->
<p>Update</p>
FIDDLE
You have a mistake in your HTML as you define id="userName" twice. If you compare strings you always need the === identical operator. Try out this snippet:
// I used this to check if the actual input was being updated
$('#text_value').click(function() {
var text_value = $("#userName").val();
if (text_value === '')
alert("Please enter a title first");
else
alert(text_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Uname" name="typeit" value="" />
<!-- Input containing preset value -->
<input type="text" id="userName" name="typeit" value="cindy" />
<input type="button" id="text_value" value="send" />
<div id="test"></div>

Pass a javascript variable through a hidden input

Okay, I have javascript to calculate a dynamic price for an HTML form. The code is as follows:
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
This, with this input:
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
The javascript takes that value, calculates the price, and I want it to fill this:
<input type="hidden" name="price" value=""/>
I believe my javascript is correct. What do I need to do to the price to make it work?
Make sure you have these items wrapped in a <form> tag.
<form>
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
<br />
<input type="hidden" name="price" value=""/>
</form>
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
I have a working demo here: http://jsfiddle.net/P55ge/
In the demo I have made the price input a text field instead of a hidden field for ease of seeing the value being set.
Also note, that the field is only updated when you enter a valid number and then click off the field input. The following quote is from the jquery documentation for .change() http://api.jquery.com/change/
Now when the second option is selected from the dropdown, the alert is
displayed. It is also displayed if you change the text in the field
and then click away. If the field loses focus without the contents
having changed, though, the event is not triggered.

Display Counter Number for Pre-Populated Input Field

I have a PHP page that pulls data from a database and auto-populates an input box. The code below is of a counter that displays how many characters are in a field upon typing.
However, when the PHP page is pulled up with the field populated, the counter says "0" until I type something in. How can I change the code so the counter displays how many characters are in the auto-populated field without me having to type something in? And then of course it should update when I do type something in.
<script language="JavaScript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) {
field.value = field.value.substring(0, maxlimit);
countfield.value = 'max characters';
// otherwise, update 'characters left' counter
}else {
countfield.value = field.value.length;
}
}
</script>
<center>
<form name=myform action="#">
<font size="1" face="arial, helvetica, sans-serif">
( You may enter up to 125 characters. )<br>
<input type="text" name="message" id="message"
onKeyDown="textCounter(this.form.message,this.form.remLen,125);"
onKeyUp="textCounter(this.form.message,this.form.remLen,125);"
>
<br>
<input readonly type=text name=remLen size=3 maxlength=3 value="0"> characters total</font>
</form>
</center>
Use window.document.onload to call your textCounter function
something like
<script>
window.document.onload=function(){
var form = document.getElementsByName('myform')[0];
textCounter(form.message,form.remLen,125);
};
....
Or just call your function on the onchange event like
<input type="text" name="message" id="message"
onchange="textCounter(this.form.message,this.form.remLen,125);" >

Categories