Is there any way to create prompt with two input fields? - javascript

Is there any way to create prompt in JavaScript with two input fields ?
I tried that code, but it didn't help me :
var a = prompt("A : ", "");
var b = prompt("B : ", "");
alert(a + "\n" + b);

This is not possible with an OS or native browser window popping up. You will have to create a custom overlay dialog.
I would advise using a library like jQuery UI to do this. You can then customize whatever is in the popup.
You can view a demo of the dialog here

Short of constructing your own using DOM methods and Input elements: No.

JavaScript Code
<script>
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
Html Code:
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text">
</fieldset>
</form>
</div>
<button id="create-user">Create new user</button>

function abrete() {
$("#dialog").dialog();
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog" title="Create new user" style="display:none;">
<p class="validateTips">All form fields are required.</p>
<form action='tuscript.php'>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text">
</fieldset>
</form>
</div>
<button onclick='abrete()'>Create new user</button>

Related

onsubmit function does not invoke correctly using Node.js

I want to make some validations when the form submitted. However when the form submitted validation function seems like invoking correctly. The alert part doesn't come up but when i try to alert like this
function validation(){
alert("somethinglol");
var username = $("#register.username").val().toString();
alert(username);
};
somethinglol appears but the second alert doesn't.
This is my get function:
app.get('/', (req, res) => {
res.render('index.ejs');
})
This is the index.ejs
<form id="form1" action="/" method="post" onSubmit="validation();">
<div class="form-group">
<label for="register.username">Username</label>
<input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId">
<small id="helpRegisterUsername" class="text-muted">You should enter a username.</small>
</div>
<div class="form-group">
<label for="register.password">Password</label>
<input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Enter a password.</small>
</div>
<div class="form-group">
<label for="register.confirm.password">Confirm password</label>
<input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Confirm password</small>
</div>
<input type="submit" id="registerSubmit" value="Submit"></input>
</form>
This is the script part of index.js which contains the validation() function.
<script>
function validation(){
alert($("#register.username").val().toString());
var username = $("#register.username").val().toString();
username = "somethinglol";
alert(username);
};
</script>
I have changed the script as external but it didn't work. I have changed the jquery cdn. I used $("#registerSubmit").click(...) instead of onSubmit but it didn't work again. I also tried something using async and await but if it's the problem I am not sure that I did it correctly.
with jquery you can use $( "#form1" ).submit(function( event ) { to perform an action before the submit
moreover to select id with dot (.) in jquery you have to use \\ before dot
$("#register\\.username")
$( "#form1" ).submit(function( event ) {
alert($("#register\\.username").val().toString());
var username = $("#register\\.username").val().toString();
username = "somethinglol";
alert(username);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" action="/" method="post" onSubmit="validation();">
<div class="form-group">
<label for="register.username">Username</label>
<input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId">
<small id="helpRegisterUsername" class="text-muted">You should enter a username.</small>
</div>
<div class="form-group">
<label for="register.password">Password</label>
<input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Enter a password.</small>
</div>
<div class="form-group">
<label for="register.confirm.password">Confirm password</label>
<input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Confirm password</small>
</div>
<input type="submit" id="registerSubmit" value="Submit"></input>
</form>

Toggle Button doesn't seem to be working?

Hi I'm sure I've written this code properly as I followed in the tutorial. I want the #booking-button to be clicked which should 'toggle' the #btn element to disappear. Essentially one is a box which contains information about a car and when user clicks 'Click here to Book' it should open the form. But for some reason it doesn't. I'm thinking it may have something to do with the CSS but I'm not sure.
Any tips on this?
<div class="form-wrapper">
<form action="#">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div class="car-info" id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
</div>
$(document).ready(function() {
$('#booking-button').on('click', () =>
{ $('#btn').toggle(); });
});
Now the form appears when user clicks Click Here to Book, while this button disappears.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper">
<form action="#" id="car-info" style="display: none;">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
<script>
$(document).ready(function() {
$('#booking-button').on('click', () => {
$('#car-info').toggle();
$('#btn').toggle();
});
});
</script>

How to make popup only invoke when form is actually submitted javascript

I have the following form:
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" required>
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" required>
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
I built a little popup that says thanks for signing up that should come up after the user has entered his data. However at the moment I have the problem that it also comes up when the user clicks the register button without entering any data (meaning the request does not fire due to the required tags in the fields). How do I make the popup only come up when the form is actually submitted?
Jquery for the popup:
$(window).load(function() {
$(".form-button").click(function() {
$('.popup').show();
});
});
I think you might be looking for the .submit event.
Using your example
$('.register-form').submit(function(e){
e.preventDefault(); // Stop the form submitting
$('.popup').show(); // Show the popup
e.currentTarget.submit(); // Now submit it!
});
Simply define ids on your each input to validate if both fields have value in it or not. Do like this
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" id="text1">
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
$(window).load(function() {
$(".form-button").click(function() {
let input1 = $('#text1').val();
let input2 = $('#input2').val();
if(input1 && input2){
//make your http req and then after getting your response open your popup
$('.popup').show();
}
});
});

Input field filled with value green correct sign appears but form not submitted

I want to submit form but form submit button does not work,
Please Guide me. I want to submit my form using javascript. Form validation is working fine but I am unable to submit my form. I am new user. If any one help me to submit this form.
I have a code:
});
<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="page-content">
<div class="form-v4-content">
<form class="form-detail" action="abc.html" method="post" id="myform">
<h2>REGISTER FORM</h2>
<div class="form-group">
<div class="form-row form-row-1">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" class="input-text">
</div>
<div class="form-row form-row-1">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name" class="input-text">
</div>
</div>
<div class="form-row">
<label for="your_email">Your Email</label>
<input type="text" name="your_email" id="your_email" class="input-text" required pattern="[^#]+#[^#]+.[a-zA-Z]{2,6}">
</div>
<div class="form-group">
<div class="form-row form-row-1 ">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="input-text" required>
</div>
<div class="form-row form-row-1">
<label for="comfirm-password">Comfirm Password</label>
<input type="password" name="comfirm_password" id="comfirm_password" class="input-text" required>
</div>
</div>
<div class="form-checkbox">
<label class="container"><p>I agree to the Terms and Conditions</p>
<input type="checkbox" name="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="register" value="Register">
</div>
</form>
</div>
</div>
I just want to submit my form. I don't know what is the problem
The form doesn't submit because you told it not to.
jQuery.validator.setDefaults({
debug: true,
From the docs:
debug (default: false)
Type: Boolean
Enables debug mode. If true, the form is not submitted...

how can load html page in a dialogue and open as popup

I have this separate html page which i want to open as dialogue in click of a button, is this possible? how can we do this?
<div id="dialog-form" title="Change Password">
<form>
<div class="border">
<label for="oldPassword">Old Password</label>
<input type="password" id ="oldPassword" placeholder="Enter Old Password">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" placeholder="Enter New Password">
<label for="retypePassword">Retype Password</label>
<input type="password" id="retypePassword" placeholder="Enter Retype password">
</div>
<div class="buttons">
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</form>
</div>
Yes and have a look at the link below to accomplish this, its pretty straight forward:
link
Since you did not want to use jquery mobile pop up
do this :
$('#dialog-form').click(function(){
window.open('url', 'window name', 'window settings');
return false;
});
at url, paste the link of the html file and also, you can name your window and add additional settings like height , width etc, if you are fine with the answer you can vote it positively thank you :)
For such think I suggest to use a style Framework like JQuery UI.
It's pretty simple and easily Setup:
For your example you would use:
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog-form" ).dialog();
});
</script>
</head>
<div id="dialog-form" title="Change Password">
<form>
<div class="border">
<label for="oldPassword">Old Password</label>
<input type="password" id ="oldPassword" placeholder="Enter Old Password">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" placeholder="Enter New Password">
<label for="retypePassword">Retype Password</label>
<input type="password" id="retypePassword" placeholder="Enter Retype password">
</div>
<div class="buttons">
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</form>
</div>
Have a look at this: https://jqueryui.com/dialog/
EDIT:
As Robert pointed out that you might Need to open the dialog from another Content page, you can use jQuery.load() Method with a callback to open the dialog:
$('#dialog-form').load('path-to-my-page', function() { $('#dialog-form).dialog('open'); });
You want to create a dialog, and add different HTML code by clicking different button?
1.Create a div, make it looks like a dialog. Don`t display it.
<div id="dialog-form" title="Change Password" style="display: none;"> </div>
2.Define variable like this:
var html = '<form>' +
'<div class="border">' +
'<label for="oldPassword">Old Password</label>' +
'<input type="password" id ="oldPassword" placeholder="Enter Old Password">' +
'<label for="newPassword">New Password</label>' +
'<input type="password" id="newPassword" placeholder="Enter New Password">' +
'<label for="retypePassword">Retype Password</label>' +
'<input type="password" id="retypePassword" placeholder="Enter Retype password">' +
'</div>' +
'<div class="buttons">' +
'<button id="submit">Submit</button>' +
'<button id="cancel">Cancel</button>' +
'</div>' +
'</form>';
3.Add $('#dialog-form').html(html).css('display', 'block'); in click handler.
Your can also hide the dialog by $('#dialog-form').html('').css('display', 'none');.
You easily open a dialog on button click using bootstrap.
If you use template for your project and you want to open a dialog on button click then sometimes jquery dialog not provide proper output as my experience so i use bootstrap dialog(model).
<div class="container">
<h2>Small Modal</h2>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#dialog-form">Change Password</button>
<div id="dialog-form" title="Change Password" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form>
<div class="border">
<label for="oldPassword">Old Password</label>
<input type="password" id ="oldPassword" placeholder="Enter Old Password">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" placeholder="Enter New Password">
<label for="retypePassword">Retype Password</label>
<input type="password" id="retypePassword" placeholder="Enter Retype password">
</div>
<div class="buttons">
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>

Categories