Get current value of search input on SharePoint - javascript

Would like to get a pure Javascript solution for my situation.
My HTML and JS is as follows. But the HTML can't be manipulated unfortunately as its on SP.
function getCurrentValue() {
var searchQuery = document.getElementById("SearchBox").children[0].children[0].value;
console.log(searchQuery);
}
<div id="SearchBox">
<div id"randomGeneratedId">
<input type="text" value="Search..." id="anotherRandomGeneratedId"/>
</div>
</div>
<br/>
<input type="button" value="Run!" onClick="getCurrentValue();">
The JS above works in the snippet here but on my page it returns the default value of the input ie. "Search..."
FYI its running on SharePoint 2013. I should note that I managed to get it to work when getElementId("anotherRandomGeneratedId") but that require writing a custom script for every page.

Have a try to modify getCurrentValue() to:
function getCurrentValue() {
var searchQuery = document.querySelector("#SearchBox input").value;
console.log(searchQuery);
}

Related

AngularJS passing data to Javascript variables and opposite

I am looking for a solution on passing data from a specific input text field to AngularJS. it may be a Javascript variable too. If the variable is changed from inside a javascript code it is not updating on AngularJS side. If i take the same variable and in the text field add at least one character or modify something i see variable updating and everything working as it should.
I tried something with angular.element(document.getElementById('ControllerElementID')).scope().funct(); but still no luck. When i update at least one field from the keyboard, all text fields that are related to "ng-model="sig.sigBase6422"" are updating properly as it should. If i call this updates through a JavaScript function i see updates only on specific text field and no updates at all on ng-model happening. How to make it updating as simple as possible? Below i will post a small example. I was able to store data from variable to a external file and in AngularJS read it from file and use it. this is way too long, complicated and ridiculous. I am sure there should be a better way.
Thank you!
<script type="text/javascript">
function addtext1() {document.getElementById("myID1").value = "1111111111111111";}
function addtext2() {document.getElementById("myID2").value = "2222222222222222";}
</script>
<div>
<form action="#" name="FORM1">
<TEXTAREA NAME="sigData" ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
</form><br>
<input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" ><br>
<input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" ><br>
<p>Value {{sig.sigBase6422}}!</p>
</div>
<!-- test field -->
Add text 1
Add text 2
Indeed if you want to use AngularJS for what it was created, you have to rewrite your code completely using directive or controller. You variables and functions accessible from the view should be attached to the $scope too.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
$scope.addtext1 = function () {
$scope.sig.sigBase6422 += "1111111111111111";
};
$scope.addtext2 = function () {
$scope.sig.sigBase6422 += "2222222222222222";
};
$scope.sig = {
sigBase6422: ""
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form action="#" name="FORM1">
<TEXTAREA ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
</form><br/>
<input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" /><br/>
<input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" /><br/>
<p>Value {{sig.sigBase6422}}!</p>
<!-- test field -->
<button ng-click="addtext1()">Add text 1</button>
<button ng-click="addtext2()">Add text 2</button>
</div>
You seem to have misunderstood how angular works. What you're trying to do is not how angular works. What you're trying to do with native JavaScript can be done with angular. Angular can update dom and Dom updates angular as it's responsible for causing updates.... anyway without getting any deeper. You need to read more on how angular works and try sticl within the bounds of angular instead of mixing.
That being said :
Tigger change on the Dom element after you have updated its value. Or better yet get access to scope variable on the Dom and call a function in angular with the value you're and set they value from inside of a angular.
Use this code while updating the value.
pick the controller first using
var scope = angular.element(document.getElementById('yourControllerElementID')).scope();
scope.<variablename> = <your operation>;
then
scope.$apply();
the remaining thing will be taken care by Angular.

Using JavaScript with form data

I am attempting to simply pull an input from an html form and manipulate it with JavaScript. When I console.log the variable I created in JavaScript I am just getting my html element back. If I attempt to add [0] or .value, I get undefined and a JQuery error, respectively. I am at a loss as to the reason this isn't working. If it matters I am doing all this in CodePen.
HTML:
<div>
<form id="myForm">
Construction Year: <br>
<input type="text" id="construction_field" name="construction_field" value=""><br>
</form>
<button onclick="myFunction">Find P</button>
<p id="demo"></p>
</div>
JavaScript:
$(document).ready(function(){
function myFunction () {
var constructionYear = document.getElementById("construction_field");
console.log(constructionYear);
}
});
I apologize for such a simple question, but I can't find an answer that works to save my life. If it isn't obvious I am very new and struggling, any examples would be amazing.
If you wish to use jQuery:
var constructionYear = jQuery('#construction_field').val();
If you wish to use vanilla JavaScript:
var constructionYear = document.getElementById('construction_field').value;
Just use console.log(constructionYear.value);

Converting text to lowercase/uppercase with a pending a radio button

I am writing a Javascript program that takes a users input text, then (pending a radio button check – lowerCase/UpperCase) converts the input text to either lowercase/upperCase and outputs the value back to the form.
Purely trying to learn on my own Javascript. I am moderately new (but savvy) to JS. Pretty solid on HTML, CSS, Java, but BRAND new with interacting with page elements.
I have dug around for two days to try and solve this. I have even checked out a few books at my local library. (Currently reading the text, Microsoft guide to CSS/HTML, and JS). What other books would you recommend in order to under JS more?
Here is the code below. Although I know one can use CSS in order to convert this and I have done this. I'm purely just wanting to figure out Javascript.
<!DOCTYPE html>
<html>
<head>
<title> Case Changer By: Elliot Granet</title>
<style>
function convert(){
var convertedText = document.test.input.value;
if(document.getElementById("lowerCase").checked = true){
var output = convertedText.toLowerCase();
}else {
output = convertedText.toUpperCase();
}
document.getElementById('outputText').value = output;
}
convert();
</head>
The rest -
<body>
<h3>Choose your Conversion method below:</h3>
<form action="getElementById">
<fieldset>
<input id="lowerCase" type="radio" name="case" value="lowerCase">Lower Case<br>
<input id ="upperCase" type="radio" name="case" value="upperCase">Upper Case<br><br>
</fieldset>
<fieldset>
<textarea id="inputText" name="input" form="inputText">Enter text here to be Converted...</textarea>
</fieldset><br>
<fieldset>
<textarea id ="outputText" name="output" form="outputText">Converted text will appear here...</textarea>
</fieldset>
<input type="button" value="Convert">
</form>
</body>
</html>
You need to make few changes to make this function work.
style is an invalid tag to put js code. You need to put it inside <script> tag
If you are writing this function inside header yo may come across error since before DOM is ready it will try to get value of textarea with id inputText.
document.getElementById(idName').value but not is right syntax to get the value of element using id
Attaching convert() with the button. So when you will click on button the function will execute.
5.document.getElementById("lowerCase").checked = true this is wrong.It mean that checkbox will get checked as = will assign the value . Instead you need to compare the value. So use == or ===
if you declare var output inside if loop it wont be available inside else. So you need to declare it outside the if-else loop
Hope this snippet will be useful
HTML
<input type="button" value="Convert" onclick="convert()">
JS
window.load =convert; // convert function will be called after window is ready
function convert(){
var output; //variable declaration outside if-else loop
var convertedText = document.getElementById('inputText').value; //document.getElementById
if(document.getElementById("lowerCase").checked == true){ // == comparision
output = convertedText.toLowerCase();
}
else {
output = convertedText.toUpperCase();
}
document.getElementById('outputText').value = output;
}
EXAMPLE

why is $(this).data('mycontrol') undefined?

Unfortunately my front end skills are lacking as my role puts me more on the server side / db technologies as opposed to css / js. In any event, I am trying to implement this:
https://github.com/blueimp/jQuery-File-Upload/wiki/Complete-code-example-using-blueimp-jQuery-file-upload-control-in-Asp.Net.
And more specifically I was able to find an asp.net example here:
http://www.webtrendset.com/2011/06/22/complete-code-example-for-using-blueimp-jquery-file-upload-control-in-asp-net/
Basically allowing you to do mass image uploads.
I've set up the front end with the correct css and js files. I had to modify some of the js files to make use of on() instead of live() as live is deprecated. My form loads and looks like the following:
So far so good, however, as soon as I "Add file" or drag and drop a file chrome developer tools tells me the following:
Uncaught TypeError: Cannot read property '_adjustMaxNumberOfFiles' of undefined
It specifies the file as jquery.fileupload-ui.js and more specifically points me to this:
var that = $(this).data('fileupload');
that._adjustMaxNumberOfFiles(-data.files.length);
I alerted that and of course it seems to be undefined...But I don't know enough jquery to understand why it is undefined. My fileupload div markup was as follows:
<div id="fileupload">
<form action="/Handler.ashx" method="POST" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="files[]" multiple>
</label>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete files</button>
</div>
</form>
<div class="fileupload-content">
<table class="files"></table>
<div class="fileupload-progressbar"></div>
</div>
</div>
So what could be causing this to be undefined? This is what _adjustMaxNumberOfFiles does
_adjustMaxNumberOfFiles: function (operand) {
if (typeof this.options.maxNumberOfFiles === 'number') {
this.options.maxNumberOfFiles += operand;
if (this.options.maxNumberOfFiles < 1) {
this._disableFileInputButton();
} else {
this._enableFileInputButton();
}
}
},
I'm using jquery 2.0.3 and jquery ui 1.10.3
Update
I've gotten it down to the point that the example link which I posted (2nd link above) the only difference is the version of jquery they are using, appears to be 1.8.2 and I am using 2.0.3. The difference and problem is this piece of code:
var that = $(this).data('fileupload');
In the example download this returns some strange object:
a.(anonymous function).(anonymous function) {element: e.fn.e.init[1], options: Object, _sequence: Object, _total: 0, _loaded: 0…}
In my version (using 2.0.3) I am getting undefined for this:
var that = $(this).data('fileupload');
Is there another way I can do this one line of code?
After much playing around in the console window I got it with this:
var that = $("#fileupload").data('blueimpUI-fileupload');
So for anyone that is using anything > jQuery 1.8 please change this line:
var that = $(this).data('fileupload');
to this:
var that = $("#fileupload").data('blueimpUI-fileupload');
How are you initializing the plugin? The issue might be your selector. Target the form itself, vs. the wrapping div.
Based on your html...
Try changing: $('#fileupload').fileupload({ /*options*/ });
To: $('#fileupload form').fileupload({ /*options*/ });
Also, you may have to move your .fileupload-content div inside of the form tag as well.

Populate form field with javascript

I have a form with several fields populated by the user and before it is submitted some javascript gets called when a check button. It tries to set the value of the form fields to a variable that exists in the js function.
document.getElementById('var1').innerHTML = test;
alert(test);
I know the javascript is working as expected because I see the alert but the form boxes are not getting populated:
#helper.input(testForm("var1")) { (id,name,value,args) => <input type="text" name="#name" id="#id" #toHtmlArgs(args)> }
innerHTML is used to get/set the body of an html tag, so you're probably ending up with this in the html:
<input ...>test</input>
I think this may work for a <textarea>, but for your <input type="text"> you want to set the value attribute.
document.getElementById('var1').value = test;
If you want to programmatically set an html form field via JS there are many ways to do this and many libraries out there that make it really easy.
Such as various JS two-way component template binding libraries.
For instance, you can simply do the following:
HTML:
<div id="myapp">
<input id="var1"/>
<button>Submit</button>
</div>
JS:
mag.module('myapp',{
view : function(state){
var test= 'tester';
state.button= {
_onclick:function(){
state.var1=test
}
}
}
});
Here is working example of the above example:
http://jsbin.com/ciregogaso/edit?html,js,output
Hope that helps!

Categories

Resources