I am trying to create a prompt dialog box using alertifyjs that has multiple input boxes. I have managed to create the dialog box to show the multiple boxes but I cant seem to make a reference to the inputs that user provides.
I want to write if statement that carries out action based on user input when they press OK. However, the OK button doesnt seem to be working and also the if-statements don't work as well. I am not sure what I might be doing wrong, can someone please help me.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css"/>
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;" >
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value"/>
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value"/>
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title',"Update");
</script>
</body>
</html>
Link to JSfiddle: http://jsfiddle.net/1qouxdkc/4/
In your script you call a function named updateListItems(inpOneVal,inpTwoVal);
As that function is not declared anywhere, it errors, so with that temporarily commented out, it works.
Stack snippet
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title', "Update");
</script>
</body>
</html>
Related
Iam appending a form from desktop view and adding it to mobile view (including scripts) using append() . Since Iam appending same class name and ID for form elements., on submitting form., it is identifying the mobile layout form and passing empty value on trying to get value using document.getElementsByClassName('txtbox').value.
As per my requirement., I need to give index to identify each form while appending. like document.getElementsByClassName('txtbox')[0].value. I have done an approach for same. But not getting how to increment index value on appneding. I have created plunker for same. Please let me know what I have missed.
Here is the sample code
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
$("form").submit(function(){
console.log(document.getElementsByClassName('txtbox').value);
/*console.log(document.getElementsByClassName('txtbox')[0].value);
console.log(document.getElementsByClassName('txtbox')[1].value) ; */
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You may use $(this).find() to select .txtbox inside the form.
$("form").submit(function() {
console.log($(this).find('.txtbox').val());
return false; // for debugging
});
Also, please note that id should be unique in the documnt.
I have passed form object inside function call and used that param to identify current form.
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
});
function submitForm(form){
var txtValue = $(form).find('.txtbox').val();
console.log(txtValue);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();submitForm(this);">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You can iterate through you class list like so:
var txtboxes = document.getElementsByClassName("txtbox");
for(var i = 0; i < txtboxes.length; i++){
// ... process each element here
$(txtboxes[i]).append(data);
}
I have created a custom confirm dialog using alertifyjs and am trying to set the labels and title, however, I can't seem to achieve both at once. Please can someone help.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set({title:"Update"},{labels:{ok:'Forward', cancel: 'Backward'}});
</script>
</body>
</html>
This is how I have attempted
...}).set({title:"Update"},{labels:{ok:'Forward', cancel: 'Backward'}});
Please can someone tell me how I can achieve this because I want to set custom title and title for the dialog box. I been on the documentation but wasn't able to achieve what I wanted.
Your syntax is wrong
Change
.set({title:"Update"},{labels:{ok:'Forward', cancel: 'Backward'}});
to
.set({title:"Update"}).set({labels:{ok:'Forward', cancel: 'Backward'}});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set({title:"Update"}).set({labels:{ok:'Forward', cancel: 'Backward'}});
</script>
</body>
</html>
I have this text field hidden with HTML hidden code, now when the user enter an invalid input I use javascript to unhide the text field and display an error message, this is what is suppose to happen.
I have seen a lot of css style like
`style.visibility = 'visible';` and `style.display='block';`
But none of them are working for me what happens is that the error text shows for less than a second and then disappears, any one would like to share their thoughts.
This is the complete code for better understanding, it's still not working in firefox and Edge while IE and Chrome wont do anything, in Firefox, it just blinks once on each button press and that about it.
Javascript:
</script>
function validate(){
var firstname = document.getElementById("fn").value;
if (firstname == "") {
document.getElementById("fn").style.visibility = "visible";
document.getElementById("fn").text = "ERROR";
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script>
</head>
<body>
<form id="enqForm">
<input id="fn" type="text" placeholder="First Name *" />
<input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>
Instead of changing the style, you can change the form's type attribute.
Using JavaScript - assuming you want to change lnspan to text:
document.getElementById('lnspan').type = 'text';
Style is not the same as the type attribute.
Also there's two id attributes in your <input>, you may want to change that.
**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">
</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the
users cannot change it and it also looks more professional
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>
My first post here #stackoverflow. Please bear with me.
Look at the code below. I want the javascript to post to an PHP (applybeta.php) document IF there is a '#' in the field with the name & id 'epost'. If there isn't a '#' in the field, a messagebox will pop up telling the user they entered an invalid e-mail address.
If you don't enter a '#' the message box shows up. But if you do enter a valid email it doesn't post to "applybeta.php", nothing happens at all. Anybody got an idea why? Sorry if the description is vague, hopefully you'll figure out what I mean :)
The e-post field got both an id and a name because I tried with both, none of them works.
<!DOCTYPE html>
<html>
<head>
<title>Binärklocka</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
<link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
<!-- table font --> <link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
}
else {
document.getElementById("minForm");
//z.submit();
//alert("hej");
}
}
</script>
<div id="wrap">
<div id="main">
<br>
<br>
<table id="nav">
<tr>
<td>Store</td>
<td>Our Products</td>
<td><img src="home.png" alt="hem" width="60" height="60"/></td>
<td>About Us</td>
<td>Contact</td>
</tr>
</table>
<hr id="linje1" />
</div>
</div>
<p id="binaryclock" onclick="showLink()">
We are looking for beta testers for our newly created clock!<br />
To participate, fill in the forms below with your real name</br />
and a valid e-mail address and a download link will appear.
</p>
<!-- Form that I want to post -->
<div id="applybeta">
<form action="apply.php" method="post" id="minForm" name="minForm">
<input type="text" placeholder="Full name" name="name" /><br />
<!-- checking this field for '#' -->
<input type="text" placeholder="E-mail" id="email" /><br /><br />
<!-- end of field -->
<input onclick="kollaepost()" type="button" name="submit" value="Send" /><br />
</form>
</div>
<!-- End of the form -->
<div id="dlink">
shdgfghClick here to download
</div>
<div id="bottomtext">
<p># 2015 ClockMasters Elite</p>
</div>
</body>
</html>
Instead of having an input of type button, try submit. Your onclick-function can then serve as a validation function by returning true or false, and thus influence whether the form will be submitted. Something like this:
<input onclick="return kollaepost()" type="submit" name="submit" value="Send" />
and:
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
return false;
}
return true;
}
</script>
Also see this question for a more detailed explanation on this method, in general.
You can submit your form using the .submit() method.
var fromElement = document.getElementById("minForm");
formElement.submit();
For further reference, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)