I currently have these two input text fields with different search functions and I'm trying to make it so that only 1 search function can go through after an onclick -event, depending on which input field is empty.
HTML;
<form onsubmit="return false" id="searchForm">
<input type="text" id="searchGroup" placeholder="Search group" autocomplete="off">
<input type="text"id="searchRoom" placeholder="Search room" autocomplete="off">
</form>
<div id="navBtns">
<button type="button" class="navForward" id="plus" onclick="forward();"></button>
<button type="button" class="navBackward" id="minus" onclick="backward();"></button>
</div>
This is what I've tried in JavaScript, but I can't get it to work;
function forward() {
if (searchGroup.length === 0) {
roomForward();
} else if (searchRoom.length === 0) {
groupForward();
}
}
function backward() {
if (searchGroup.length === 0) {
roomBackward();
} else if (searchRoom.length === 0) {
groupBackward();
}
}
So, the idea is when text input searchGroup is empty, it only executes the function when searchRoom has some input and vice versa.
Any quick and effective ways I could solve this?
You need to add 'value' before the length property. So it should be 'searchGroup.value.length' for example.
Related
I want to get input from the user in a type="number" text box.
the limitation is a number between 1994-1998.
I currently have two buttons. One "submit" button and a second ("button") button that goes to the next screen.
I want to make the 2 buttons one.
Which means that as soon as I click the "Move to Next page" button, the input is also checked.
And you can move to the next screen only with proper input.
would much rather do it only with HTML and less with JavaScript if possible.
If there is no option then it is also possible with JavaScript.
function check () {
console.log('Checked!');
}
<div>
between 1994 and 1998: <input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit">
Calculate the answers!
</div>
</div>
<div class="box" id="section6">
<h1>fin!</h1>
<div class="question-text">
<input style="padding: 20px;" type="button" class="btn" onclick="check();">check!!!
</div>
</div>
From what I understand you want to go to next page only if input is correct then check this out. I have created a form and placed your html inside it. Now the submit button will only work if check function return true.
function check(){
//return true, if correct
//return false, if incorrect
return true;
}
<form action='yourURLforNextPage' method="POST">
Between 1994 and 1998:
<input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit" onclick="return check();">
</form>
function check(){
let val = document.getElementById("section5input");
if((val.value!= "" && null) && (val.value> 1994 && val.value<1998) ){
//code to render to next screen
}
}
As stated in the topic I need to evaluate two fields, one from a drop-down menu item, and one for a text input type field. both in HTML of course. I want to test if the fields are empty, zero, whatever in that context.
I have tried to alter the code, but cannot seem to find the right code.
$(document).ready(function() {
$(function() {
$("#companyDialog").dialog({
autoOpen: false
});
$("#companyButton").on("click", function() {
$("#companyDialog").dialog("open");
});
});
// Validating Form Fields.....
$("#companySubmit").click(function(e) {
var comnpanyname = $("#companyname").val();
var editcompanyscombo = $("#editcompanyscombo").val();
if (companyname === '' || editcompanyscombo === '') {
alert("Please fill all fields marked with an *!");
e.preventDefault();
} else if (editcompanyscombo === '0') {
alert("Select comany to update!");
e.preventDefault();
} else {
alert("Form Submitted Successfully.");
}
});
});
<div class="container">
<div class="main">
<div id="companyDialog" title="Edit company">
<form action="" method="post">
<## CompanyEditCombo ##><br>
<label>New company name:</label>
<input id="companyname" name="companyname" type="text">
<input id="companySubmit" type="submit" value="Submit">
</form>
</div>
<input id="companyButton" type="button" value="Open Company Edit Dialog Form">
</div>
</div>
The fields pop up, but they do not alert if the values are zero or empty.
So far I could see from these snippets, please replace === '' and === '0' by == null
(Double equality comparison operator does not aimed to compare the types. That is why, one should use it because null is type object. s. Developer Mozilla)
I am just trying to increment a number in a form. This works but the input is big, tried to size with no luck. And I don't want the increment up/down inside the input box. Changing the box to text, gets me the right sizing and no up/down. But the increment doesn't work.
Is there an easier way. Also when I put inside a <form> tag, the plus minus button don't work.
function HaFunction() {
document.getElementById("HNumber").stepUp();
}
function HmFunction() {
document.getElementById("HNumber").stepDown();
}
Number: <input type="number" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button onclick="HaFunction()"><b>+</b></button>
<button onclick="HmFunction()"><b>-</b></button>
</span>
You can make the input smaller with CSS:
<input style="width:40px" type="number" id="HNumber" class=verd15 value="0">
Hope this helped
You can write your own function that increments the number in a text input.
If you have a form, make sure your buttons use type="button". By default it's type="submit", so clicking on the button will submit the form and you'll reload the page.
function addToInput(element, amount) {
var val = parseInt(element.value, 10) || 0;
val += amount;
element.value = val;
}
function HaFunction() {
addToInput(document.getElementById("HNumber"), 1);
}
function HmFunction() {
addToInput(document.getElementById("HNumber"), -1);
}
<form>
Number: <input type="text" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button type="button" onclick="HaFunction()"><b>+</b></button>
<button type="button" onclick="HmFunction()"><b>-</b></button>
</span>
</form>
I'm new to javascript / jquery so I may be missing something obvious, but I've found solutions that disable the submit button until all text fields are filled, and I've found solutions that disable it until a file is chosen. However, my form consists of a file input and 3 text fields and I cannot find a way of it being disabled until all text fields AND a file is chosen.
The distilled version of the code I'm working with is here:
HTML
<div>
<input type="file" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
</div>
JS
$('.submit').click(function() {
var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if(empty.length) {
$('.submit').prop('disabled', false);
}
});
})()
Thanks for your help
https://jsfiddle.net/xG2KS/482/
Try capture the event on those field and checking the empty values by using another function, see below code :
$(':input').on('change keyup', function () {
// call the function after
// both change and keyup event trigger
var k = checking();
// if value inc not 0
if (k) $('.submit').prop('disabled', true);
// if value inc is 0
else $('.submit').prop('disabled', false);
});
// this function check for empty values
function checking() {
var inc = 0;
// capture all input except submit button
$(':input:not(:submit)').each(function () {
if ($(this).val() == "") inc++;
});
return inc;
}
This is just an example, but the logic somehow like that.
Update :
Event Delegation. You might need read this
// document -> can be replaced with nearest parent/container
// which is already exist on the page,
// something that hold dynamic data(in your case form input)
$(document).on('change keyup',':input', function (){..});
DEMO
Please see this fiddle https://jsfiddle.net/xG2KS/482/
$('input').on('change',function(){
var empty = $('div').find("input").filter(function() {
return this.value === "";
});
if(empty.length>0) {
$('.submit').prop('disabled', true);
}
else{
$('.submit').prop('disabled', false);
}
});
[1]:
The trick is
don’t disable the submit button; otherwise the user can’t click on it and testing won’t work
only when processing, only return true if all tests are satisfied
Here is a modified version of the HTML:
<form id="test" method="post" enctype="multipart/form-data" action="">
<input type="file" name="file"><br>
<input type="text" name="name"><br>
<input type="text" name="email"><br>
<button name="submit" type="submit">Upload</button>
</form>
and some pure JavaScript:
window.onload=init;
function init() {
var form=document.getElementById('test');
form.onsubmit=testSubmit;
function testSubmit() {
if(!form['file'].value) return false;
if(!form['name'].value) return false;
if(!form['email'].value) return false;
}
}
Note that I have removed all traces of XHTML in the HTML. That’s not necessary, of course, but HTML5 does allow a simpler version of the above, without JavaScript. Simply use the required attribute:
<form id="test" method="post" enctype="multipart/form-data" action="">
<input type="file" name="file" required><br>
<input type="text" name="name" required><br>
<input type="text" name="email" required><br>
<button name="submit" type="submit">Upload</button>
</form>
This prevents form submission if a required field is empty and works for all modern (not IE8) browsers.
Listen for the input event on file and text input elements, count number of unfilled inputs and, set the submit button's disabled property based on that number. Check out the demo below.
$(':text,:file').on('input', function() {
//find number of unfilled inputs
var n = $(':text,:file').filter(function() {
return this.value.trim().length == 0;
}).length;
//set disabled property of submit based on number
$('#submit').prop('disabled', n != 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="file" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
</div>
For my approach, I'd rather use array to store if all the conditions are true. Then use every to make sure that all is true
$(function(){
function validateSubmit()
{
var result = [];
$('input[type=file], input[type=text]').each(function(){
if ($(this).val() == "")
result.push(false);
else
result.push(true);
});
return result;
}
$('input[type=file], input[type=text]').bind('change keyup', function(){
var res = validateSubmit().every(function(elem){
return elem == true;
});
if (res)
$('input[type=submit]').attr('disabled', false);
else
$('input[type=submit]').attr('disabled', true);
});
});
Fiddle
Here is my code :
<form>
<input type="text" id="input"/>
<br/>
<div id="buttons">
<input id="search" onclick="search()" type="button" value="Search"/>
<input type="button" value="Random"/>
<script type="text/javascript">
function search() {
var search = document.getElementById('search');
var int = setInterval(function() {
if (search.value.length == 6) search.value = 'Searchi';
else if (search.value.length == 7)
search.value = 'Searchin';
else if (search.value.length == 8)
search.value = 'Searching';
else {
search.value = 'Search';
}
//clearInterval( int ); // at some point, clear the setInterval
}, 500);
}
</script>
</div>
</form>
the button function is not working when <form> element is in the code. by removing the form element you will see that the JavaScript works! I want to know what is the problem? and how can I fix it?
Also, is there a better code for the result that I want? Somebody told me that I am using an old method of JavaScript!
Change the element id-search which hides in IE the function search of the global object:
<input id="search" onclick="search()" type="button" value="Search"/>
Should be:
<input id="search-suffix" onclick="search()" type="button" value="Search"/>
P.S.
int is a reserved word in javascript though it doesn't do anything in the meanwhile, just like class and private etc', thus should be avoided.