We Keep Coding

Javascript: How to print input to <div> selected by class?

Edit: Thanks for the helpful answers so far! I'm still struggling to print the input to the "right" div, though. What am I missing?
Next to the input field, there is an option to select either "left" or "right". Depending on the selection, the input is to be printed eiether left or right on the click of a button. This is what I have - but it only prints to the left, no matter the selection.
jQuery(document).ready(function(){
$('.button').click(function(){
$('.input').val();
if ($('select').val() == "left"){
$('div.left').html($('.input').val());
}
else {
$('div.right').html($('.input').val());
}
});
});
</script>
Sorry if this is very basic - I am completely new to JS and jQuery.
I'm trying to print input from a form into a div. This is part of the source HTML modify (it's for a university class):
<input type="text" class="input">
<div class="left">
</div>
<div class="right">
</div>
Basically, text is entered into the field, and I need to print this text either to the "left" or the "right" div when a button is clicked.
So far, I have only ever dealt with divs that had IDs, so I used
document.getElementById("divId").innerHTML = ($('.input').val());
But what do I do now when I don't have an ID? Unfortunately, changes to the HTML source are not an option.
Thanks in advance!

Just use normal selectors, like css and jQuery does.
https://api.jquery.com/category/selectors/
in your case:
$('div.left').html($('.input').val());

As you see there are many ways to do this. You can get elements by tag name, class, id...
But the most powerful way is to get it with querySelector
function save() {
var input = document.querySelector('input').value;
document.querySelector('div.left').innerHTML = input;
}
<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>

There are plenty of other ways to target HTML elements, but the one you're looking for in this case is getElementsByTagName(). Note that this returns a NodeList collection of elements, so you'll additionally need to specify the index that you wish to target (starting at 0). For example, if you want to target the second <div> element, you can use document.getElementsByTagName("div")[1].
This can be seen in the following example:
let input = document.getElementsByTagName("input")[0];
let button = document.getElementsByTagName("button")[0];
let div2 = document.getElementsByTagName("div")[1];
button.addEventListener("click", function(){
div2.innerHTML = input.value;
});
<input type="text">
<button>Output</button>
<br /><br />
<div>Output:</div>
<div></div>

Since you have unique class names for each element, document.getElementsByClassName can be used. This will return an array of elements containing the class. Since you only have one element with each class name, the first element of the returned array will be your target.
<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>
<script>
function save() {
var input = document.getElementsByClassName('input')[0].value;
document.getElementsByClassName('left')[0].innerHTML = input;
}
</script>

This is one of the many ways to do what you want:-
Write the following in console:
document.getElementsByTagName("div");
now you can see the total number of div elements used in your current document/page.
You can select one of your choice to work on by using "index number"(as in array index) for that particular div.
Lets say your div having class name = "right" is the 3rd one among the other div elements in your document.
This will be used to access that div element.
document.getElementsByTagName("right")[2].innerHTML = "whatever you want to write";

Change HTML as an input field changes

I have a registration form that asks for a few basic details. I would like to be able to add the person's first name to a question that's on the same page, without submitting the form to do it.
i.e. As the page loads, the question will be, "Is Attendee 1 a delegate?", but when they type in their name, it will change to "Is Matthew a delegate?"
The questions are on the same page, so I know this has to be done with jQuery somehow...
Any help is greatly appreciated.

If your HTML looked something like this
<div>Is <strong id='name'>Attendee 1</strong> a delegate?</div>
<input type='text' id='name-input'></input>
Then you could achieve this without jQuery like this:
window.addEventListener('load', init);
function init() {
var input, name;
input = document.getElementById('name-input');
name = document.getElementById('name');
input.addEventListener('change', function() {
var value = input.value;
if(value.length === 0) {
value = 'Attendee 1';
}
name.innerHTML = value;
});
}
Of course, you could do the same thing with jQuery, but this is exactly the kind of thing that the two-way binding libraries and Frameworks lend themselves to. This is how I would go about doing it in AngularJS.
<div ng-controller='MyFormController'>
<div>Is <strong ng-bind='name'></strong> a delegate?</div>
<input type='text' ng-model='name'></input>
</div>
And the JS:
function MyFormController($scope) {
$scope.name = 'Attendee 1';
}
Angular, Ember, Backbone and Knockout are all good things to look into!

You should probably use the OnBlur attribute on your . Call a function within OnBlur that extracts the data from the input and puts it into the label.
In the HTML use tags to surround the data that you want to dynamically replace. Locate those tags with the JavaScript or JQuery and replace the data inside.

You can do this:
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="text" id="name" name="name" onChange="document.getElementById('name_new').innerHTML = document.getElementById('name').value"/>
<div> Is <strong id='name_new'>Attendee 1</strong> a delegate?</div>
</body>
</html>

search html div and display results on different page

I want to search multiple HTML files from a separate page, where I search for text from all the divs which has a specific id for each, whole id containing matched search term will be displayed on the search page in list.
The div list looks like this :
<body>
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
Please note that I want to perform search from different page and want to display results there with links to the searchable page.
For now I was searching like this :
HTML
<body>
<input type="text" id='search' />
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
JavaScript
$('#search').on('input', function () {
var text = $(this).val();
$('.vs div').show();
$('.vs div:not(:contains(' + text + '))').hide();
});
It is working on the fiddle here, but I don't want it to work like this, I want to do the search from a separate page remotely and display results there with link to this page.

Solution with jQuery and AJAX:
<form id="searchForm">
<input type="text" id="search"/>
<input type="submit" name="Search!" />
</form>
<div id="resultContainer">
</div>
<script type="text/javascript">
$("#searchForm").submit(function(e) {
e.preventDefault();
var results = $("#resultContainer");
var text = $("#search").val();
results.empty();
$.get("http://example.com/", function(data) {
results.append($(data).find("div:contains(" + text + ")"));
});
});
</script>
Fiddle (This fiddle enables you to search for content on the jsfiddle page, try for example JSFiddle as search term.)
Note however that this does not work cross-domain, because browsers will prevent cross-site scripting. You didn't describe your use-case clear enough for me to know whether you're okay with that.

You'll want to look at using PHP file_get_contents to retrieve the HTML contents of the external page, and from there analyze the data in the <div>s that you are interested in. Ultimately, you'll want to store each individual search term in a JavaScript array (you can create JavaScript arrays dynamically using PHP), and then create search functionality similar to example you posted to search all the elements in your array.
So on page load, you'll want to have a <div> in which you are going to list all the elements from the array. You can list these by looping through the array and displaying each individual element. From there, you will want to call a function every time the user enters or deletes a character in the <input> box. This function will update the <div> with an updated list of elements that match the string in the <input> box.
This is the theory behind what you are trying to accomplish. Hopefully it will give you some direction as to how to write your code.
Update:
If you're looking for a JavaScript only solution, check out a JavaScript equivalent of PHP's file_get_contents: http://phpjs.org/functions/file_get_contents/
From here, you can maybe look at using .split to break up the list. Ultimately, you're still trying to store each individual search term as an element in an array, it's just the method that you retrieve these terms is different (JavaScript as opposed to PHP).
Perhaps I was emphasizing too much on PHP, perhaps it's because it's the web development language I'm most familiar with. Hope this JavaScript-only solution is helpful.

how to display text in div dynamically

I have searched on the forum and saw posts about changing text dynamically upon click. But in my case I want to change the display dynamically when loading the page from beginning. I already have a function that figure out what I should display:
function phone()
{
//code here
return phone;
}
And my question is how to display the returned phone number in the div below to replace the 1.888.888.8888 part. Can anyone offer some insights? Thank you!
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call 1.888.888.8888</span></span>
</div>

I would change the HTML to add another <span> tag around the phone number and give that span tag an id attribute in order to access it easily (broke it up on separate lines to reduce scrolling):
<div class="add-info">
<span class="rightfloat">
Order online <span class="red">
or call <span id="contact-number"></span>
</span>
</span>
</div>
Then after the page loads update the span with whatever value you want:
window.onload = function() {
document.getElementById('contact-number').innerHTML = PHONE_NUMBER_VALUE;
}
In JQuery, it would be:
$(document).ready(function () {
$('#contact-number').html(PHONE_NUMBER_VALUE);
});

You can,
<body onload="phone();">
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call
<span id="phone"></span>
</span>
</div>
</body>
And set the value when the function runs;
function phone() {
document.getElementById("phone").innerHTML = "1.888.888.8888";
}

Instead of returning 'phone', why don't you put an id on your span and just use
document.getElementById('spanId').innerHTML = phone
in your javascript?

Call you code from the window.onload event.

I would separate the number into additional <span> tag with its own id and change content of it with js...
document.getElementById('id_of_span').innerText = 'new number';

Try this
<script>
function phone(number) {
var redText = document.getElementByClassname("red")[0];
redText.innerHTML = "or call " + number;
}
</script>
To call it you can use clicks, loads or anything else. For example
<script>
window.onload = phone('NEW NUMBER HERE');
</script>
Bear in mind that adding another window onload function later will displace this one, so you would either need to add to it, or use a double delegate function, but that's another story...

Changing Img Src based on value entered in a Textfield

I need help creating a form with the following
TEXTFIELD(will be used to enter 7digit model numbers)
An image placeholder (will change the image placeholder's src based on a url for example it will become src="http://yourwebsite.com/product/TEXTFIELD.jpg)
I need to somehow get the the H1 tag values from within the product's url
#3 IS STILL UNSOLVED !
I'm REALLY desperate for any type of help.
I've googled the entire day REALLY need assistance.
Thank You !
I have some code below that helps visualize what I'm kinda looking for.
Please contact me if you need clarification or if I'm a bit confusing.
<form name="form1" method="post" action="">
<p>7-digit product#
<input type="text" name="model" id="model">
</p>
<p>
<input name="start" type="hidden" id="start" value="http://www.mywebsite.com/Products/">
</p>
<p>
<input name="end" type="hidden" id="end" value=".jpg">
</p>
<p><img name="proudctimage" src="=#start#model#end" width="32" height="32" alt=""></p>
</form>
<script>
var model_input = document.getElementById('model');
var start = document.getElementById('start');
var end = document.getElementById('end');
var image = document.getElementsByTagName('img');
model_input.onkeyup = function(e){
image[0].src = start.value + model_input.value + end.value;
}
</script>
~EDITED 9:00AM 5/29/12~
The Values entered in the textfield gets deleted if you hit enter
I need a way to grab a product's description stored in a H1 tag using the respective URL (The URL is the model number of what is entered in the textfield but uses a slightly different url structure that is different than the one used to grab images , see below ... http://mywebsite.com/ProductDetails.aspx?productid=TEXTFIELD)
***I Should make note that the URL used to get the H1 data will be a "cross domain" & not necessarily on the some domain. I read that jquery may not make requests on cross domains

You could use Jquery to do this easily.
Grab a copy of Jquery from http://www.jquery.com or use the CDN version by pasting this into your head section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Here's a simplified version:
If the start and end parts of your URL are not going to change you could simplify your form:
​<form>
<label>Model Num</label>
<input type="text" name="model" id="model" />
<input type="button" value="Update Image" id="update" />
</form>
<img src="" />
​
Then With the following Jquery code, you can detect a click on the update button, grab the code from the text box and change the image src attribute to
http://mysite.com/products/typed_code_here
Just paste the jquery code (and the script tags) into your head section
<script>
​$(document).on('click','#update',function(){
$('img').attr('src','http://mysite.com/product/'+$('#model').val()+'.jpg');
});​​​​​​
</script>
If you want to do this without Jquery and if your html has to remain as above, you could use the following along with your original html (watch out for spelling mistakes in your code):
<script>
var model_input = document.getElementById('model');
var start = document.getElementById('start');
var end = document.getElementById('end');
var image = document.getElementsByTagName('img');
model_input.onkeyup = function(e){
image[0].src = start.value + model_input.value + end.value;
}
</script>
The onkeyup event could be changed to blur, change etc depending on how you want to update the image. I'd suggest a button such that the user can update the image when they believe the code is valid.
Update​
The following github project has made progress on the front of cross domain html requests with jQuery. https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/
Basically you'd just need to grab the product page via ajax (jQuery.ajax()) and then in the ajax callback you'd have to scan the returned HTML for the h1 element. Ultimately cross domain ajax is a design pattern and there are best practices associated with it. Grabbing the whole HTML page for the sake of an h1 element is not very effective. Consider revising your approach and be sure to check any copyright laws/terms and conditions if the site you're referencing is not your own.

If your using jquery, you could do this:
$(function () {
$('#model').change(function () {
$('img[name="productimage"]').attr('src', $('#start').val() + $('#model').val() + $('#end').val());
});
});

In your html take a hidden div. suppose
<div id="loadSource"></div>
$('#model').blur(function () {
var modelVal = $.trim(this.value),
startVal = $.trim($('#start').val()),
endVal = $.trim($('#end').val());
if( modelVal && startVal && endVal) {
var imgUrl = startVal + modelVal + endVal,
siteUrl = startVal + modelVal;
$('img[name="productimage"]')
.attr('src', );
// process to get h1 tag
$('#loadSource').load(''+ siteUrl +' h1', function() {
console.log( $('#loadSource h1').text() );
});
}
});