Input text value in url after clicking button - javascript

I would like to know how to input text value from a text field and adding it into an url after click Search button. So far I am not able to make that the value from input shows in the url. So what I have is this:
<input type="text" id="myText" value="Mickey">
<button onclick="myFunction()">Search</button>
and the javascript:
function myFunction() {
var x = document.getElementById("myText").value;
}
var sourceCode = '' + '<img src="' + imageBase + image + '" width="'+sizes[0]+'" height="'+sizes[1]+'"/>'
How can I get x value to be showing the value from the input text field?
Thanks in advance.

x does get the value of the input field, but your string build of sourceCode is riddled with errors (x is inside the double-quotes, image is undefined, etc). It also lies outside myFunction() so x is undefined too, and in any case will be executed before you click. If you comment out that line and add alert(x) inside myFunction() you can see that you do indeed capture the input, but the script fails and stops running.

try this:
function myFunction() {
var x = document.getElementById("myText").value;
var sourceCode = '' + '<img src="' + imageBase + image + '" width="'+sizes[0]+'" height="'+sizes[1]+'"/>';
}

Related

Add element works but clears input value

I have a script below that adds an element to my form, another text input field. It adds the new text input field but if I type something into the first one then add a new field it removes the input text from the first one.
I cant see where im going wrong here, im fairly new to JavaScript so please go easy :)
function addAnother() {
var id = 1;
var elemebt = document.getElementById('quest');
var number = elemebt.getElementsByTagName('*').length;
var add = number + 1;
var element = '<input type="text" name="question[]" id="quest'+ add +
'" placeholder="Example: What previous experiance do you have?" class="form-control" id="cloan"><a id="name'+
add +'" onClick="removeEle('+ add +')">Remove</a>';
document.getElementById('quest').innerHTML += element;
}
In JavaScript, the following two statements are practically identical:
str = str + ' more text ';
str += ' more text ';
The key point here is that in the end, the value of str is COMPLETELY OVERWRITTEN.
In your case, that means the innerHTML of the "quest" element is overwritten and the browser completely recreates it's children nodes, thus reseting any state and input values.
To overcome this, you can use the appendChild method but you first need to create the element to append. The easiest way to do that given you have a string of your HTML is to inject that string into a dummy element using the innerHTML property:
var target = document.getElementById('target');
var tDiv = document.createElement('div');
var htmlString = '<input type="text"></input>';
tDiv.innerHTML = htmlString;
target.appendChild(tDiv.children[0]);
<div id="target">Keep my content safe!</div>

Check value of input field regardless of type

I've seen and read this question. Didn't quite find my answer there.
I have some code that accept an html template, and uses that template inside a form.
That template will contain x number of input fields.
Is there a way to check for a value in those input fields generically?
Kinda like this:
var inputFields = element.getElementsByTagName('input');
inputFields.forEach(function (element) {
var value = element.value;
// ... something
});
I know that won't work, but you get the idea.
I think I have to write special cases for different input types, but i thought I'd ask if anyone have any experience with this problem.
This is done in pure JavaScript, so I don't really need jQuery. Unless you have a really neat way to do it in jQyery, compared to just plain JavaScript.
EDIT: I need to check if any input has been entered into the field, whether it is a file or text. I need to remove the name attribute on those who have no value.
Using the following, I can't see that you need any special handling for different types. You can just read the value property:
<script>
var t = '<table>';
var inputTypes = ('hidden text tel url email password datetime date month week' +
' time number range color checkbox radio file submit image' +
' reset button').split(' ');
var type;
for (var i=0, iLen=inputTypes.length; i<iLen; i++) {
type = inputTypes[i];
value = type == 'number'? 10 : 'input type ' + type;
t += '<tr><td>' + type + '<td><input type="' + type +
'" name="' + type + 'Input" value="' + value + '">';
}
document.write(t + '<\/table>');
</script>
<button onclick="getValues(document.getElementsByTagName('input'))">Get values</button>
<script>
function getValues(inputs) {
var input;
for (var i=0, iLen=inputs.length; i<iLen; i++) {
input = inputs[i];
console.log(input.name + ': ' + input.value);
}
}
</script>
You may want to check that checkboxes and radios are checked. For that, getting the value can be:
if (input.type in {radio:'', checkbox:''}) {
if (input.checked) {
// get value
}
} else {
// get value
}

How to retrieve value from dynamically created textbox by javascript using Vb

I am using javascript code to add dynamic text box and it is work.
But there are problem when I wish to get the value that enter in the dynamic created textbox in Vb.
I tried to put runat="server" in the DIV that I use to add textbox, but the add function cannot work after I put runat="server" in the DIV.
Anyone know how to retrieve value from the textbox that are dynamically added by javascript by using Vb?
Below is my javascript code use to add textbox.
var x = InputsWrapper.length;
var FieldCount = 1;
$(AddButton).click(function(e) //on add input button click
{
if (x < MaxInputs) {
FieldCount++;
var setID = ("field_1" + FieldCount);
$(InputsWrapper).append('<div><input id="' + setID + '" type="text" placeholder="Item title..."/>×</div>');
x++;
}
return false;
});
<
I modify the textbox by adding name="txtDy" and using Request.Form in Vb.net to retrieve the value.
Vb will automatic save the value of all "txtDy" textbox and split it by default symbol, something like ("123,abc,456,def").
So I split the string and using for loop to get the value of each textbox.
Dim txtDyList As String = Request.Form("txtDy")
Dim txtDynamic() As String = txtDyList.Split(",")
For i As Integer = 0 To txtDynamic.Length - 1
MsgBox(txtDynamic(i)) 'I can get the value from here: txtDynamic(i)
Next

Getting value after added input box

i use a javascript to add a input box in my table as below:
var inputtopik = "topik" + 1;
$("#titleinput tbody").append("<tr><td> Topik " + topikno +
" : </td><td><input type='text' id='" +
inputtopik +"' style='WIDTH:498px;' ></td></tr>");
and then try to get the value by this
var topik = document.getElementById('inputtopik').value;
but got an error state
Uncaught TypeError: Cannot read property 'value' of null
i wonder why? maybe it cannot find the input box that ive just add? how to fix?
help :(
the value of inputtopik is "topik1". So you should do
var topik = document.getElementByID(inputtopik).value;
without the single quotes.
if you are using jQuery... one other way to get the value of input text is this:
var topik = $('#topik1').val();

javascript puts out NaN and i dont know why

Well, I got this problem with my Javascript homework. I need to make a binary translator and well Javascript does not really want me to...
It works but not really as it should... If I declare the variable with a number, it works. But if I use document.getElementById to make it some kind of interactive, then it does not want to work. It just gives NaN. I know that it means not a number, but I use the parseInt() and well it works without the document.getElementById...
So here is the code how it works:
var input = 15;
function convertdec()
{
document.getElementById("output").innerHTML
= "binary number: " + parseInt(input).toString(2);
}
The output is 1111, which is correct, BUT this is how it should also work and how I want it to be:
var input = document.getElementById("input").value;
function convertdec()
{
document.getElementById("output").innerHTML
= "binary number: " + parseInt(input).toString(2);
}
Tthe output of this should also be 1111 if you fill in 15 but it says:
binary number: NaN
If any one could help me, it would be really great!
edit
ok, so there was asked for my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Binairy Converter</title>
<link type="text/css" href="global.css" rel="stylesheet" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="main">
<input type="text" name="text" id="input" />
<input type="button" id="conbin" onclick="convertbin()" value="bin to dec" />
<p id="output" ><p>
</div>
</body>
</html>
edit
yeah i fixed the problem by doing:
var input;
function convertdec()
{
input = document.getElementById("input").value;
document.getElementById("output").innerHTML = "binary number: " + parseInt(input).toString(2);
}
but thanks for your help anyway
You're doing well to fetch the DOM elements outside the function as this DOM parsing is expensive and the DOM doesn't change, but you do need to fetch the values inside the function to get their current values, not the values on page load. Try this:
var input = document.getElementById("input");
var output = document.getElementById("output");
function convertdec()
{
output.innerHTML = "binary number: " + parseInt(input.value, 10).toString(2);
}
Also note that parseInt() parses in octal if you have a leading zero, so asking it for "08" nets you "10". Fix that by using parseInt(num, 10). I've made that mod in the above example too.
This might be an artifact of how you displayed snippets... but it looks like you're setting input to whatever the value is when the page loads... you'd probably be better off doing
function convertdec()
{
var input = document.getElementById("input").value;
document.getElementById("output").innerHTML = "binary number: " + parseInt(input).toString(2);
}
so that the value gets set when the function gets called
Without seeing this in context, here's what I suspect is occurring:
// you're getting the value from the textbox as it exists
// when the page is rendered: ""
var input = document.getElementById("input").value;
// when you call this, it operates on value ... which is always ""
function convertdec()
{
document.getElementById("output").innerHTML
= "binary number: " + parseInt(input).toString(2);
}
One subtle change should fix it:
var input = document.getElementById("input");
function convertdec()
{
document.getElementById("output").innerHTML
= "binary number: " + parseInt(input.value).toString(2);
}
Addendum: As robrich notes in his answer, using parseInt(input.value, 10) will ensure the string in the textbox is interpreted as a base-10 number.
The most likely cause of the problem is that you aren't selecting the correct element and hence the actual value in input isn't the string "15". The use of input itself as the ID is suspicious as it's a tag type and typically not an ID
Can you show us the HTML which declares input?

Categories