Looking to Add a variable inside an HTML link - javascript

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.

Related

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

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.

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.

Is it possible to use action="someFunction()" when a form is submitted?

From looking around on the web, I have not seen many examples of setting a function equal to a function. However, in the few forums I found, it appears that many say that this method is not widely supported.
To explain my question, I have a form I would like to implement this on:
<table border="0" cellpadding="2" cellspacing="5">
<th colspan="2" align="center">Check Out</th>
<form name="checkOut" method="post" onSubmit="return(validate(this))" action="checkOut()">
<tr><td>Territory Number</td><td><input type="text" name="numberOut" tabindex="1" maxlength="3" size="3" /></td>
</tr><tr><td>First Name of Publisher</td><td><input type="text" onKeyUp="showHint(this.value)" name="fName" tabindex="2" maxlength="15"/></td>
</tr><tr><td>Last Name of Publisher</td><td><input type="text" onKeyUp="showHint_l(this.value)" name="lName" tabindex="3" maxlength="15" /></td>
</tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td>
</tr><tr><td><input type="button" onClick="clearForm()" value="Reset" /></td><td><input type="submit" value="Check Out" /></td>
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</table>
More specifically, the checkOut() function will be using ajax to submit the form values to a php script that runs a few insert commands against a database (I want to use ajax to learn the technique as I'm fairly new to web-based languages. Therefore, I want to put off the use of jQuery for awhile). As of right now, I don't have an example of the function.
Naturally, that begs the question, could I simply put that function into the event handler: onSubmit = "checkOut()"? At the same time, I would leave action=""? I would assume that the entire function would execute the php script and do exactly what I want without having a separate action script.
Any feedback would be appreciated.
Use <input type="button" /> (or an anchor, or a button, or whatever) instead of <input type="submit" />. On the click event of the button, execute:
if(validate(document.getElementById("formId"))){
// post the form w/ AJAX
checkOut();
}
Keep in mind that any script-based solution should probably have a non-script option. In this case, it could be as easy as putting an <input type="submit" /> inside noscript tags.
Incidentally, your markup is invalid. A form can't appear as a direct child of a table.
You could make it the action="javascript:checkOut();" but it would almost certainly be better to put it in the onSubmit handler.
use this code is the best way to do that
<input type="submit" id="submit_button">
and javascript code like this
var submit = getElementById('submit_button');
submit.preventDefault();
submit.addEventListener('click', checkOut);
in first line we specific the button and next we prevent to do the default action and next we add a listener for when button clicked
I typically use:
<input type="button" value="Submit" onclick="myFunction();">
And then my function would use the native submit function at the bottom if everything checks out.:
if (isSuccess)
theForm.submit();
else
return false;

Focusing a textbox using javascript in a google-chrome extension

How do you focus a textbox in a google-chrome extension? I have tried this javascript:
<script type="text/javascript">
function setFocus()
{
document.getElementById("Target").focus();
}
</script>
</head>
<body onload="setFocus()">
<div style="float:left">
<table cellpadding="3" cellspacing="0" id="mytable" style="float:left;">
<tbody><tr><td>Target:</td> <td><input type="text" name="Target" size="25" value="" /></td></tr>
</tbody></table>
I found this code on multiple code forum websites, so I am not sure if the javascript is not working or if chrome prevents it from running.
You're using getElementById(), but in your example Target is the name attribute, not the ID.
Add id="Target", like this:
<input type="text" id="Target" name="Target" size="25" value="" />
The reason the code you gave doesn't work is because your input doesn't have an ID of "target", it only has a name. Add the correct ID and it will work.
you want to get an element by ID, when you don't have one. You must add id="Target" to the input.

Categories