Develop Reference

How to use Google Autocomplete in HTML?

I am a person who does not know javascript. For now. I made a small homepage design with PHP. There is a textbox and it searches Google. However, I couldn't find how to add autocomplete to it.
My homepage.php's HTML result:
<form action="https://www.google.com/search" method="GET" role="search"><center>
Search Web:<br>
<input id="meow" class="FormControl" maxlength="2048" name="q" type="text" autocomplete="off" autofocus="""><br>
<button type="submit" class="Button Button--primary">Google Search</button>
<br><br>This page will direct you to the Google search engine.
I saw on the internet there is a JSON file that does this but I have no idea how to use it.
http://google.com/complete/search?client=chrome&q=never+gonna+g

Follow the link including the input value using two input and button tags

How to follow a link with a value in the input field without writing additional javascript, i.e. all code in html input and button tags?
Let's say there is a Google site for search and the search line is in input, so that when you click on the button, the link https://www.google.com/search?q= and the value of the input field, for example, text are substituted:
https://www.google.com/search?q=text
<input type="text" id="search" name="search" value="text">
<button onclick="code">Follow a search link with a value in input</button>

To do this without any JS you simply need to create a <form> element whose target is google.com/search.
The only things to note is that the action should be get and the input name needs to be q so that the correct querystring format is used when the form is submit. Try this:
<form action="https://www.google.com/search" method="get">
<input type="text" id="search" name="q" value="" required />
<button type="submit">Follow a search link with a value in input</button>
</form>

"It’s necessary without using a form, you can have js code"
Well, there is a js code that you can use to achieve this
<input type="text" id="search" name="search" value="text">
<button onclick="search()">Follow a search link with a value in input</button>
<script>
function search() {
const searchValue = document.getElementById('search').value
window.location.href = `https://www.google.com/search?q=${ searchValue }`
}
</script>

Form action should be set to the website you need, google in this case
Form method should be GET
Form fields must be named, like the parameters in the query string
Example:
<form action="https://www.google.com/search" method="GET">
<input type="search" placeholder="Search..." name="q" />
<input type="submit" value="serach"/>
</form>

Javascript: change element value by input textbox

I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" />
</form>
<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>
<div class="sm" data-type="news" data-symbol="THISVALUE"></div>
Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.
Perhaps it would be better to do this in php?

You can also use the setAttribute() function
function showElements(){
document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);
}

First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.
Learn more about data attributes here: Using data attributes | MDN
I assume you want the data submitted in the form to get into the data-symbol attribute.
Checkout the working code snippet below:
function showElements(){
// just copy over the search text into the data attribute
document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;
}
<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->
</form>
Check the result using Developer Tools (I have used Chrome here):

Dynamic links with JavaScript

this is my problem.I have a JSP. I want to create a hyperlink dynamically with Javascript. I want to add the text from an input in HTML and use it to pass it as a parameter in my URL:
<form name="test">
<P>Enter search: <input type="text" name="searchName"><BR><BR>
<input type="Button" Value="" onclick="location.href='search.jsp?typeOfSearch=" + JavaScriptFunction( that returns the String from searchName ) ' " >
</P>
</FORM>
I cant seem to add a JS function to the "onclick" string. I ve tried with HREF from an anchor but I cant make it work. And I ve also tried just putting a JS function like this:
<a href="MyJSfunction( that returns the entire URL ) " > hyperlink</a>
and also it does not work. I ve tried like a million diferent things and I still cant pass dynamic parameters from one JSP to another.
Any help would be very good! ...

No JavaScript required. Just set your form method and action, use a submit button, and rename your input field:
<form name="test" method="GET" action="search.jsp">
<p>
Enter search: <input type="text" name="typeOfSearch" /><br/><br/>
<input type="Submit" Value="Go" />
</p>
</form>
Edit: But, if you are just curious how to do it with JavaScript, form elements all have a form property. Form elements are accessible from the form by name. So, you can use this.form.searchName.value to get the value of the searchName field in the same form as your button:
<input type="Button" Value=""
onclick="location.href='search.jsp?typeOfSearch=' + this.form.searchName.value;" />
Edit: The trouble you are having with your current code may be because you have the quotes wrong. Change the double quote at the end of typeOfSearch=" to a single quote: typeOfSearch='. Remove the single quote following your function call:
<input type="Button" value=""
onclick="location.href='search.jsp?typeOfSearch=' + JavaScriptFunction()" />

If you aren't too concerned about security, a simple HTML form should work.
<form action="Your URL Here">
<input type="text" value="" name="search" />
<input type="submit" value="search" />
</form>
http://jsfiddle.net/harveyramer/VfuT4/

HTML: Copy form fields to another form including FILE input field?

I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);

Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]