Getting a variable from form entry to add to a link? - javascript

I'm trying to obtain an input class=input type=text to add to a link not related to the page's address. The resulting link+text-entry will be displayed in an iframe.
I tried the following (which I found on here):
function GET_IT() {
var link = document.getElementById("LINKHERE");
var hrefOrig = link.href;
var dd = document.getElementById("TEXT_ID");
dd.onchange = function(){ link.href = hrefOrig + dd.value; }
}
window.attachEvent("load", init, false);
with:
<form target="IFRAME" method="get">
<input class"input" type="text" size="25" id="TEXT_ID">
<input type="submit" value "Go" onClick="javascript: function('GET_IT');">
</form>
All it did was loop back the page that everything was entered into, in the iFrame...

Your JavaScript function should look something like this:
function GET_IT() {
var link = document.getElementById("LINKHERE");
var hrefOrig = link.href;
var dd = document.getElementById("TEXT_ID");
//Change the source of the iFrame with the new HREF...
document.getElementById('IFRAME ID').src = hrefOrig + dd.value;
}
This is the best answer I can give you without seeing more code. Check out this link for a more complete example that might help you:
Changing iframe src with Javascript
Fiddler Example:
http://jsfiddle.net/VkSRY/1/

Related

form input reload page with appended url

I have the following form posted on a wordpress page.
I´d like to catch users without referrers to set the referrer on their own (that referrer part is all handled by a plugin... does not matter here).
The registration form Url is like:
http://myurl.com/register/
The code below just works fine. Inserted directly into the wp page editor (text).
Except it creates a Url like follows:
http://myurl.com/register/?id=testinput
How do i get the resulting Url to be formatted this way?:
http://myurl.com/register/sp/testinput
<h3>Your ID</h3>
<p>Please input your ID</p>
<form id = "submit_id_form" onsubmit="myIDFunction()">
<input type="text" name="id">
<input type="submit" value="Confirm">
</form>
<?php
function myIDFunction(){
var action_src = "http://myurl.com/register/" + document.getElementsByName("id")[0].value;
var submit_id_form = document.getElementById('submit_id_form');
submit_id_form.action = action_src ;
} ?>
</script>
This is the original form code (reference below) i`m trying to modify:
<form id = "your_form" onsubmit="yourFunction()">
<input type="text" name="keywords">
<input type="submit" value="Search">
function yourFunction(){
var action_src = "http://localhost/test/" +
document.getElementsByName("keywords")[0].value;
var your_form = document.getElementById('your_form');
your_form.action = action_src ;
}
</script>
I tried to append the /sp/ part and remove the appended question mark "?" in the code above.. but i´m totally stuck with coding. (I´m a "clicker" not a coder so to speak)
Thank you very much guys and gals :)
Original Code is from here
You have to return true from method called on onsubmit as
function yourFunction(){
var action_src = "http://localhost/test/" + document.getElementsByName("keywords")[0].value;
var your_form = document.getElementById('your_form');
your_form.action = action_src ;
return true;
}

How to put Parameter only with Javascript through URL in the website

I am using the software rimacon.
And i am using this URL: http://www.jabra.com.de/Support/warranty-checker
I want to send the Value of the serial number from Javascript (rimacon) into this input of this website: (see picture)
In this website, i click the mouse on the right and click "inspect Element/ Element Untersuchen". I get this HTML-Code:
<input type="text" class="serial-number">
i would like to change this into:
<input type="text" class="serial-number" value="xXx">
then i write URL like:
http://www.jabra.com.de/Support/warranty-checker/?xXx="0QYG06DF3FA"
or i would like to change this CODE into:
<input type="text" class="serial-number" name="PUT-Serial-number">
then i write URL like:
http://www.jabra.com.de/Support/warranty-checker/?PUT-Serial-number="0QYG06DF3FA"
i tried some Code with setAttribute or createAttribute and so on to get this fixed:
for example:
//var x = document.getElementsByClassName("serial-number").href="http://www.jabra.com.de/Support/warranty-checker";
var x = document.querySelectorAll("input.serial-number[href^='http://www.jabra.com.de/Support/warranty-checker']");
var y = x.innerHTML = "value="+seriennummer;
alert("y: "+y);
alert("Länge : "+y.length);
//var attr = document.createAttribute("Value");
//attr.value=seriennummer;
//var attr = x.setAttribute("Value",seriennummer);
//alert("attr: "+attr.value);
// this shall open window and show the serialnumber in this websites
url = escape("http://www.jabra.com.de/Support/warranty-checker");
var hpwindow = window.open("http://xxx:8081/sprungxbrett.php?TARGET="+url);
hpwindow.focus();
This Code is in function of onclick().
Please I need your Help! Is there some way to get fixed this JS-Code!
Because in "Inspect element/Element Untersuchen", you can add Attribute Value into this
<input type="text" class="serial-number" value="0QYG06DF3FA">
then this serial number truly display in the input this website.
Thank you very much.
this should solve getting the URL params as JSON format (wont show anything here, try any test file with url params, ex: test.html?this=that&that=this)
<p id="result"> result: </p>
<script>
function getUrlVars() {
var map = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
map[key] = value;
});
//get your values as JSON, one of the following
console.log(map);
document.getElementById("result").innerHTML += JSON.stringify(map);
return map;
}
getUrlVars()
</script>

jQuery/Javascript - Get value of text input field, and display in div

I am testing getting a text input, and printing the result in a div below. However, I can't see to get it to work.
If the "placeholder" of the input field to a "value", it inexplicably works. I may just be tired, and missing something obvious, but I can't for the life of me work out what's wrong.
//Tested and didn't work
//var URL = document.getElementById("download")[0].value;
//var URL = document.getElementsByName("download")[0].value;
var URL = $('#download').val();
function downloadURL() {
//Print to div
document.getElementById("output").innerHTML = URL;
//Test, just in case innerHTML wasn't working
alert(URL);
}
<p><input type="text" name="download" id="download" placeholder="Download URL"></p>
<button onclick="downloadURL()">Test</button>
<div id="output"></div>
Just a small change, you have to get value when you click on button, so first save a reference to that field and then get value when required
var URL = $('#download');
function downloadURL(){
//Print to div
document.getElementById("output").innerHTML = URL.val();
// alert(URL.val());
}
If you want to go jQuery...
var URL = $('#download');
function downloadURL() {
$("#output").html(URL.val());
}
... or plain JavaScript
var URL = document.getElementById("download") ;
function downloadURL() {
document.getElementById("output").innerHTML = URL.value;
}
I'd recommend you to stick with jQuery. Let jQuery behave in an unobtrusive way instead of relying on an inline event handler attached to the button.
<p> <input type="text" name="download" id="download" placeholder="Download URL"></p>
<button>Test</button> //remove the inline click handler
<div id="output"></div>
$('button').on('click', function() {
var url = $('#download').val();
$('#output').text(url); //or append(), or html(). See the documentation for further information
});
Minor modifications on your code so that it can be aligned to "Unobtrusive Javascript".
HTML
<p>
<input type="text" name="download" id="download" placeholder="Download URL">
</p>
<button id="btnDownloadUrl">Test</button>
<div id="output"></div>
jQuery
$(function(){
$("#btnDownloadUrl").bind("click", function(){
var downloadUrl = $("#download").val();
$("#output").html(downloadUrl);
});
});

Redirect to a page using a button

this is my code
JS :
function addterm(){
var f=document.form;
f.method="post";
f.action='admin_addterm.jsp';
f.submit();
}
HTML :
<label>Add Terms:</label><input type="text" name="term" id="term" >
<input type="button" name="term_b" id="term_b" value ="Add" onclick="addterm();"/>
When I press the button it is supposed to go to another page which populates the database.
The above action doesnt redirect to the other page.Is something wrong with the code.I had used the same code previously but with a parameter(id) passed within the function addterm().
it's document.forms[N]
where N is the number of form you are trying to access
Please test with few online url , i thinks i have find issue in url path .
f.action='http://google.com/';
Try this, i also tested it
<script language="javascript">
function addterm() {
var f = document.forms[0];
f.method = "post";
f.action = 'admin_addterm.jsp';
f.submit();
}
</script>
Try this way :
function addterm(){
var f=document.forms[0];
// or var f=document.forms['your_form_name'];
f.method="post";
f.action='admin_addterm.jsp';
f.submit();
}

Get the original url in this case with jquery

In the form below, I change the action attribute and submit the form. That works fine. What goes on is: if the current location is http://localhost/search/?mod=all and the search term is 14, the action will be changed to http://localhost/search/?mod=all&handle=14 and so will the url in the browser.
But the next time I try to search, since the url now is http://localhost/search/?mod=all&handle=14, I get http://localhost/search/?mod=all&handle=14&handle=15. It'll keep going on and on with each search term.
Any idea how I can retain the orginal url http://localhost/search/?mod=all through this all.
Here's the form:
<form method="GET" class="modForm" action="">
<input type="text" placeholder="Search" class="modSearchValue">
<input type="radio" name="text" value="text" class="text" title="Search">
</form>
Here's the jquery:
$('.modForm').submit(function(event) {
var $this = $(this);
var query = $this.find('.modSearchValue').val(); // Use val() instead of attr('value').
var locale = window.location;
if ($('.text').is(':checked')) {
query = '&text=' + query;
} else {
query = '&handle=' + query;
}
route = locale + query;
console.log(route);
if (query.length >= 1) {
// Use URI encoding
var newAction = (route);
console.log(newAction); // DEBUG
// Change action attribute
$this.attr('action', newAction);
//event.preventDefault();
} else {
console.log('Invalid search terms'); // DEBUG
// Do not submit the form
event.preventDefault();
}
});
There are few ways to do it. I would rather not mess with window.location and do something simpler:
<form method="GET" class="modForm" action="">
<input type="hidden" name="mod" value="all"> <!-- mod is a hidden variable -->
<input type="text" id="modSearchValue"> <!-- name not defined yet -->
<input type="checkbox" id="textOrHandle"> <!-- name not required -->
</form>
$(".modForm").submit(function() {
$("#modSearchValue").attr("name", $("#textOrHandle").is(":checked") ? "text" : "handle");
// let the form submit!
});
You have multiple ways to do it. Why can't you store original URL in a global variable (kept outside your functions like form submit etc.)
If you do not want that you can use window.location.hash which will return all the GET params you are sending. Using split you will be able to get exact parameter that you want. If you still need help, I will post the code.
Quickest solution: If, for this code, window.location should always be http://localhost/search/?mod=all, then you don't even need to say var locale = window.location. Just say var locale = "http://localhost/search/?mod=all" and you avoid the problem.
​var s = window.location.hostname; // gets the hostname
var d = window.location.protocol; // gets the protocol
var g = window.location.search; // gets all the params
var x = g.split("&"); // split each parameter
var url = d+"//"+s+x[0]; // makes url you want
alert(url);​​​​ // just for chill

Categories

Resources