Here is the form in dropdown with button that should close this dropdown
<div id="kupit" >
<div class="uk-width-1-1 uk-button-dropdown drop"
data-uk-dropdown="{pos: 'left-center', mode:'click'}">
<button href="#" class="uk-button uk-button-primary tm-add-to-cart uk-margin-top uk-width-1-1">Купить в один клик</button>
<div class="uk-dropdown uk-dropdown-small">
<p>ПОЖАЛУЙСТА, ОСТАВЬТЕ <br> СВОЙ НОМЕР ТЕЛЕФОНА.</p>
<p>НАШИ СОТРУДНИКИ СВЯЖУТСЯ<br> С ВАМИ В БЛИЖАЙШЕЕ ВРЕМЯ.</p>
<form class="uk-form" action="/" method="post">
<div class="uk-form-row">
<input class="uk-width-1-1" name="username" size="18" placeholder="Имя"
type="text">
</div>
<div class="uk-form-row">
<input class="uk-width-1-1" name="phone" size="18" placeholder="Телефон"
type="text">
</div>
<div class="uk-form-row">
<button class="uk-button uk-button-primary uk-width-1-1" value="Войти" name="Submit" type="submit" onclick="popup(this); return false;">ЗАКАЗАТЬ ТОВАР</button>
</div>
</form>
</div>
</div>
</div>
and here is the code for closing dropdown
function popup(here) {
var test = jQuery(here).closest('.drop');
UIkit.dropdown(test).hide();
}
but when I click on the button dropdown hides and then immediately appears again.
This is because of your mouse is still over the dropdown. The system show the window again beause mouse still there. So if you need to close this dropdown by this button you need to add uk-dropdown-close class to this button.
Also you can use this code to add some functionality when dropdown closed
jQuery('[data-uk-dropdown]').on('beforehide.uk.dropdown', function () {
// custom code here
})
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.
You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"
Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});
If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});
I have a row that will added automatically when I click 'Add Row' button. The row created by using clone() method. When I click 'Submit' button. The new row gone and didnt stay in that page. How to make it stay with the input in the textbox after the page is load?
Below is my code for that row:
<div id="rows">
<div class="p2">
<input type="checkbox" class="checkbox" runat="server"/>
<input id="txt1" type="text" runat="server" maxlength="16" value="0.00" />
</div>
<div class="p3"> </div>
<div class="p4">
<input id="txt2" type="text" runat="server" maxlength="16" value="0.00"/>
</div>
<div class="p5"> </div>
<div class="p6">
<input id="txt3" type="text" runat="server" maxlength="16" value="0.00"/>
<span style="color:red;">*</span>
</div>
</div>
Below is my javascript code:
var cloneCount = 1;
//Add new row
$("#addrow").click(function () {
$('#rows')
.clone(true).find('input:text').val("").end()
.attr('id', 'rows' + cloneCount++, 'class', 'block')
.insertAfter('[id^=rows]:last');
return false;
});
below is my code for the button:
<div id="bttns" style="text-align:center;">
<button id="addrow" >Add Row</button>
<button onclick="validate()" >Submit</button>
</div>
I'm using VS2012 and this project were ASPX web form. Do I need to do some code-behind? What are the problem inside my code? Really needs your help and I'm new to C# and asp.net.
I was using a foundation for apps button in a form. But ng-disabled isn't working with it.
HTML:
<form name="loginForm" novalidate>
<div class="grid-block">
<div class="grid-content">
<input type="text" placeholder="Username" ng-model="formData.username" required/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<input type="password" placeholder="Password" ng-model="formData.password"/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<a class="button" type="button" href="#" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</a>
</div>
</div>
{{loginForm.$invalid}}
</form>
When I use a normal HTML button it is working.
That's not a button it's a link href, if you use a button tag it works fine.
<button class="button" type="submit" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</button>