We Keep Coding

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.

Javascript event redirecting to another page instead of displaying result in same page

In this piece of code there is a search bar, when I am searching something it will narrow down my search. I am using onkeyup event which call javascript function to search the required data, but after entering some text in search bar when i press enter it is redirecting to the home page instead of display the results.
CODE
<apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors">
<apex:param name="Name" value="" />
</apex:actionFunction>
<table cellpadding="2" cellspacing="2">
<tr>
<!-- style="font-weight:bold;">Defect Name<br/> -->
<td>
<input type="text" id="Name" onkeyup="doSearch();" /> </td>
</tr>
</table>
Any help would be appreciated.

I think the form is submitted on Enter button press.
If you have <apex:form tag then try putting onsubmit="return false;" there.
<apex:form onsubmit="return false;"

What does %%SOMETEXT%% Mean in PHP form

Today, I came to a PHP form using some variable/constant names or something else(I really don't know) in the following manner
<tr>
<td align="left">Email Address<br>
<input name="email" type="text" class="cartform" value="%%EMAIL%%" size="25">
%%EMAILREQUIRED%%
</td>
</tr>
<tr>
<td align="left">First Name<br>
<input name="firstname" type="text" class="cartform" value="%%FIRSTNAME%%" size="25" onchange="setshipping()">
%%FIRSTNAMEREQUIRED%%
</td>
</tr>
Can anyone please explain the meaning of
value="%%EMAIL%%"
it displays the previously added email if the session is set, i.e it behaves like we are assigning the value of a variable in value attribute, but where I can find that where this variable/constant is declared/defined ?
Thanks in advance.

how can I see the url output of submitted form?

there is a website and I want to create the link address that can automate the login process.
from the login page source code, I understood that it will submit the id, passwd values with post method in form.
but I want to know the entire 'url' address which this form submission leads to. I mean, eventually it will pass on the id, passwd values like in 'somewebpage?id=someid&passwd=somepw' right? (of course it will be processed with encodeURIComponent by the form)
this parameter included url address is what I'm looking for because I think if I know this, then I can automate the login process.
However, this address is not explicitly shown(not even for a brief moment). Is there a trick to somehow 'alert()' this url address or view it through chrome developer tools or something?
here's the login page example by the way:
<form id="login" name="login" class="login" method="post"
action="" enctype="application/x-www-form-urlencoded"
style="background-image: url(../main/image/index.gif)">
<input type="hidden" name="url" value="../main/index.cgi" />
<table class="login-form">
<tr>
<td>
<table>
<tr>
<td class="label"><label for="login_id">ID</label></td>
<td class="input">
<input type="text" id="login_id" name="id" value="" onclick="select();" maxlength="8"/>
</td>
</tr>
<tr>
<td class="label"><label for="login_passwd">Passwd</label></td>
<td class="input">
<input type="password" id="login_passwd" name="passwd" value="" onclick="select();" maxlength="8"/>
</td>
</tr>
</table>
</td>
<td>
<input type="submit" id="login_submit" value="Go" />
</td>
</tr>
<tr>
</tr>
</table>
</form>

You should be able to see the POST url in firebug net panel.

Form action attribute defines where the form will be submitted.
<form action="demo_form.asp" method="get">
The current form you have will submit to it self, meaning the current url the form is now on.
You can see the page properties from chrome developer tools network tab.

When there is no url in action the page, the form will post to itself. So all you would need to do is post the username and password to this page using the name of the input. On the server side, the username and password will be checked against the DB. To automate the post process look at the function here: https://stackoverflow.com/a/133997/3402205

Save user input in Array

I am a true beginner in html/js/jquery.
I am trying to save user input into an array, then later I want to write all that information from that array into an xml file.
My Problem is that my form consists of multiple Jobs which will all have the same input fields.
This is a short example of the first job:
<form>
<table class="wrapper">
<tr>
<td style="text-align: left">First Digit:
<div> <input id="fDigit" type="text" name="Job1[]" /></td>
<td style="text-align: left">System:
<div> <input id="system" type="text" name="Job1[]" /></td>
<td style="text-align: left">SAP Modul:
<div> <input id="sapModul" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Country:
<div> <input id="country" type="text" name="Job1[]" /></td>
<td style="text-align: left">Duration:
<div> <input id="duration" type="text" name="Job1[]" /></td>
<td style="text-align: left">Step Number:
<div> <input id="stepNumber" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Optional Text:
<div>
<textarea align ="left" id ="optionalText" name="Job1[]" cols="20" rows="2"> </textarea>
</div>
</td>
</tr>
</table>
</form>
I have many more of those in my Script.
What I want to do now is saving the Information of every Job into an Array, meaning Job1[]: with the user input of every field which is shown above , Job2[]: different user input but similar input field with the same name.
There might be an easier solution to do this but I just can't figure one out.
Sorry if this is a too stupid issue but i tried to find solutions for ages and could not find one which helped me out.
Thanks in advance!

For a beginner, the easiest solution might be to use a component that does form serialization for you. Your form should have a name (attribute), and an id is probably going to be useful too.
I've found form2js to be very practical, and it can manage collecting similarly named fields into an array.
I also made a small fiddle that shows one way to collect the info yourself, for example like this.
var job1 = [];
$('[name="Job1[]"]').each(function(index, inputField) {
job1.push($(inputField).val());
});
console.log(job1);

you don't need to use multiple array names because the javascript is client side
just use Job1[]

I suggest you organize your data as a JSON object, for example
[{"Country": a, jobs:[your array]},{"Country":b, jobs:[your array]}]
and to insert a value to array, you can use: your_array.push(value)
Hope this help.

You can use a two dimensional array in your inputs name with the first index being the row index and the second the column name, something like Jobs[0][Country]. Then in the end you will have all your data in one array.
Also, if you're repeating the markup you posted for every job, avoid using id attributes on your inputs as this would produce invalid markup. Id attributes must be unique in a HTML page, use classes instead.