<li>
<div class="destination">
<img src="image/destination/chamba.jpg" alt="">
<div class="destinationDetails">
<h2>Chamba <h2>
<h3>Starting From Rs. 2500 <h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<li>
<div class="destination">
<img src="image/destination/parvati.jpg" alt="">
<div class="destinationDetails">
<h2>Parvati Valley <h2>
<h3>Starting From Rs. 2500 <h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Package</b></label>
<input type = "text" id="test2" name "teste2">
<button type="button" onclick="MyFunction()">Click To Fill Up</button>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I am using This Code To Make A Booking Page. I Want To Fill Up The Package Field Automatically when someone clicks "book now" or using a button to fill up the field by clicking on it.
For Example: If I click the "book now" button in the first "li", the package filled should be automatically filled up as "Chamba" and If I Click The "book now" button in second "li" the packages field should be automatically filled as "Parvati Valley".
Is there any way to do so...??
Thanks For Your Help In advance.
Add a function and set appropriate value. Consider this for learning purpose only.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function setPackage(packageName) {
document.querySelector('#test2').value = packageName;
}
<li>
<div class="destination">
<img src="image/destination/chamba.jpg" alt="">
<div class="destinationDetails">
<h2>Chamba
<h2>
<h3>Starting From Rs. 2500
<h3>
<button onclick="setPackage('Chamba');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<li>
<div class="destination">
<img src="image/destination/parvati.jpg" alt="">
<div class="destinationDetails">
<h2>Parvati Valley
<h2>
<h3>Starting From Rs. 2500
<h3>
<button onclick="setPackage('Parvati Valley');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Package</b></label>
<input type="text" id="test2" name "teste2">
<button type="button" onclick="MyFunction()">Click To Fill Up</button>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
Related
When I write my input to create a new card, all the inputs are activated. How can I avoid multiple entries?
<draggable :options="{ group: 'lists' }" group="lists" ghostClass="ghost" class="list-draggable">
<div class="list-card" v-for="categories in category" :key="categories.id" >
<div style="padding-left:20px"><button type="button" class="delete close btn btn-default" data-dismiss="modal" #click="deleteCategory(categories.id)"><h3>x</h3></button></div>
<label class="list-header" style="display:block;">
<input class="cat-name" v-on:blur="updateCategory(categories)" v-model="categories.name" />
</label>
<div class="list-content">
<card-list :listId="categories.id" :listName="categories.name" #setArticleId="setArticleId" />
</div>
<div class="list-footer">
<input type="text" class="input-cards" placeholder="Create a new card" v-model="title" #keyup.enter="cardName(categories.id)" />
</div>
</div>
</draggable>
Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!
I have a website where people can take surey's, it works in Chrome, Firefox but when using Edge or IE I have a problem.
When i try loging in at first there is no problem, I can navigate between several questionnaires, but when I click to start one, the form disappears and only the background of the login page is visible. No redirection and even stranger no error messages in the console.
I have tried searching online but since I am not quite sure what is wrong I'm having a hard time finding anything that could help.
Our website runs on Node, javascript, jquery, ajax, express and ejs.
My ejs:
<body >
<div class="container">
<div id='divDialogAdorner'>
<div id='divDialog' class="jsClassDialog colorBG_Lightblue" style="display:none;">
<div id='divAutologinInProgress' class='colorBG_Darkblue' style='display:none;'>
<h1> </h1>
<h1>Automatically logging in. . .</h1>
<img src="images/controls/ajax-loader.gif" width="46" height="46" alt="Processing..." />
<br/>
<h3>Click to abort the login process</h3>
</div>
<div id='divDialogHeading' class='colorBG_Darkblue'>Settings for your One2Ten App <small><small><small>(versie 1.1.04)</small></small></small></div> <!-- /divDialogHeading -->
<div id='divDialogBody'>
<form id='one2ten_loginForm' class='form-inline' method="post" action="/one2ten_login">
<fieldset id='fieldsCredentials'>
<label id='labelEmail' for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" class="jsRememberField form-control input-sm input-inline" autocomplete="off" placeholder="Email address" required value=''>
<label id='labelPassword' for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" class="jsRememberField form-control input-sm input-inline" autocomplete="off" placeholder="Password" required>
<button id='buttonSignIn' class="btn btn-sm btn-default btn-inline" type="button">Sign in</button>
<button id='buttonSignOut' class='btn btn-sm btn-warning btn-inline' type="button" style="display:none;">Sign out</button>
<span id='spanRememberMe' class='pull-right block-inline'>
<label for="rememberMe">
<input id='rememberMe' name='rememberMe' type="checkbox" class='jsRememberField input-inline' checked value='on'>
<span id='labelRememberMe' class='text-mutedXXX'>Remember my credentials</span>
</label>
</span>
</fieldset> <!-- /fieldsCredentials -->
<hr/>
<div id='divSettings'>
<div id='divSettingsObstructor' class='colorBG_Lightblue'>
<h1>Sign in first, please.</h1>
<h3>You can select your One-2-Ten App settings<br/>after authentication.</h3>
</div>
<div id='divSettingsLoading' class='colorBG_Darkblue' style='display:none;'>
<h1>Retrieving the Data</h1>
<img src="images/controls/ajax-loader.gif" width="46" height="46" alt="Processing..." />
<h3>Just a moment, please...</h3>
</div>
<table>
<tr>
<td>
<div id='divSettingsList' class="list-group">
<button id='btnSettingsAppTypeXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">App Mode</p>
<p class="list-group-item-text">What to use the app for...</p>
</button>
<button id='btnSettingsProjectXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">Questionnaire</p>
<p class="list-group-item-text">The questionnaire to use...</p>
</button>
<button id='btnSettingsLocationGroupXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">Location</p>
<p class="list-group-item-text">Where to use the app...</p>
</button>
<button id='btnSettingsLocationXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">Placement</p>
<p class="list-group-item-text">Which named spot...</p>
</button>
<button id='btnSettingsDomainXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">Domain</p>
<p class="list-group-item-text">Preselect a line of questions...</p>
</button>
<button id='btnSettingsQuestionsXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">Questions</p>
<p class="list-group-item-text">The questions to include...</p>
</button>
<button id='btnSettingsTimeframeXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">Timeframe</p>
<p class="list-group-item-text">Which time period...</p>
</button>
<button id='btnSettingsSubmitXXX' type="button" class="list-group-item">
<p class="list-group-item-heading">Confirm</p>
<p class="list-group-item-text">Accept settings and start...</p>
</button>
</div>
</td>
<td>
My app.js:
app.post('/universal_login', function(req, res) {
var app_v2 = require('./new_app/app_v2.js');
var theFields = {};
for (var aField in req.body) { theFields[aField] = req.body[aField]; }
var theAppObject = app_v2.newApp({type: req.body.AppType, values: theFields});
if ((typeof (theAppObject) == 'string') || (!(theAppObject.start))) {
theAppObject = null; theFields = null; app_v2 = null;
res.render('new_login.ejs', { status_message: theAppObject, status_type: formatStatusType('error'), autoLogin: 'off' });
} else {
function appCallback(params) {
theAppObject.stop(); theAppObject = null; theFields = null; app_v2 = null;
if ((params) && (params[1]) && (params[1].projectId) && (params[1].projectId) != '') { res.render(params[0],params[1]); }
else { res.render('new_login.ejs', { status_message: params, status_type: formatStatusType('error'), autoLogin: 'off' }); }
}
theAppObject.start(appCallback);
}
})
I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?
you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href
Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>
i am newbie.
I am Creating a button on my homepage,once clicked it shows a modal showing the signin form and i am making a separate html page for my Modal.
Here is my Main Code where the Button is placed in my homepage.
<button id="btn1"><a href="signin.html" class="btn btn-success"data-toggle="modal"data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit">
</span> Sign In</a>
</button>
In signin.html
<div class="modal"id="mymodal" >
<h3 class="modal-header">
<h1>
We Are Glad you are Here!
</h1>
</div>
<div class="modal-body">
<div class="container">
<form class="form-signin">
<h6 class="form-signin-heading">
Please sign In</p>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-sm btn-primary" type="submit" data-toggle="modal">Sign in</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"aria-hidden="true">Close</button>
</div> </div>
Issue
Modal ain't popping up on same page but it's going on next page.How should i fix it?so that my Signup form remains on the front page.
Working Example
I think the target element with the id mymodal should be in the same page with button, try to place <div class="modal"id="mymodal" ></div> after the button :
<button id="btn1">
<a href="signin.html" class="btn btn-success" data-toggle="modal"
data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit"></span> Sign In
</a>
</button>
<div class="modal"id="mymodal" ></div> //place the target div after button
Hope this helps.