I have a form on my page, with one text input and one submit input, that sends info to a php script. Users can submit the form either by pressing 'enter' on their keyboard, or clicking the submit button.
In IE9 and ever other browser, the user can hit 'enter' or click the submit button and everything works fine, but in IE 8 if the user clicks the submit button, it works fine, but if they press 'enter' the form does not send the info.
The form opens up a new tab, so i know the form is submitting when the user hits 'enter', its just that the information does not send to the new page on IE8.
Anyone have some suggestions?
Thanks!
Code:
<form action="/search.php" method="post" onsubmit="location.reload(true)" target="_blank" name="myform">
<table style="width: 100%; min-width: 728px; margin: 150px 0px 170px 0px; text-align: center;">
<tr>
<td valign="middle"><img alt="Logo" src="vivvulogo.png" /><br />
<input maxlength="256" name="query" id="query" style="width: 400px; height: 25px; font-size: medium;" type="text" />
<input name="submit" style="height: 30px; width: 120px; height: 30px; font-size: medium; background-color: #CCCCCC; border-style: solid; border-color: #999999; border-width: 1px; vertical-align: top;" type="submit" value="Search" /><br />
</td>
</tr>
</table>
</form>
If you are using a button tag, hitting enter won't submit the form...
Hiding submit buttons by using display:none, positioning them off the page, hiding them inside an overflow:hidden, or any other method will break the enter-to-submit functionality as well.
If a form is hidden when the page loads and is displayed using JavaScript, the enter-to-submit will also be broken.
It appears that Internet Explorer scans the page at load time and figures out which submit buttons are visible, then attaches the enter-to-submit functionality to those forms.
Without seeing any of your code it is difficult to tell what exactly is the best solution for you, but to fix these scenarios, you can usually use the following JavaScript:
function addInputSubmitEvent(form, input) {
input.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == 13) {
form.submit();
return false;
}
};
}
window.onload = function() {
var forms = document.getElementsByTagName('form');
for (var i=0;i < forms.length;i++) {
var inputs = forms[i].getElementsByTagName('input');
for (var j=0;j < inputs.length;j++)
addInputSubmitEvent(forms[i], inputs[j]);
}
};
If you're looking for a jQuery solution...
$(function(){
$('input').keydown(function(e){
if (e.keyCode == 13) {
$(this).parents('form').submit();
return false;
}
});
});
Try using
target="_self"
instead of
target="_blank"
Hope this should work.
Related
I want to use a Submit Button Image instead of the standard Button. I searched on Google and SO and got a few different ways.
Which is the right way of using an Image as a Submit Button ?
Also i would want to add three states for the button - normal, hover, onclick
What i tried
HTML
<input type="submit" value="Subscribe">
CSS
input[type=submit] {
background:url(../images/btn-subscribe.gif) none;
text-indent:-9999px;
width:109px;
height:41px;
}
What shows up
What it should Display
Edited:
I think you are trying to do as done in this DEMO
There are three states of a button: normal, hover and active
You need to use CSS Image Sprites for the button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
<!-- HTML -->
<input type="submit" value="" class="imgClass" />
<input type="image" src="path to image" name="submit" />
UPDATE:
For button states, you can use type="submit" and then add a class to it
<input type="submit" name="submit" class="states" />
Then in css, use background images for:
.states{
background-image:url(path to url);
height:...;
width:...;
}
.states:hover{
background-position:...;
}
.states:active{
background-position:...;
}
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Where the standard submit button has TYPE="submit", we now have TYPE="image". The image type is by default a form submitting button. More simple
It's very important for accessibility reasons that you always specify value of the submit even if you are hiding this text, or if you use <input type="image" .../> to always specify alt="" attribute for this input field.
Blind people don't know what button will do if it doesn't contain meaningful alt="" or value="".
You have to remove the borders and add a background image on the input.
.imgClass {
background-image: url(path to image) no-repeat;
width: 186px;
height: 53px;
border: none;
}
It should be good now, normally.
I need help on my php program.
I have 2 forms inside my testing.php
Main form named "mainform"
the other Form is with checkbox named "modalForm"
My program works like this. If you click the disabled textbox, a modal will pop-up containing the form with checkbox. If only 1 of the checkbox were check I'm gonna display the textlabel of it on my disabled textbox otherwise if more than 2 were check I will display the value "Multiple" on the disabled textbox.
In short I will display only the textlabel on UI while its value will be inserted/updated into the system database.
I tried lots of condition and still i dont get it. anyone help me please.
Here is my look a like code
testing.php
<form method="post" name="mainform" action="">
<label>TestLabel</label>
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" name="test" placeholder="test" value="">
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="mark">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="joe">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="kevin">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="michael">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="jordan">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
Hope you guys can help me. I wanna know how can I pass the value of the checkboxes on my mainform . Thank you so much in advance.
I tried that code,set id="submit" at the submit button of the modal form and id="test_modal[]" at checkboxes,I used some functions of jquery I set at header the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(e) {
// var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
// checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});</script>
Here is the sample for couple of cases that you may find usefull for your problem.
PHP variable to Javascript variable:
<?php $myvar=10; ?>
<script type="text/javascript">
jsvar = <?php echo $myvar; ?>;
document.write(jsvar); // Test to see if its prints 10:
</script>
Form variable to Javascript variable:
<form name="myform4"> <input type="hidden" name="formvar" value="100"> </form>
<script type="text/javascript">
jsvar = document.myform4.formvar.value;
document.write(jsvar) // test
</script>
PHP variable to Form variable:
<form name="myform4">
<input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>"> // PHP code inside HTML!!
</form>
Javascript variable to Form variable:
<form name="myform3">
<!-- It needn't be a "hidden" type, but anything from radio buttons to check boxes -->
<input type="hidden" name="formvar" value="">
</form>
<script type="text/javascript">
jsvar=10;
document.myform3.formvar.value = jsvar;
</script>
JavaScript:
You can solve this problem just with JS. To do so, you have to replace you action-Attribute in the form-Tag to action="#". To read more about the hashtag there, look up this link.
After that, you have to call a JS-Function when the Form gets submitted. YOu can do this with adding onSubmit="countCheckboxes()" to the <form>-Attribute. This means, that if the form gets submitted, this JS-Function gets executed. Now, you just have to create a new JS-Function called countCheckboxes(). There, you can count the selected checkboxes with this line:
alert(document.querySelectorAll('input[type="checkbox"]:checked').length);
Check now, if there is just one selected checkbox or more and set the value of the <input>.
Tip:
Get the value of the only checked checkbox, you have to restructure your HTML like this:
<label>
Step 1
<input type="checkbox" ... />
</label>
<label>
Step 2
...
And then get the (first and only) text in the label with the checked box like this:
document.querySelectorAll('input[type="checkbox"]:checked')[0].parentElement.textContent
jQuery:
To open and close your modal you should use JS. I recommend you to use the jQuery library (Check out this article to learn how to use jQuery in your JS). With that, you can simply open and close the modal with .fadeIn() and .fadeOut().
In fact, here we have another problem: Normally in jQuery, you can check if something got clicked with this code:
$("#idOfYouElement").click(function() {
// this code gets executed if the element got clicked
});
But in your case, the input is disabled and doesn't fire a clickevent and this results that the .click()-Function also doesn't get executed. To fix this, we place a <div> over the input, which is transparent so the users don't see it. Then we add the .click()-Function to this div and not the input. This would look like this:
HTML:
<form method="post" name="mainform" action="">
<label>TestLabel</label>
<input type="text" id="inpCheckboxes" name="test" placeholder="test" value="" disabled >
</form>
JavaScript:
$("#inpCheckboxes").click(function(){
$("#idOfYourModal").fadeIn();
});
After this, we have to close the modal after the submit-button got clicked. There are multiple solutions for that, for me, this one using .submit() is the cleanest:
$("#idOfYourForm").submit(function() {
$("#idOfyourModal").fadeOut(); // Since your Modal is also your Form, you could also use here $(this).fadeOut();
});
You also want to count all your checked checkboxes. You can combine this with your function above, since you want to count the checkboxes when the user hits 'submit'. The jQuery-way to count theboxes would be:
var l = $("input[type='checkbox']:checked").length;
With this value, you can now use a if else to set the value of your <input>-Field (remember to remove now the disabled-Attribute from it).
I was wondering if there is another way in PHP or HTML to use forms without having to have check marks or radio buttons .. For example , if I just click on a link or picture , it can send data to the other PHP file according specified in form action ... I'd like to know if I can just make picture icons send data to the other php page in form action without having to use radio buttons .. but I guess if someone only has to choose one icon from many available .. radio buttons could be the only option available or am I wrong ?
I like to use the button element. Throw in a type="submit", and you have yourself a party.
Demo: http://jsfiddle.net/RnYeg/
HTML
<form method="post" action="">
<button type="submit" name="animal" value="pig">Go</button>
</form>
CSS
button {
background: transparent url(http://lorempixel.com/output/animals-q-c-200-200-6.jpg) 0 0 no-repeat;
border: none;
cursor: pointer;
height: 200px; width: 200px;
}
Alternatively, you could just use an img tag:
Demo: http://jsfiddle.net/umuaU/2/
HTML
<form method="post" action="">
<button type="submit" name="animal" value="pig"><img src="http://lorempixel.com/output/animals-q-c-200-200-6.jpg" alt="Pig" /></button>
</form>
CSS
button {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript Confirm popup Yes, No button instead of OK and Cancel
Please someone help me to make a confirm box with button "Yes" and "No" without using jquery or VB.Script. I have searched a lot but I got all of the answers with jquery but that is not my requirement.
I have to call another function from confirmbox function. The code I am using below
HTML
Delete
And Javascript
<script type="text/javascript">
function show_confirm(cat_id)
{
var conf = confirm("Are you sure you want to delete the file");
if (conf ==true)
{
deleteCatagory(cat_id);
}
}
function deleteCatagory(cat_id)
{
var obj = document.getElementById("file_"+cat_id);
callAjax(cat_id,obj);
}
</script>
Very simple. You'll have to custom code an HTML box that has a Yes and No button. The Yes button executes the code and hides the box, the No button just hides the box. Something as simple as this would do:
HTML
<div id="confirmation">
Are you sure you want to delete the category?<br>
<input type="button" onclick="deleteCategory(document.getElementById('catID').value);this.parentNode.style.display='none';" value="Yes">
<input type="button" onclick="this.parentNode.style.display='none';" value="No">
<input type="hidden" id="catID" value="0">
</div>
CSS
<style type="text/css">
<!--
#confirmation {
display: none;
position: absolute;
top: 50%;
left: 50%;
background-color: white;
border: 2px solid white;
padding: 3px;
text-align: center;
width: 200px;
height: 50px;
}
</style>
Updated show_confirm():
function show_confirm(catID) {
document.getElementById('catID').value=catID;
document.getElementById('confirmation').style.display='block';
}
You need to create it yourself, this: http://dev.sencha.com/deploy/ext-4.0.0/examples/message-box/msg-box.html seems to have a way to do it but this is from 5 minutes of googling. Others suggest using a div to do it, which is my personal preference.
If you're fine with the "Ok" or "Cancel" options the confirm box gives you, you only need to fix the typo in your call. I'd do it like this
Delete
If you however want to change the default text then you're out of luck with the default confirm popup. You'll have to come up with a html based "popup".
I'm using a jQuery plugin called jQtransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) which skins HTML form elements like the input box and submit buttons. All is well until I need to use an image as the submit button. I tried the following CSS code but the original button still appears, and not the image.
CSS:
/* this is the submit button */
#search {
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
border: 0px;
background: transparent url(../images/template/icons/search.png) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
HTML:
<input type="submit" name="search" value="Search" id="search" />
** HTML code looks like it has been processed by the jQuery plugin when viewed in Chrome's 'Inspect Element' feature. The above is the original HTML code as seen when you select 'View Page Source' in Chrome.
What should I do to replace the submit button with my own image? I'm not too good with jQuery...
UPDATE
GREAT! All the answers are working. I must have been thinking too much :)
This should work
<form>
<input type="image" src="[some image]" onsubmit="submitForm();" id="search">
</form>
How about using good old HTML <input type="image" ... />?
<img type="image" src="img src..." id="search" />