Input text box not recognising in IE8 - javascript

I am working in a page created with the help of sharepoint .
In that page , we have one tag.
<input name="SearchBox" title="Search..." class="" id="" accessKey="S" onkeydown="" onkeypress="" onfocus="" onblur="" type="text" maxLength="2048" autocorrect="off" autocomplete="off" value="test"/>
something like the above
In IE9 and above , chrome I am fetching the value of the text box and I am passing that value to another function . It is working fine
But In IE8 , if i tried to fetch like document.getElementsByName('SearchBox')[0].value, it throwing error as "SCRIPT5007: Unable to get value of the property 'value': object is null or undefined "
I inspected the elements in developer tool of IE8. I am really surprised the input tag element is not able to inspect in IE8 . Then I opened the html in developer tool and I saw the element is missing in html file . But it is rendering in page. How come is it possible. Can anyone help me regarding this ?
We used sharepoint 2013.

Try this code:
You should allow the blocked content:
HTML:
<input name="SearchBox" title="Search..." class="" id="txt1" accessKey="S" onkeydown="" onkeypress="" onfocus="" onblur="" type="text" maxLength="2048" autocorrect="off" autocomplete="off" value="test"/>
JS:
$(document).ready(function(){
var val=$("#txt1").val();
alert(val);
});

Have you tried it with JQuery?
$("input[name='SearchBox']).val();

Related

How to get the value from hidden or display:none input with javascript

I have these two hidden inputs and I want to get the value of both but when trying to access to the values I'm gettin' Uncaught TypeError: Cannot read property 'value' of null
// I have been trying from code and chrome console with
console.log(document.getElementById('totalU').value);
console.log(document.getElementById('totalU'));
console.log(document.getElementById('totalW').value);
console.log(document.getElementById('totalW'));
<li style="background-color:white"><span> <input id="totalU" type="text" value="18" style="display:none"></span></li>
<li style="background-color:white"><span> <input id="totalW" type="hidden" value="20"></span></li>
But still gettin' the null, is there anything wrong with the HTML and javascript?
Per requirement, I need to use javascript, not jQuery. Thanks in advance for any help.
This is working fine.
console.log(document.getElementById('totalU').value);
console.log(document.getElementById('totalU'));
console.log(document.getElementById('totalW').value);
console.log(document.getElementById('totalW'));
<li style="background-color:white"><span> <input id="totalU" type="text" value="18" style="display:none"></span></li>
<li style="background-color:white"><span> <input id="totalW" type="hidden" value="20"></span></li>
I'm sure you're just running the javascript part before the elements are created.
Check if your <script> tag is after this HTML code. Usually they're put before the closing of the <body> tag.

page does not change from javascript

I am working on a website using Jekyll through github-pages. I am working on some simple javascripts to make a random number generator, but they aren't able to change values on the page.
The page has the following:
/resume/index.html
<form>
<input type="text" name="#d" maxlength="3" value="1" />
<div class="dice_text">d</div>
<input type="text" name="d#" maxlength="2" value="4" />
<button type="button" name="rollme" onclick="roll()">roll</button>
<div class="dice_text"> : </div>
<input type="text" id="dieresult" readonly />
</form>
/resume/roll.js
document.getElementById('dieresult').setAttribute('value', '3') ;
function roll() {
alert("rolled!");
}
For some reason I don't understand, the roll() function will get called and give an alert when you press the button, so the site seems to be incorporating the javascript file, but it refuses to alter the page to display a number in the read only field.
My repo is online at github, and the problem site url is here.
EDITED: corrected 'id' vs 'name' issue but page still won't change the value of 'dieresult'
You're mistaking the name attribute with the id attribute
When you attempt to grab that element using document.getElementById, it will return null.
Making the id dieresult should fix this. I highly suggest getting cozy with your browser's inbuilt JavaScript console - you pick up on minor mistakes like this very quickly!
Your <input type="text" name="dieresult" readonly /> does not have an ID, which is what you are looking for in the line document.getElementById('dieresult').setAttribute('value', '3') ;
If you change the <input type="text" name="dieresult" readonly /> to <input type="text" id="dieresult" readonly /> and place this in the roll() function it should work just fine
your input has a name but you query it by id, change it to this:
<input type="text" name="dieresult" id="dieresult" readonly />
You have a 404 on jquery. Fix this by putting a jquery in your roll folder.
And, you can try to execute you code once everybody is onboard
$( document ).ready(function() {
document.getElementById('dieresult').setAttribute('value', '3') ;
});
See http://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready

AngularJS - ng-model not working with bootstrap directives

I am using AngularJS for my project and I am new to it. But I liked its features and very convenient for development as well. But I came up with the following issue and didn't know to get out of it.
I have a multi view application. The following code is a part of signup view. This view gets displayed when the signup button is pressed. Now the issue is, in the 4th and 5th line below, I have attached a ng-model attribute to and I am able to print the number obtained using {{num}} directive. However, the ng-model num2 below is not getting displayed as above. All I get is the static text {{num2}} being displayed. Why is it not working like the previous case?
<form role='form' action='#/app/register_db' method='post'>
<h1><small><b>Sign Up Information<b></small></h1>
<br>
<input type='text' ng-model='num'>
<h1>{{num}}</h1>
<div class='row'>
<input type='text' ng-model='num2'>
<h1>{{num2}}</h1>
<div class='col-xs-5'>
<input type="text" class='form-control' id="fn" name='firstname' ng-model='ng-firstname' placeholder="First Name">
</div>
</div>
...
...
I am new to AngularJS and I am very quickly grasping concepts. So if I am missing something, then please guide me through the right path and help me fix this issue.
I am using angularJS and Bootstrap CSS.
Thanks.
You should get the following error message in your browser's console:
[ngModel:nonassign] Expression 'ng-firstname' is non-assignable. Element: <input type="text" class="form-control" id="fn" name="firstname" ng-model="ng-firstname" placeholder="First Name">
As ng-model="ng-firstname" is not a reference by name, but an expression AngularJS will try to evaluate, so simply not using a dash will fix that. What happens when you break the code there is AngularJS basically stops, and anything else AngularJS would usually do in elements that follow, simply doesn't happen.

Chrome incorrectly invalidating form input after jQuery clone

I have an issue when cloning a from in Chrome. Note that this doesn't seem to happen in Firefox.
When I dynamically create an input and clone that and then append to the form it will not validate, but when I check the validityState object of the Node is says everything is fine.
I know the clone doesn't make much sense, but it's a reduced testcase from what I require. Are there any solutions to ensure the DOM data is copied over correctly?
Javascript:
$('<input type="text" required="required" />').val('08').clone().appendTo('#form1');
$('<input type="text" required="required" />').val('08').appendTo('#form2');
HTML:
<form id="form1"><input type="submit" value="Click me"/></form>
<form id="form2"><input type="submit" value="Click me"/></form>
Fiddle for reference: http://jsfiddle.net/x7aRt/1/
Looks like a bug in chrome (webkit?) or related maybe to jQuery.
To validate input, looks like you need to re-set value after cloning it, doesn't make much sense but...
$('<input type="text" required="required" />').val('08').clone().val(function(){return this.value}).appendTo('#form1');

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

Categories