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;"

Making HTML elements editable after a click of a button and save on the database

I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:
<div class='wrapper'>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table>
<tbody>
<tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
<tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
<tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9#gmail.com</p></td>
</tbody>
</table>
<button>Change</button>
</div>
I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it

You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.
$('#edit').click(function(){
$('#form').toggleClass('view');
$('input').each(function(){
var inp = $(this);
if (inp.attr('readonly')) {
inp.removeAttr('readonly');
}
else {
inp.attr('readonly', 'readonly');
}
});
});
.view input {
border:0;
background:0;
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table id="form" class="view">
<tbody>
<tr>
<td>
<p class='leftspacing'>Cellphone Numbers</p>
</td>
<td>
<p><input type="text" value="072 215 3372" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>Phone Numbers</p>
</td>
<td>
<p><input type="text" value="011 310 9967" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>email address</p>
</td>
<td>
<p><input type="email" value="s.nyama9#gmail.com" readonly/></p>
</td>
</tr>
</tbody>
</table>
<button id="edit">Change</button>

There are a number of different ways you can do this, but the "classical" way would be to put the values in <input/> tags with IDs that are styled to be transparent. Wrap the whole table in a form, then use JavaScript when the user clicks the button to remove a disabled property from each of the input fields and change the button label. The second click of the button would then be validation and/or a form submit. The easiest way to keep track of which is the first and second click would be to compare text, but you might want to just set a variable on the element instead. Try here for a good starting point on pure-Javascript form submission or here for JQuery. This is a Stack-Overflow question about making input fields transparent.

ng-disabled behaving strangely

I'm running into an odd issue while trying to set ng-disabled on my 'Save' button in the code below. I want my input field to be required and to be a non-negative number. This code works great as structured, but when I remove that second form below my table ng-disabled no longer works. Why does ng-disabled depend on this completely unnecessary additional form which I purely added for temporary testing purposes?
<div>
<table>
<tr>
<td><p>Limit</p></td>
<td><p>1,000,000</p></td>
<form class="form-inline" name="form">
<td>
<div class="form-group">
<input type="text" ng-pattern="/^[0-9][0-9]*$/" class="form-control" ng-if="limit.saveAllowed" ng-model="limit.user.points"
ng-required="true"></input>
</div>
<p ng-if="!limit.saveAllowed">{{limit.user.points}}</p>
</td>
<td ng-if="limit.saveAllowed">
<div class="form-group">
<button class="btn btn-success" type="submit" ng-click='limit.setLimit(limit.user.points)' ng-disabled="form.$invalid">Save</button>
</div>
</td>
</form>
</tr>
</table>
<form class="form-inline" name="form">
<input type="text" ng-model="limit.user.points"
ng-required="true"></input>
</form>
</div>
Note: I am using the controllerAs syntax so limit refers to my controller. Further, this HTML all resides within a custom directive's template. I don't know if that additional info is helpful, but I'm stumped.

Forms can not be nested directly inside a <tr>(see this).
Simply wrap the form with a <td> (or just move it outside the <table>) and things should work.

Enabling a submit button after submitting

I am opening up a new page when the user clicks submit. It would be a common occurrence for the user to come back to the original page to select something else from the drop down and need to "submit" again. Now the problem is that my js function disables the submit button, and the user would have to reload the page. The js is a standard thing, so unfortunately, I cant change that, but I was wondering if there was a way to reenable it in HTML or in a separate script, here is my relevant code:
<form name="verification_form" action="CreateVerification" target="_blank" onSubmit="return submitForm(this, 0, this.length-2, SUBMIT)" method="post">
<table width="75%" border="0" cellspacing="0" align="center">
<tr>
<tr>
<td>Stuff<input type="HIDDEN"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td width="33%">
<div align="center">
<select name="stuff" id="stuff" class="R">
<option value=" "> </option>
<option value="<% =stuff %>"> <% =stuff %> </option>
</select>
<td><div class="submit">
<input type="submit" name="SUBMIT" value="SUBMIT">
</div></td>
</tr>
</table>
Any help would be appreciated, and let me know if there are any questions.

You can remove the disabled option using jquery like this:
$("input[type=submit]").removeAttr("disabled");
The issue would be when exactly in your code do you want to enable the submit button. You will probably want to wire it to the onchange event on your dropdown list.
$('#dropdownlist').change(function(){
//Validate your form here maybe:
if(validated) $("input[type=submit]").removeAttr("disabled");
});

Check if your submit button is disabled. Enable it in that case.
With jQuery this will be the approach:
if($("#submit-button").is(":disabled")) {
$("#submit-button").removeAttr("disabled");
}
Hope it helped

You could put a button somewhere (in the original page or in the popup) that says "select another item" and runs some javascript to re-enable the button with :
var submitButton = ... (find the submit button)
submitButton.enabled=true