I've a textBox control and would like my users to only be able to enter ....#firm1.com' or '....#firm2.com'
How can I do this with a JavaScript function? The function must take a textbox value.
It doesn't make sense to give the user a textbox but allowing him to write two values only,
You should use a dropdown instead:
<select>
<option value="0"> #firm1.com </option>
<option value="1"> #firm2.com </option>
</select>
Update:
If you really have to use textbox for some unknown reason:
$('#textboxId').change(function(){
if (!this.value.match(/(#firm1.com|#firm2.com)$/g))
alert('invalid value');
});
Live DEMO
Try this code-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var patt1 = "[A-Za-z0-9._%+-]+#firm(1|2).com";
function demoShowMatchClick(str) {
var re = new RegExp(patt1);
var m = re.exec(str);
if (m == null) {
document.getElementById("match").innerHTML = "no match";
} else {
document.getElementById("match").innerHTML = "match";
}
}
</script>
</head>
<body>
<span id="match"></span>
<input type="text" onkeyup="demoShowMatchClick(this.value)" />
</body>
</html>
Related
Is there a way by which I can validate select two only to allow a minimum number of selection length as it has for maximumSelectionLength.
I have tried minimumSelectionLength but it does not work for me :
<link rel="stylesheet" type="text/css" href="select2/select2.min.css" />
<script src="select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selecte").select2();
maximumSelectionLength: 15;
});
</script>
So I want the button not to submit until the user selects up to like 3 items.
Any ideas or suggestion.
select2 plugin don't have any attribute for this purpose so you could validate the select element want in submit event make you condition then submit when it's achieved :
$('form').on('submit', function(){
var minimum = 3;
if($(".selecte").select2('data').length>=minimum)
return true;
else
return false;
});
Hope this helps.
$(".selecte").select2();
$('form').on('submit', function(){
var minimum = 2;
if($(".selecte").select2('data').length>=minimum){
alert('Submited...')
return true;
}else {
alert('Please shoose at least '+minimum+' item(s)')
return false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<form>
<select multiple class="selecte" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<br>
<input type='submit' />
</form>
var min = 1;
$('input[type="submit"]').on('click', function(event){
if ($('#group_select option:selected').size() < min) {
alert("Need at least one group");
event.preventDefault();
}
});
Popup a alert if the min requirement is not satisfied.
Use .val() in your JS to get the value of the input, after that you can use regex in an if statement that if it returns true ( meets the value requirement set by regex ) then it will submit. You can use console.log() the value, to see what data you are working with. (regex101.com is a great place to build your regex code.)
I'm trying to learn JavaScript but I've gotten stuck.
Here's a JSFiddle demonstrating the code below.
The problem here is that I want a function or something to calculate the total, but I do not know how to pick up the variable from inside the if-statement.
Is there any way to do this? Thanks in advance!
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function funky(){
var mengde = document.getElementById("options").value;
var valgt = document.getElementById("fruit").value;
if(valgt == "banan") {
mengde*=10;
document.getElementById("totalt1").innerHTML = mengde;
}
if(valgt == "eple") {
mengde*=20;
document.getElementById("totalt2").innerHTML = mengde;
}
if(valgt == "melon") {
mengde*=30;
document.getElementById("totalt3").innerHTML = mengde;
}
if(valgt == "appelsin") {
mengde*=40;
document.getElementById("totalt4").innerHTML = mengde;
}
}
</script>
</head>
<body>
<input id="options" type="text"></input>
<select id="fruit">
<option>Velg Frukt!</option>
<option value="banan">Banan</option>
<option value="eple">Eple</option>
<option value="melon">Melon</option>
<option value="appelsin">Appelsin</option>
<option value="totis">Totalt</option>
</select>
<button onclick="funky()">Submit!</button>
<p id="totalt1"></p>
<p id="totalt2"></p>
<p id="totalt3"></p>
<p id="totalt4"></p>
</body>
</html>
If I understand correctly, you're looking for something like this (although not the nicest javascript I'm trying to keep it similar to the approach you started out with)
http://jsfiddle.net/YZBL7/
if(valgt == "banan") {
total = mengde + " banan costs " + mengde * 10;
}
//....
document.getElementById("totalt1").innerText += total + "\n";
There are two selection buttons which need client-side validation. The user must select one of them, and if user chooses one, the other one will be disabled automatically.
This my script:
<html>
<head>
<script type="text/javascript">
function Check() //this the funciton for diasbled
{
var x =document.getElementById("supexp1");
var y =document.getElementById("supexp2");
if(x.value != "")
{
document.form1.supexp2.disabled=true;
}
else if(y.value != "")
{
{
document.form1.supexp1.disabled=true;
}
}
}
</script>
</head>
<body>
<form method="POST" action="destination.php" id="form1">
<select name="SUPEXP" id="supexp1" data-native-menu="false" onChange="Check()">
<option >Ekspedisi Local1</option> //this selection 1
<option >Ekspedisi Local2</option> //this selection 1
<option >Ekspedisi Local3</option> //this selection 1
</select>
<select name="SUPEXP" id="supexp2" data-native-menu="false" onChange="Check2()">
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
</select>
</form>
</body>
</html>
I use the jquerymobile framework and selection connect to the database. That code (JavaScript) is not running.
I hope this is what you trying to do based on your description here is a jsfiddle
$(document).ready(function() {
$('#supexp1').change(function() {
$('#supexp2').attr("disabled" , "disabled")
});
$('#supexp2').change(function() {
$('#supexp1').attr("disabled" , "disabled")
});
});
Try this code
if(x.value != ""){
document.getElementById("supexp2").disabled=true;
} else if(y.value != "") {
document.getElementById("supexp1").disabled=true;
}
I guess to get the value of the selected item you need to use some thing like this
var e = document.getElementById("supexp1");
var x = e.options[e.selectedIndex].value;
instead of
var x =document.getElementById("supexp1");
do the same for Y
Can any one give me a sample code that gets the selected value from an existing combo box?
I have this code but its not doing anything:
function check ()
{
var e = document.getElementById("ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
heres a img of the code
and the code
<select id="ticket_category_clone" name="ticket[category]" hdpp="ticket_category">
<option value=""></option><option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Rede" selected="selected">Rede</option>
<option value="Pedidos">Pedidos</option>
<option value="Formação/Dúvida">Formação/Dúvida</option>
<option value="Outro">Outro</option><option value="#edit_categories#">Edit Categories...</option></select>
what i want its find a way to get the selected value fo that combobox
There is an unnecessary hashtag; change the code to this:
var e = document.getElementById("ticket_category_clone").value;
I use this
var e = document.getElementById('ticket_category_clone').value;
Notice that you don't need the '#' character in javascript.
function check () {
var str = document.getElementById('ticket_category_clone').value;
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
It probably is the # sign like tho others have mentioned because this appears to work just fine.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<select id="#ticket_category_clone">
<option value="hw">Hardware</option>
<option>fsdf</option>
<option>sfsd</option>
<option>sdfs</option>
</select>
<script type="text/javascript">
(function check() {
var e = document.getElementById("#ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str === "Hardware") {
alert('Hi');
}
})();
</script>
</body>
I want to have a drop down menu where a user can select from several predefined options but i also want to give him the option of inserting a user specific value, i was thinking having one of the options as "user specific" which will in turn allow the user to insert a user specif entry in a text box that appears or is editable when user selects the "user specific" option. any one have any ideas how i can implement this is HTML and Javascript?
thank you
Attach an onchange event to the select and when he selects "Custom" or something like that, make some input visible below the select. This input should be initially hidden (css display:none). When the user selects "custom" make it display:inline.
Jukka wrote an article on how to create a combobox-like effect. I've only skimmed it, but it looks accessible and his content is usually of very high quality.
You can go about like:
<select id="myid" onchange="doIt(this);">
optons...
</select>
<script type="text/javascript">
function doIt(field) {
if (field.value === 'user specific')
{
var tbox = document.createElement('input');
tbox.setAttribute('type', 'text');
document.form_name.appendChild(tbox);
}
}
</script>
See here: http://jsfiddle.net/EscRV/
html
<select id="mySelect">
<option>value 1</option>
<option value="[new]">new</option>
</select>
js
// get a cross-browser function for adding events, place this in [global] or somewhere you can access it
var on = (function(){
if (window.addEventListener) {
return function(target, type, listener){
target.addEventListener(type, listener, false);
};
}
else {
return function(object, sEvent, fpNotify){
object.attachEvent("on" + sEvent, fpNotify);
};
}
}());
var mySelect = document.getElementById("mySelect");
on(mySelect, "change", function(){
if (this.value === "[new]") {
var newOptionName = prompt("input new option");
if (newOptionName){
mySelect.options[mySelect.options.length] = new Option(newOptionName);
this.value= newOptionName;
}
}
});
Following code will help to solve your problem.
<html>
<head></head>
<body>
<select id="sbox">
<option value="1" onclick="hideUserOption();">First option</option>
<option value="2" onclick="hideUserOption();">second option</option>
<option value="3" onclick="showUserOption();">User Specific</option>
</select>
<div id="userOptions" style="display:none">
<input type="text" />
<input type="submit" value="Save"/>
</div>
<script type="text/javascript">
function showUserOption() {
var userOptions = document.getElementById("userOptions");
userOptions.style.display = "block";
}
function hideUserOption() {
var userOptions = document.getElementById("userOptions");
userOptions.style.display = "none";
}
</script>
</body>
</html>