iOS HTML checkbox screen blocked if keyboard is shown - html

I have an iOS application which views URL inside UIWebView. There is a form in this URL with two text input fields and one checkbox.
When the cursor is inside one of the text input fields and the keyboard is shown, then I check the checkbox, the screen becomes semi-black and the form dialog is removed. But when I check the checkbox normally - without the keyboard showing -, it works fine and no error happens.
Here is the form code:
<form action="<?php echo site_url('account/login');?>" class="form-horizontal" role="form" method="post">
<!-- Form Group -->
<div class="form-group">
<!-- Label -->
<label for="user" class="col-sm-3 control-label"><?php echo lang_key('email'); ?></label>
<div class="col-sm-9">
<!-- Input -->
<input type="text" class="form-control" name="useremail" placeholder="<?php echo lang_key('email'); ?>">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label"><?php echo lang_key('password'); ?></label>
<div class="col-sm-9">
<input type="password" class="form-control" name="password" placeholder="<?php echo lang_key('password'); ?>">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<input type="checkbox" name="remember"> <?php echo lang_key('remember_me'); ?>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<!-- Button -->
<button type="submit" class="btn btn-red"><?php echo lang_key('login'); ?></button>
<button type="submit" formaction="<?php echo site_url('account/signup');?>" class="btn btn-white"><?php echo lang_key('sign_up'); ?></button>
</div>
</div>
</form>
The 'remember_me' checkbox is the one which causes the issue if the keyboard is shown when it is checked

Keyboard delegates are what you are looking for.
Use the keyboard Will Show delegate to push the UIWebview up, and Use the keyboard will hide delegate to return push the UIWebview down.
Hope this helps!

Related

Bootstrap form data not submitting when in modal

I have the following form:
<form action="../util/vcput.php" method="POST">
<input name="vockey" type="hidden" value="<?php echo getCsrfToken(); ?>">
<input name="a" value="addorgadmin" type="hidden">
<input name="m" value="editorg" type="hidden">
<input name="q1" value="orgid=<?php echo $org->id; ?>&orgadmins=1" type="hidden">
<input type="hidden" name="orgid" value="<?php echo $org->id; ?>">
<div class="container-fluid mt-3">
<div class="row">
<div class="col-5">
<input class="form-control" type="text" placeholder="Email" id="userEmail" name="userEmail" aria-label="New Admin Email"></input>
</div>
<div class="col-4">
<input class="form-control" type="text" placeholder="Name" id="userName" name="userName" aria-label="New Admin Name"></input>
</div>
<div class="col-3">
<!-- <button type="submit" class="btn btn-primary">Add admin</button> -->
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Add admin</button>
</form>
However, when clicking the submit button nothing happens, no data is submitted/no action is taken. I know that the name/id values are correct, as the lines are copied over from an older version of the page (modified to bootstrap v5).
Am I doing something wrong here? The form is in in a modal-body and doesn't work, but works when outside.
EDIT: Figured it out... I had a form tag enclosing the entire page that I had forgotten about, so having this form nested was breaking functionality. Oops.
Figured it out... I had a form tag enclosing the entire page that I had forgotten about, so having this form nested was breaking functionality. Oops.

form HTML not send after click

Im use form html my probleme after click submit send nothing in my brother
<form method="get" id="booking-form" role="form" action="">
<div class="col-md-3 col-sm-6">
<i class="fa fa-map-marker rechercheIndex"></i>
<label class="sr-only" >Recherche</label>
<input type="text" class="form-control" placeholder="Ville">
</div>
<div class="col-md-2 col-sm-4">
<input type="submit" class="btn btn-primary btn-block" >
</div>
</form>
After click button send nothing
Im expetected return value in my form
I found solution. Just add name in my input name="city"
<label for="city">Enter city: </label>
<input type="text" class="form-control" placeholder="Ville" name="ville">
set Action Attribute to specific Action Page
you should must PHP or other server side language to interact with forms
Index.php
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Welcome.php
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
In first line ,we need to give path were form get collect
Ex :-
In this the form get collect in "/action_page.php"

Form redirect to same page, but showing that not exist

Hello I have a really strange problem with html form. I am using Wordpress and I created my custom html form. When i submit the form it redirects me on the same page url, but showing me that the page doesnt exist.
My form:
<form action="" method="post">
<div class="form-group">
<input type="text" name="name" class="form-control input-text" placeholder="Vaše jméno a příjmení" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control input-text" name="email" placeholder="Váš e-mail" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control input-text" name="subject" placeholder="Předmět zprávy" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control input-text text-area" name="message" rows="5" placeholder="Vaše zpráva pro nás..."></textarea>
<div class="validation"></div>
</div>
<div class="row">
<!-- Google reCAPTCHA widget -->
<div class="col-lg-8 col-sm-8">
<!-- recaptcha here -->
</div>
<div class="col-lg-4 col-sm-4" style="padding-right: 0; padding-left: 0;">
<div class="text-center" style="margin-right: 7px;"><button name="submit" style="width: 135px; height: 75px; padding:0 !important;" type="submit" class="input-btn">Odeslat</button></div>
</div>
</div>
</form>
I tried to hide all my php code behind, also hide google recaptcha, but nothing works and the problem is elsewhere. My action is also empty, just set method.
What is wrong, any suggestions?
You have to change the name of your field name="name" to something else.
for more information you can read here
https://wordpress.stackexchange.com/questions/11749/why-when-i-submit-a-form-in-wordpress-it-loads-a-404-page-though-url-is-correct
Perhaps the problem is the submit button.
When you create a form, the submit button is an input as well.
You may try
<input type="submit" value="submit" yourtags="yourvalue">
See https://www.w3schools.com/html/html_forms.asp for more data.
EDIT: if you are trying to send the action to the same page, omit the action attribute. Perhaps leaving it blank causes an error.

How to pass a control to Bootstrap Modal Input as soon as it pops up?

I was wondering if it is possible to pass the control to bootstrap Modal Input so that i dont have to use mouse click to focus on that.Usually i have to click on the inputas soon as modal popsup. Here is a Simple code.
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Password authentication</h4>
</div>
<?php $attributes = array('class' => 'check_user_password', 'id' => 'check_user_password'); ?>
<?php echo form_open('PswAuthentication', $attributes); ?>
<div class="modal-body">
<div class="form-group">
<label>Enter password:</label>
<input type="password" class="form-control" name="user_password" placeholder="Enter password">
</div>
<div class="col-xs-1" id="courseInfo" style="display:none;">
<input type="hidden" name="crs_id" id="courseId" value="<?php echo set_value('crs_id'); ?>">
<input type="hidden" name="crs_code" id="courseCode" value="<?php echo set_value('crs_code'); ?>">
</div>
<input type="hidden" name="event" id="crs_event" value="<?php echo set_value('event'); ?>">
<div class="form-group">
<button type="submit" class="btn btn-default btn-success check_user_password_btn">Submit</button>
</div>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
And here is the UI
I got the Answer guys. Sorry for asking this simple Question. I just had to put Autofocus in input field.
<input type="password" class="form-control" name="user_password" placeholder="Enter password" autofocus>
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
Read more
example code here codepen

Bootstrap 3: Form "required" not working in mobile devices

I'm working on a form I styled with bootstrap and connected to google docs doing a little hack.
The form works great when I test it in the browser and the developer tools emulators. If I leave a blank space, a small pop tells me to fill that space before continuing and it doesn't post the information into the spreadsheet nor advancing to the greeting page (expected behavior).
However when I test this in my iPhone and other mobile devices it doesn't work. I can leave blank spaces and it just simply ignores the "required" condition and it takes me to the greeting pages.
As you can see that's a problem. I want the form to behave as it behaves on the browser. Any ideas?
<!-- Form -->
<div class="col-lg-6 form-container" style="margin-top: 20px; margin-left:-20px">
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='thank-you.html';}"></iframe>
<form class="form-horizontal" action="https://docs.google.com/a/xxxxxxxx.com/forms/d/1psz4JlSVCmr99r7Qdg0LsV0WJjwzm1aSZBECmWpFX-w/formResponse" method="post"
target="hidden_iframe" onsubmit="submitted=true;">
<fieldset>
<!-- Form Name -->
<h3 class="centered"><span class="glyphicon glyphicon-ok"></span> Get Your API Key Today</h3>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Full Name">Full Name*</label>
<div class="col-md-4">
<input type="text" name="entry.492241038" value="" class="form-control input-md required" id="entry_492241038" dir="auto" aria-label="1 " aria-required="true" required="" title="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Company">Company*</label>
<div class="col-md-4">
<input type="text" name="entry.22144039" value="" class="form-control input-md required" id="entry_22144039" dir="auto" aria-label="2 " aria-required="true" required="" title="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Company Email">Company Email*</label>
<div class="col-md-4">
<input type="text" name="entry.1882859742" value="" class="form-control input-md required" id="entry_1882859742" dir="auto" aria-label="3 " aria-required="true" required="" title="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Phone Number">Phone Number*</label>
<div class="col-md-4">
<input type="text" name="entry.1063706991" value="" class="form-control input-md required" id="entry_1063706991" dir="auto" aria-label="4 " aria-required="true" required="" title="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="How will you use the API?">How will you use the API?*</label>
<div class="col-md-4">
<textarea name="entry.1508475478" rows="3" cols="0" class="form-control input-md required" id="entry_1508475478" dir="auto" aria-label="5 " aria-required="true" required=""></textarea>
</div>
</fieldset>
<div class="submit-button centered">
<!-- <input type="submit" name="submit" value="Submit" id="ss-submit"> -->
<button href="thank-you.html" class="btn btn-info btn-lg btTxt submit" id="ss-submit" name="submit" type="submit" value="Submit"> Get Started Now </button>
</div>
</form>
</div>
The required Attribute is not fully working, you might want to use a polyfill. In case you use webshim, you get it to work with the following lines:
<script src="js/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//request the features you need:
webshims.polyfill('forms');
</script>
Here is an example with bootstrap including instant validation:
http://jsfiddle.net/trixta/T29Kx/light/
You need to wrap your forms in a row. It also looks like you are trying to nest your columns to? Go over the grid docs one more time:
http://getbootstrap.com/css/#grid

Categories