We Keep Coding

How to give the same behavior of an input hidden and of a custom label

How to give the same behavior of a file type input button with style = "display: none;" To a custom label? That is, the label and the input can have the same actions even though the input is hidden.
Below my html code:
<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true" />

it is quite easy with jQuery:
$('#model1Label').on('click', function(){
$('#model1').triggerHandler('click');
//seems not to work consistently on chrome (only for file inputs?)
//$('#model1').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="model1Label" for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true" />
EDIT: as suggested by SKSpall, modified the trigger function for a weird behaviour on at least chrome

Looking to Add a variable inside an HTML link

excuse my ignorance but i would really appreciate your help.
I am new to HTML and i am just trying to add a variable inside an HTML link (ex. http://www.google.com/variable/).
The variable will be text type and i want to replace the text when i type something in a search bar.
(ex. search for "cars" and have www.google.com/cars)
Any thoughts how i can start this?
Much appreciated.

Write following javascript function:
function set(me)
{
var link = 'http://www.google.com/';
document.getElementById('result').value = link + me.value;
}
I have written following HTML lines to illustrate:
<div>
<input type="text" id="test" onkeyup="set(this);" />
<input type="text" id="result" />
</div>
You can call this function on onkeyup or onchange events as required.

Include in your Html.
<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search in Google" />
</td>
</tr>
<tr>
<td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="rotinadigital.net"/>Only my site<br />
</td>
</tr>
</table>
</div>
</form>

If you want variables in strings then take a look at template literals. You can use them like so:
var variable = document.getElementsByTagName('input')[0].value;
var url = `https://www.google.com/${variable}/`;
// same as 'https://www.google.com/' + variable + '/'
It sounds like you're trying to achieve an effect similar to Google Instant though. Afaik that's just done through standard anchor links and using javascript to (rather radically) manipulate the contents of the page. Actually navigating to a different page would cause a rather noticeable delay.

Using javascript/jquery, pass form variables to iframe src parameters

I have an iframe like this:
<iframe name="report-iframe" id="report-iframe" src="https://reporting.com/embed" width="100%" height="300" frameborder="0"></iframe>
I want to replace the src value using values from a form
<form method="post" target="report-iframe">
<input id="form-type" name="form-type" type="text" />
<input id="form-date" name="form-date" type="date" />
<input type="button" value="Update Report" onclick="javascript_function()"/>
</form>
so the resulting source of the iframe is:
src="https://reporting.com/embed?param_type=form-type&param_date=form-date"
Then reload the iframe with the passed parameters.
I want to do this using only javascript/jquery if possible.

Here's a jQuery approach.
function javascript_function() {
$('#report-iframe').attr('src','https://reporting.com/embed?param_type=' + $('#form-type').val() + '&param_date=' + $('#form-date').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe name="report-iframe" id="report-iframe" src="https://reporting.com/embed" width="100%" height="300" frameborder="0"></iframe>
<form method="post" target="report-iframe">
<input id="form-type" name="form-type" type="text" />
<input id="form-date" name="form-date" type="date" />
<input type="button" value="Update Report" onclick="javascript_function()"/>
</form>

This JSFiddle accomplishes what you're asking. You'll want to tweak it for robustness, but basically you can target the form (I used $('form') but for a real-world scenario you might want to be more specific.) and use .serialize() to turn its values into a query string, then append that to the src attribute of your iframe.
Edit: Note that for your specific example to work with .serialize(), you'd want the name attribute of #form-type to be "param_type" and the name attribute of #form-date to be "param_date"

HTML Form isn't submitting. Using Material Desing and Javascript

I have this form which I can't make submit.
<div class="enviar">
<form onClick="submitForm();" id="MessageSend" name="MessageSend" method="post" action="Send_Text_Msg.php">
<table width="100%">
<tr width="100%">
<td colspan="2"width="600px">
<textarea disabled="disabled" rows="4" name="MessageTextArea" id="MessageTextArea" style="resize: none;"></textarea>
</td>
<td>
<div class="button raised blue" style="cursor: pointer;">
<div class="center" fit>Enviar</div>
<paper-ripple fit ></paper-ripple>
</div>
</td>
<td><input type="submit" onclick="submitForm();"hidden id="IDConversa" name="IDConversa" value=""/></td>
</tr>
</table>
</form>
</div>
Since I'm using a < div > as a button I use this Javascript code to submit it
function submitForm()
{
alert("hue");
if(document.getElementById('MessageTextArea').value == "")
return false;
else
document.getElementById('MessageSend').submit();
}
And the weird part is that even the alert() isn't showing up. I was using a normal button before this material design one and It wasn't working either
EDIT:
I gave up on using form. I'll use AJAX instead. Thanks for the help

I tried it in jsfiddle. It seems you have script in bad order!!! If i modified your script as below it start work.
tutorial w3c
Put your validatation script into head or on body. In jsfiddle left side no wrap .. option
Add onsubmit no onclick into the form
<form id="MessageSend" name="MessageSend" method="post" onsubmit="return submitForm()" action="Send_Text_Msg.php">
and it working fine
DEMO JSFIDDLE

You can't write it like this:
</td>
<input hidden id="IDConversa" name="IDConversa" value=""/>
</tr>
Any html data in table should be in td's. Or put that hidden field outside table.
You should also avoid doing onclick on divs. Make an a tag, and put it there.

Changing the size of popup.html in a google-chrome extension

I have a chrome-extension with a popup.html file that creates a form that is too big. Here is my code:
<html>
<head>
<title></title>
</head>
<body>
<table border="" cellpadding="3" cellspacing="0" id="mytable">
<tbody><tr><td>Song:</td> <td><input type="text" name="song" size="30" /> </td></tr>
<tr><td>Artist:</td> <td><input type="text" name="artist" size="30" /> </td></tr>
</tbody></table>
<input onclick="sendRequest()" type="button" name="method" value="Search" height="10"/>
<input onclick="help()" type="button" name="method" value="Help" height="10"/>
</body>
</html>
The form created by this code extends about 25 pixels lower after the buttons end. What is causing this?
EDIT: I realized that this might be caused by a minimum size issue that chrome may have. Is there a way to change the minimum size?

Interesting bug, seems like it calculates popup height incorrectly if table contains input elements (without them looks fine). You can try to file a bug report to http://crbug.com
Meanwhile adding style="float:left;" to the table seems to fix the problem.
(you are also closing body tag twice)