Hey guys, this bit of code works in IE but not in Chrome, any idea why?
<script type="text/javascript">
function fillreply(commentID){
var item = document.getElementById("replyto");
item.value=commentID;
}
</script>
...
...
<div id="makereply" class="hidden">Reply to: <input type="text" size="6"
name="replyto" readonly />
In IE javascript:fillreply(4); will work but not in chrome where nothing happens.
Your input doesn't have an id attribute, and you're trying to retrieve it with getElementById.
<input type="text" size="6" id="replyto" name="replyto" readonly="readonly" />
Related
So this was brought to my attention today, that our website search field does not work in chrome... I cannot click and enter text into the text field, nor click the search icon to initiate searching...
Sorry I do not know the specifics as to what is causing this, nor did I develop this. One of our developers who left quite some time ago did. I am now in charge of trying to figure this out.
FireFox and IE 11 seems to working fine.
Any insight is greatly appreciated.
<div class="searchbox" id="searchbox">
<script type="text/javascript">
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
}
</script>
<div class="formSrchr">
<input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="image" name="imageField" alt="search" src="/_images/search-mag.gif" onclick="RunSearch();" />
</div>
</div> <!-- /searchbox -->
This is bad code and i suggest an entire re-write.. As for a quick fix..
You could try the following :
var searchTerm = document.getElementById("search").value;
location.assign("http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + searchTerm );
Or
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
return false;
}
But dont use this.. re-write it!
My recommendation is to open the Developer tools in chrome and look at the Javascript debug window. That should tell you what's going on in the more general case. In either case, I recommend rewriting that snippet like this:
<div class="searchbox" id="searchbox">
<div class="formSrchr">
<form action="http://search.domain.com:8765/query.html" method="get">
<input type="text" size="20" name="qt" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" onmouseup="return false" />
<input type="hidden" name="ql" id="ql" value="" />
<input type="hidden" name="col" id="col" value="web1" />
<input type="image" alt="search" src="/_images/search-mag.gif" />
</form>
</div>
</div>
The standard form element will behave the way it's supposed to without JavaScript. All the named inputs will be added as URL parameters just like it did before. That's what method="get" does. For most forms, the default method="post is best; however, for search you aren't really posting anything. There are some strange proxy servers that disable all HTTP POST calls to prevent people behind that proxy from accidentally sharing information they aren't supposed to. The method="get" allows those people to at least search your site.
NOTE: based on some searching around, Chrome needs you to disable the onmouseup event for focus and blur to work as expected. My HTML form above has that change in it already for you.
In HTML 5, you can simplify it even more by using the placeholder tag. It would look like this:
<input type="text" size="20" name="qt" placeholder="Search" value=""/>
That removes all the Javascript from your search form.
I have Chrome Version 33.0.1750.154 m and knockout 3.0.0
I am trying a thing like below, but binding doesn't work for the password input. I have tried it in Internet Explorer, it works, but it doesn't work in chrome. The password property is always empty, I couldn't find the reason.
<div>
<div>
<label>Password</label>
<div>
<input type="text" data-bind="value: Password" />
<span data-bind="text:Password"></span>
</div>
</div>
<div>
<label>Password Again</label>
<div>
<input type="password" data-bind="value: PasswordAgain" />
<span data-bind="text:PasswordAgain"></span>
</div>
</div>
</div>
var user = function () {
this.Password = ko.observable('');
this.PasswordAgain = ko.observable('')
};
ko.applyBindings(new user());
Fiddle
I found the reason. It didn't work due the kaspersky virtual keyboard extension for chrome. I disabled it, and it works now.
I am pretty new to Angular JS .Here I have a simple form as below:
test3.php:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
</head>
<body>
<form name="myForm" id="myForm" ng-controller="Register" ng-submit="submit()" action="test2.php" method="post">
<label>First Name:</label>
<input type="input" name="firstname" ng-model="firstname" required>
<label>Last Name:</label>
<input type="input" name="lastname" ng-model="lastname" required>
<label>Email:</label>
<input type="email" name="email" ng-model="email" required>
<input type="submit" id="submit" value="Submit" />
</form>
<script>
function Register($scope) {
$scope.firstname = '';
$scope.lastname = '';
$scope.email = '';
$scope.submit = function() {
document.getElementById('myForm').submit();
};
}
</script>
</body>
</html>
And test2.php:
<?php
echo $_POST['firstname'];
?>
When I load test3.php and click on submit without filling any details, I get the message to fill the fields accordingly and the form is not submitted to test2.php. When all the details are entered properly and then if I click Submit, I see the $_POST['firstname] value. This works correctly in chrome and firefox.
But in IE9, there is no validation at all. On click of Submit, the form is submitted always, be the fields empty or not.
How do I make this code work in IE9 and further? The Angular JS API provides help for IE versions 8 and less.
The cause is due to the fact that (IE < 10) are not HTML5 compliant with respect to client-side validation and therefore wont return true if a "required" attribute is present on the input element, but instead return the (string) attribute value.
Use ngRequired instead of required attribute.
I am building a form using html in wordpress. The fields that need to be required work in chrome (giving a please fill out this field when the submit button is pressed without information in the field) however it will not work in IE or mobile, it just allows the form to be submitted. Here is a sample of a field
Last name: *
input type="text" name="lastname" value="" maxlength="50" required="required"
I dont know whats going on here and Im pretty new so any help would be appreciated
(edit with answer)
This is what I ended up doing and it works now thanks for the responses
<html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" form action="dlcplateFormTest.php" onsubmit="return validateForm()" method="POST">
<tr>
<td>Last name: *</td>
<td><input type="text" name="lastname" value="" maxlength="50" required="required" /> </td>
</tr>
<tr>
<input type="submit" value="Submit" /><input type="reset" value="Reset" />
</form>
</body>
</html>
you need to write a javascript function that checks if the fields are "" or not if they are "" then cancel request
I realise that the HTML5 elements do not work on IE. ELements such as required placeholder are not working on IE. I found a javascript to make the placeholder work already but I would like to ask if is there any javascript coding to make the required attribute work as well??
Cheers!
My code:
<input required="required" type="password" name="password" id="password" class="regfields"/>
Thanks in advance
add this js refrence :
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
and try this:
<form id="myform">
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
}); ;
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#myform").validate({
rules: {
field: "required"
}
});
});
</script>
<label for="field">
Required:
</label>
<input class="left" id="field" name="field" />
<br />
<input type="submit" value="Validate!" />
</form>
You could find some useful polifills here : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills. FORM polifill will give you the HTML5 FORM facilities even in IE. Maybe this is what you need : http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/