I coded a simple search form for my website using just a text input for the search term. Also i used the typeahead.js plugin which allows autocomplete while typing.
Everything seems to work fine except when i'm trying to submit the form using the Search button of the ios keyboard. When i tap it nothing happens.
Any ideas about why this is happening?
Here is the form's code:
<form action="[config.site_url]/search/find" method="post" id="main-search-form">
<div class="form-group" id="main-search">
<input id="topnav_search" name="search_text" class="form-control typeahead" placeholder="" type="text" value="">
</div>
<input type="submit" name="submit" style="display: none;" />
</form>
And this is the search ios button that i mean:
Finally, i just changed the css styling of the submit button to this:
style="position: fixed; top: -1000px;"
Solution found here: Getting iPhone GO button to submit form
Related
I want to check the regex validation when I click on the button. It works fine when the button type is submit, but it does not redirect to another page where I have linked the button - however when I change its type to button it redirects to the other page normally and does not check the regex validation. I am also checking if all the input fields are filled, and focusing any empty fields. But I guess something is wrong with the code.
Demo
HTML CODE:
<form action="" method="POST" role="form" class="payment_form">
<div class="contact_details">
<div class="payment_details">
<div class="form-group">
<input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName" placeholder="FULL NAME" required/>
</div>
<div class="form-group">
<input type="email" class="input_name" id="email" title="Eg: some#mail.com" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" name="email" placeholder="EMAIL ADDRESS" required/>
</div>
<div class="form-group">
<input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Enter 10 digit Valid Mobile Number" name="mobileNumber" placeholder="MOBILE NUMBER" required/>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pay_btn" >Continue</button>
</form>
JS:
$('.pay_btn').click(function(e){
$(":input").each(function() {
if($(this).val() === "")
$(this).css('border-color', '#ff0000');
});
});
You have to remove anchor tag from submit button and write the name of html page in action ,this will work fine for page redirection when form is correctly field .For the one field focus at a time you have to change your logic out there .
#Preety Angel , Provide the html file name in the action attribute of form tag <form action="thankyou.html"> like below,
<form action="thankyou.html" method="POST" role="form" class="payment_form">
.......
</form>
I want to check the regex validation when I click on the button. It working fine, when the button type is submit but it does not redirect to another page where i have linked the button,
Whats happening here is, You click on the button who's type is submit, And this button will try to submit the form. So your validation will work on form submit. Since you don't have any url mentioned in the action="" attribute of your form, Your page doesn't know where to go. So solution is add the URL into this action attribute
<form action="thankyou.html" method="POST" role="form" class="payment_form">
but when I am changing the button type to button it redirects to other page normally and does not check the regex validation.
The reason for this is once you remove the button type submit it has nothing to do with the form anymore. Its just a plain button. But you have wrapped this button inside a anchor tag which has a href set. So this is as good as a page redirect by clicking a link, So the form is not submitted at all. Hence your validation keeps quiet. As it works only while form is submitted.
I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
How can I make it work?
Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.
If this is the case, try changing the input type to button to see the effect.
For example:
#my_id {
display: none;
}
<form>
<input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
<div id="my_id"> My text </div>
</form>
It should work.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)
Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.
The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.
I'm trying to add attachment upload for my typo3 extension, and since the normal file-input
doesn't work with the design. I decided to add a text-input, to display the value, and a
button-input, to fire up the file-inputs click event. This works FF and IE without any Problems,
but when I try this on Safari the file-inputs click event doesn't work (others do!!!).
<form action=""
name="attachmentPostForm"
method="post"
onSubmit="createAttachmentPostAction(${uid});"
enctype="multipart/form-data"
target="attachementupload_target">
<input type=file
name="leadimagefile"
accept="image/gif,image/jpeg"
onChange="document.getElementById('ImageFakeFile').value = this.value"
id=imageTrueFile style="display:none">
<input type=text id=ImageFakeFile readonly>
<input type = button value="browse" onClick="document.getElementById('imageTrueFile').click()">
<input type="submit" value="upload" />
</form>
Is there another way to achieve the effect, or do i have to use the "normal" file-input on this case?
It's doesn't work because your input has style="display:none", change it to visibility: hidden and it will work. I also recommend to check https://stackoverflow.com/a/3030174/967358
Hey guys, I have a search field that is not submitting when the enter key is hit, this issue is only happening on IE8, every other browser is working just fine (even IE6). Please guys I need a hand with his, find below the code I have for it.
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</div>
Ok I forgot to mention this form is in a ASP coded page, that's why it is not wrapped inside the form element.
You need to put some <form></form> tags around the textbox and button. Like so
<form method='POST' onsubmit='javascript:goSearch();return false;'>
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="button" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</form>
Another way would be to use the keydown event on the textbox and check whether it was the enter key.
Hope this helps.
I have found there to be a bug in IE8 and sometimes a form won't submit on enter key.
The best way would be to set an event to handle enter being pressed.
In jQuery you would do:
$("input_box_id").keydown(function(e){
if (e.keyCode == 13) //enter
{
$("btn-submit").click();
}
});
In JavaScript it would be:
document.getElementById("input_box_id").onclick = function(e){
var keycode =(window.event) ? event.keyCode : e.keyCode;
if (keycode == 13) //enter
{
document.getElementById("input_box_id").click();
}
};
And change Html to:
<form action="url_here" method="post">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" id="btn-submit" name="btn-submit" class="btn-go" />
</div>
</form>
Ignore the form tags if you've already got a Asp.net form.
Another way, instead of the onclick on the submit button, would be to do this.
<form action="script.php" method="post" onsubmit="goSearch();return false">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" />
</div>
</form>
Edit: Added action and method attributes. The action attribute is required for validation.
Would it be anything to do with the fact you have an onclick event with a function call to GoSearch and a return false attached to a 'submit' input type?
Can you past the contents of the goSearch() function?
What happens if you remove the "return false;" from the event handler for the submit?
When a user hits ENTER in a text input field, IE behaves as if the submit button had been used but the "false" prevents the event bubbling.
EDIT: with new ASP information.
See this: http://mikepope.com/blog/AddComment.aspx?blogid=309 He has an explanation of how it works so no details here, except to say that all you need to do is add the following to your page_load event:
Page.RegisterHiddenField("__EVENTTARGET", "MyDefaultButton");
Old ticket, but I'd like to chime in: IE8 does the following peculiar thing: the Enter key will submit the form, but any
<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />
won't be sent in the POST.
IE9 changes the behavior and sends the value. Chrome has always sent the value, as far as my tests have shown.
There are a ton of "Enter not submitting in IE8" complaints out there, and I feel lots of them can be contributed to this behavior. I hope this helps some of them.
I'm submitting some of my forms with javascript/jquery.
$("#myform").submit();
this works fine in Firefox, but in Safari or Chrome, none of my form values are posted.
When I check the $_POST variable, in Firefox it's filled up correctly, but on safari/chrome the $_POST values are empty.
I submit like this when the dialog's OK buttong gets clicked (works fine in FF)
$("form#form_add_file_to_theme").submit();
this is my form (the surrounding div becomes a .jQuery UI dialog)
<div id="modal_create_themefile" style="display:none;">
<form action="" id="form_add_file_to_theme" name="form_add_file_to_theme" method="post">
<div class="field">
<label for="var_template_name">File name</label>
<input type="text" class="text" id="var_template_name" name="var_template_name" />
</div>
<div class="field">
<label for="var_template_type">File type</label>
<select id="var_template_type" name="var_template_type">
<option value="css">CSS</option>
<option value="include">Partial</option>
<option value="js">Javascript</option>
</select>
</div>
</form>
</div>
printing $_POST in php gives:
Array ( [var_template_name] => [var_template_type] => css )
so the select box gets submitted, not the text fields...
UPDATE: when I pass the value="test" options hard coded in my text fields, they get submitted. However, changing the values (what a normal user would do) after the page has loaded, has no effect in webkit. Chrome & Safari just take the "initial" or "default" values to submit.
As there is an item named "var_template_name" in the POST data that reaches the server, it means that the textbox is included in the post, but the value is empty.
So, somehow the value is cleared before it's posted.
Do you have any Javascript that verifies the contents in the form? Check that you haven't accidentally made an assignment, something like this:
if (document.getElementById('var_template_name').value = '')
instead of a comparison:
if (document.getElementById('var_template_name').value == '')
jQuery UI dialog is somehow creating or moving the form into the dialog, while webkit doesn't know this. Webkit just takes the original form code and submits that.
I could fix it by doing this:
dialog.data("dialog").uiDialog.find("form").submit();
that way, any browser is forced to look for the correct form in the dialog, not just in the page.
I've encountered the same problem. I have a theory that the form submit gets terminated once the page changes, thus it becomes incomplete. That's just a theory mind you, unprovable unless I analyze the webkit internals.
My solution - use ajax instead of form submit.
$.post("/submit_url",$("#form_id").serialize());
I'm not absolutely sure that strategy always works, but it might.
I have also encountered a similar problem. I have struggled a few hours and found how to get it work right. Here is my dialog html after the fix. I had the opening form tag outside of "interest-edit-dialog" div at first. The dialog didn't post input variables then. I was inspired by Jorre and I checked the source with Chrome tool when the dialog is up, and found the opening tag was gone. So I moved the opening form tag inside of "interest-edit-dialog" div. That is basically it. The input variables were posted all right. It means that you can't put your form tag outside the dialog html you register with jquery.ui.
<div style="display: none; z-index: 1000; outline-width: 0px; outline-style: initial; outline-color: initial; position: absolute; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
<div id="interest-edit-dialog" title="whatever" class="ui-dialog-content ui-widget-content">
<form id="interestDialogForm" name="interestDialogForm" action="einterest" method="post" enctype="multipart/form-data">
<p class="validateTips"></p>
<fieldset>
<?php echo $interest_list; ?>
<p><input type="text" id="myinterest1" class="myinterest1" name="myinterest1" value="FOO" /></p>
<p><input type="text" id="myinterest2" class="myinterest2" name="myinterest2" value="BAR" /></p>
<p><input type="text" id="myinterest3" class="myinterest3" name="myinterest3" value="" /></p>
<p><input type="text" id="myinterest4" class="myinterest4" name="myinterest4" value="" /></p>
<p><input type="text" id="myinterest5" class="myinterest5" name="myinterest5" value="" /></p>
<input type="hidden" name="serial" id="serial" value="" />
</fieldset>
</form>
</div>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
</div>
</div>
The javascript code to submit above form is
$("#interestDialogForm").submit();