Firing click event on click event, touch screen - javascript

HTML:
<footer>
<a href="#"><div class="footbut" id="chooseFile" onclick="">
<div class="done2 gradGreen" data-bind="visible: picsCount(objectInRoute())>0">
<div class="typcn typcn-tick indone"></div>
</div>
<div class="typcn typcn-camera bigblack"></div>
<span data-bind='text: pickONE("aside",18)'></span>
</div></a>
</footer>
<form class="uppform" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="image" data-bind="value: upload"/>
<input type="hidden" name="imageObject" data-bind="value: objectInRoute()"/>
<div data-bind="if: upload()">
<div class="first stripe40 gradGold tGold">
<h1 data-bind="text: pickONE('aside',41)"></h1>
</div>
<input type="submit" data-bind="value: upload" id="submit" class="gradGreen"/>
</div>
</form>
JS:
$('#chooseFile').click(function(){
alert ("here");
$('#file').click();
});
(CSS:
#file {
display: none;
}​
On PC alert works, clicking at #file (=opening choose file) works.
On my touchscreen (android, mobile phone): alert works, but it does NOT open the popup with camera/documents/gallery....
How can I do it to use on touchscreen or is error somewhere else? Thank you!

If anyone would be interested in this particular situation, it seems that this code solves the problem:
#file {
width: 0;
height: 0;
float: left;
visibility: hidden;
}​
Instead of display: none;
I am not really sure, that it will work on all devices, but on my testing one it does.

Related

Logging into website failure

I did look into tutorials obviously but the html I have is different and I tried a lot of things (the code I will post is the last thing I tried). I will provide you with the html too.
WebBrowser1.Navigate("THE_WEBSITE")
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("onfocus", "javascript:$(this).val('ID_GOES_HERE');$('#wrong_password_board').css('display','none');")
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "PASS_PROBABLY_GOES_HERE")
WebBrowser1.Document.GetElementById("div_123").SetAttribute("onpress", "rockLogin($('#loginform'))")'
And this is the HTML (I think it's everything that matters, the website is
www.microvolts.com anyway)
<form id="loginform" action="/Account/login" method="POST">
<div class="left1"> </div>
<div class="login_info1">
<div class="icon_rh">
</div>
<div class="floatleft" style="margin-bottom: 2px;">
<input id="tbtLoginID" width="110px" maxlength="25" height="17px" class="text_box" value="Login ID" tabindex="1" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); ">
</div>
<div class="floatleft">
<div id="loginLoginIdDiv1">
<input type="text" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); " value="Password" tabindex="2" class="text_box" name="passwordFaked" size="20" width="110px" style="display: none;">
<div id="loginPasswordDiv2" style="">
<input id="tbtPassword" width="110px" type="password" tabindex="2" maxlength="25" height="17px" class="text_box">
</div>
</div>
<div id="wrong_password_board" class="wrong_password wrong_passwordid ErrorMsg" style="display: none;">
<div class="topleft"></div>
<div class="topmiddle">Invalid Login ID and/or Password.</div>
<div class="topright"></div>
</div>
</div>
</div>
<div class="login_info2">
<div class="row1">
<span class="left"></span><span class="middle">Login</span><span class="right"></span>
</div>
<div class="row1" style="width: 80px">
<span style="float: left; margin-right: 3px;">
<div id="div_123" class="toplogin RockButton" style="width: 60px; height: 19px;">
<div id="123" onclick="rockLogin($('#loginform'))" style="width: 100%; height: 100%;" class="rbtdiv">
<div class="text">
Login</div>
</div>
<div class="rbtmask" style="z-index: 100; position: absolute; display: none; background: grey;
opacity: 0.2; cursor: default; width: 100%; height: 100%; top: 0px; left: 0px;">
</div>
</div>
</span>
<div class="btn_question forgetPasswordButton ">
<div id="ifClickThisBtn" style=" display:none;" data-ifclick="false"></div>
</div>
<div id="forgetPassword" class="tip_forgot_password">
<div class="ajaxLoadingMask">
<img src="/images/ajaxLoading2.gif" style="margin-left: 150px; margin-top: 9px; position: absolute; display: block;" class="ajaxLoading" alt="">
</div>
<div class="lefttfp">
<div class="l1l"></div>
<div class="l1r"></div>
</div>
<div class="middletfp">
<div class="closetfp"></div>
<div class="title">Forgot Password or Login ID</div>
<div class="email_form">
<input type="text" value="Enter registered email" name="emailAddress" class="password_recovery_textbox">
<div class="wbtn1 formSubmitBtn" onclick="javascript:forgetPassword();return false;" style="float: left; margin: 2px 0px 0px 5px; cursor: pointer;">
<span class="wbtn1_left"></span><span class="wbtn1_middle" style="padding-left: 10px;
padding-right: 10px;">Submit</span><span class="wbtn1_right"></span></div>
<div class="wrong_email"></div>
</div>
<div id="invalideEmailAddress" style="display:none;"> Please enter a valid email address.</div>
</div>
<div class="righttfp"></div>
</div>
</div>
</div>
<div class="right1"> </div>
</form>
The login form has javascript elements so I figured I could just write it with the right login into it, but nah.
When I run it I get an error from the first line: System.NullRefferenceException, all my codes gave that.
I have to admit I probably didn't do all the research I could but I need to do this fast and this is the last thing that may help me.
As already mention above in the comment's by #Visual Vincent you need to add the DocumentCompleted event. This event is raised when the document has finished loading.
Private docCompleted As Boolean = False 'put this at class level
Private Sub WebBrowser1_DocumentCompleted(sender As Object, e As WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
If docCompleted Then Exit Sub
If WebBrowser1.Document.GetElementById("tbtLoginID") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("value", "YOURUSERNAME")
End If
If WebBrowser1.Document.GetElementById("tbtPassword") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "YOURPASSWORD")
End If
If WebBrowser1.Document.GetElementById("div_123") IsNot Nothing Then
WebBrowser1.Document.InvokeScript("rockLogin")
End If
docCompleted = True
End Sub
The code above check's each element to ensure it not nothing and if it's not then we can set the attributes we would need. Also we can InvokeScript of the document for example: rockLogin, this script does the login. The docCompleted prevents the page from doing postback's as when it's finished and you set the attributes it want's to reload the page etc... it's not required but it prevented multiple postbacks when I tried.
On another note you didn't mention if you were doing this in a click event or what, if so set the docCompleted to false before navigating to your page so the variable is reset each time...
Note: Tried and Tested - please don't post your login credentials either on a public forum...

How to show or hide the heading in php

Hi i need to hide the text once i click on add button and the form should be displayed.Here is my code.
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
//Here is add button and go back button if i click in this add button form should be displayed else t should show the same text.//
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;">
<a class="large awesome oranges" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
//My form starts from here//
<h2>Owner Property details</h2>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
If i open the page iam getting this form but in this Owner Property details should be shown only when i click on add a property owner.Remaining all other should be Hidden it should show only form thats it.
Replace your code with this:
Note: This requires a working internet connection for fetching JQuery library over internet
<html>
<head>
<title>Title of website</title>
<style>
.hidden
{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('.add-property').click(function () {
$('.hidden').toggle('slow');
$('#add-owner-div').addClass('hidden');
$('#go-back-div').addClass('hidden');
});
});
</script>
</head>
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;" id="add-owner-div">
<a class="large awesome oranges add-property" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;" id="go-back-div">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
<h2>Owner Property details</h2>
<div class="hidden" style="display:none">
<form>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
</form>
</div>
</html>
If you have any other css libraries or bootstrap you can include in head tag
PHP is not an option to do this. If you want it to do with PHP dependent value you can use JQuery ajax.
Your add button should be like this
<a class="large awesome oranges" id="add_btn">Add a property Co-owner</a>
Put your form elements inside form
<form nam="myform" id="myform" style="display:none">
<input type='hidden' value="<?php echo $username; ?>" name='email'> <p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" ></p> <p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" ></p></form>
Js:
$("#add_btn").on('click',function(){
$("#myform").show();
}

How can I submit a form via POST?

<form id="search" action="#" method="post" style="float: left">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" onclick="searchbox()" for="search-terms" id="search-label" class="glyphicon glyphicon-search"></button>
</div>
</form>
When the user clicks on div id label, I want to toggle the display property of div input. which is working fine. I have used following code to implement the functionality.
function searchbox(){
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
}
I want to to submit the form data via POST but that functionality is not working, neither by pressing enter key nor when submit button is clicked.
Please help me with this.
Try submitting through JS
HTML
<form id="search" action="#" method="post">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" for="search-terms" id="search-label" class="glyphicon glyphicon-search">click</button>
</div>
</form>
JS
$(".glyphicon").click(function(e){
e.preventDefault();
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
$( "#search" ).submit();
});
you have to use <input type=submit> for submitting

JQuery function does not operate

I have the following HTML Structure
<div style="float: left; padding-top: 10px;">
<a id="changeProfilePicture" class="linkOne" style="font-family: 'Ubuntu', sans-serif; color: #FA5882;" href="javascript:void">Change Profile Picture</a>
</div>
<div style="clear: both;"></div>
<div style="display: none;" id="changeProfile">
<div id="fSpace"></div>
<form id="upload_form" enctype="multipart/form-data" method="post">
<button id="openOpen">Select File</button>
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<div id="fSpace"></div>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<div id="fSpace"></div>
<div id="status"></div>
</form>
</div>
So when I click on the div changeProfilePicture the div changeProfile slides down. I also have another jQuery function to click the file1 div when click the button openOpen, But when I click that button the function to toggle the changeProfile div occurs. My Jquery as follows
$(document).ready(function(){
$("#changeProfilePicture").click(function(){
$("#changeProfile").slideToggle("slow");
});
$("#openOpen").click(function(){
$("#file1").click();
});
});
JSFiddle
http://jsfiddle.net/L7dLN/1/
Any idea how to overcome this ? Thanks in advance.
Actually, you need just this:
$("#openOpen").click(function(event){
event.preventDefault();
$("#file1").click();
});
Default action/behavior for button in form is submit, that was problem... More: what's the standard behavior when < button > tag click? will it submit the form?

Submit Button not disappearing with ng-disabled

I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?
Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form
Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive
It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

Categories