I have a div
<div id="force_id"></div>
This prints an id for each product on the page. Ex: 26588
How do I assign it to a hidden input value ?
<input name="" id="deger" type="hidden" value="<div id="force_id"></div>">
Not like of course :=)
First off all I think you question ambiguous and what ever you are trying to achieve through this kind of tag might not be a good way to do. I suggest you to look for alternative ways if possible.
<input name="" id="deger" type="hidden" value="<div id="force_id"></div>">
But if you insist this can be easily done. Treat the value like any other string value you would insert inside a div but this time you will need to escape the quote character as below
$("#deger").val('<div id=\"force_id\"></div>');
Try this
$('#deger').val($('#force_id').text());
see the code snippet below
function doIt() {
$('#deger').val($('#force_id').text());
}
// Just for testing what happens
var degerEl = document.getElementById('deger');
var resultEl = document.getElementById('result');
var doItBtn = document.getElementById('doItBtn');
doItBtn.addEventListener('click', doItOnClickCallback);
setResultElValue();
function doItOnClickCallback() {
doIt();
setResultElValue();
}
function setResultElValue() {
resultEl.value = degerEl.outerHTML;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="" id="deger" type="hidden" value="">
<div id="force_id">26588</div>
<!-- Just for testing what happens -->
<button id="doItBtn">Do it</button><br/>
<textarea readonly id="result" style="font-family:monospace;width:400px"></textarea>
Related
I have this code that needs to be adapted to work with something similar to the code below the commented line. If I can make it without many changes would be perfect so that I don't need to change the CSS and so. Any help? Many thanks in advance.
<!-- The code to be adapted is this: -->
<form action="" id="search-form">
<fieldset>
<input type="text" class="text" /><input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<!-- The new code that I got from the web and that needs to be adapted to the old one
is the following: -->
<textarea id="Blah"></textarea><button onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("Blah").value;
location.replace("https://www.google.com/search?q=" + Blah + "");
}
</script>
I'm imagining you probably want something like
document.querySelector("#searchButton").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
const url = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
window.location.replace(url);
});
<fieldset>
<input type="text" class="search" id="searchBox">
<Button id="searchButton">Search</button>
</fieldset>
The id attribute on HTML elements allows you to access them via JavaScript. There's a wealth of tutorials online if you want to learn JavaScript deeply, but the basics of what this is doing is:
It finds the HTML element with the id of searchButton, and adds a click listener to it --- this gets triggered whenever that element is clicked.
In that listener, we find the value of the text input with the id of searchBox.
We compose our new URL. One thing I've added here is a call to encodeURIComponent to correctly handle the cases where they try searching for something which contains a character which isn't valid in a URL --- for example, the space character etc.
It was not working as I wanted, but a little trick made it work.
Here is my final code:
<form action="" id="search-form">
<fieldset>
<input type="text" class="search" id="searchBox">
<input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<script>
let myvar;
document.querySelector(".submit").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
myvar = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
setTimeout(callurl, 1);
return false;
});
function callurl() {
location.assign(myvar);
return false;
}
</script>
This program has 6 text fields and when a user inputs into the text fields, the text result box will concatenate the input text. I am struggling to get a button to work which will add a 7th text field and then also add the user input together. I have tried to append it but not sure where I am going wrong.
<html>
<body>
<form>
<div class="textFields">
<label for="text1">text1:</label><br>
<input type="text" class="text" name="text1"><br>
<label for="text2">text2:</label><br>
<input type="text" class="text" name="text2"><br>
<label for="text3">text3:</label><br>
<input type="text" class="text" name="text3"><br>
<label for="text4">text4:</label><br>
<input type="text" class="text" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" class="text" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" class="text" name="text6"><br>
<input type="button" name="button" value="Get"><br>
<input type="button" name="button" value="Add">
<br>
<label for="textResult">Text Result</label><br>
<input type="text" id="textResult" name="textResult"><br>
</div>
</form>
<script>
let x = document.querySelectorAll('.textFields .text');
let button = document.querySelector('.textFields input[type="button"]');
let result = document.querySelector('#textResult');
button.onclick = function() {
result.value = '';
for (i = 0; i < x.length; i++) {
result.value += x[i].value + ' ';
}
}
button.onclick = function() {
var textField = document.createElement("INPUT")
textField.setAttribute("id", id)
textField.setAttribute("name", id)
textField.classList.add("textInput")
container.appendChild(textField)
}
</script>
</body>
</html>
When you run this in a browser, the following error is reported in the console when you click the Get button:
Uncaught ReferenceError: id is not defined
at HTMLInputElement.button.onclick (test.html:53)
Ignore the error for now, you can see that the error in actually in the second function, but for Get you were probably expecting the first funtion. To fix this issue, do not assign the second function, at least not to the button you have selected.
Notice how you have named both buttons the same name, this will make them hard to target, but also you are not using that name in the querySelector. So lets change that first, give each button a unique name and use it to select each button:
<input type="button" name="getButton" value="Get"><br>
<input type="button" name="addButton" value="Add">
let getButton = document.querySelector('.textFields input[name="getButton"]');
let addButton = document.querySelector('.textFields input[name="addButton"]');
...
getButton.onclick = ...
...
addButton.onclick = ...
Now, when you click on the Get button there is no error, and it appears to function as you have described, clicking Add still raises the original error.
You have used a variable called id but you have not yet declared what that variable is yet. I would assume you probably want to make it 'textX' where x is the next number.
So add the following lines inside the button click function to declare the Id:
You need to put this logic inside the function because you need it to be re-evaluated each time the button is clicked. Other valid solutions would include incrementing the value instead or re-querying for x, but this will work.
let x = document.querySelectorAll('.textFields .text');
let id = 'text' + (x.length + 1);
Save and Run, you will see the next issue in the console:
Uncaught ReferenceError: container is not defined
at HTMLInputElement.addButton.onclick
As with id, you have not defined the variable container, here I will again assume you meant to reference the .textFields div, so following your querySelector style, we can create a variable called container:
let container = document.querySelector('.textFields');
That will start appending your text boxes to the page, but they are still not being picked up by the Get button.
Another assumption here, but you have assigned a class .textResult to the new texboxes. If instead you assigned the class .text to them, then you would almost pick them up in the selector
textField.classList.add("text");
The reason that they aren't picked up is back to where the value of x is evaluated that the Get button is using. Because it is evaluated the first time in the main script, but never re-evaluated when the button is clicked the new text boxes are not included in the array stored in x.
As with the advice above for requerying x to get the updated count, Simply fix this by moving the line to initialise x into the first function.
Overall, your page with the embedded script could not look something like this:
<html>
<body>
<form>
<div class="textFields">
<label for="text1">text1:</label><br>
<input type="text" class="text" name="text1"><br>
<label for="text2">text2:</label><br>
<input type="text" class="text" name="text2"><br>
<label for="text3">text3:</label><br>
<input type="text" class="text" name="text3"><br>
<label for="text4">text4:</label><br>
<input type="text" class="text" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" class="text" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" class="text" name="text6"><br>
<input type="button" name="getButton" value="Get"><br>
<input type="button" name="addButton" value="Add">
<br>
<label for="textResult">Text Result</label><br>
<input type="text" id="textResult" name="textResult"><br>
</div>
</form>
<script>
let getButton = document.querySelector('.textFields input[name="getButton"]');
let addButton = document.querySelector('.textFields input[name="addButton"]');
let result = document.querySelector('#textResult');
let container = document.querySelector('.textFields');
getButton.onclick = function() {
let x = document.querySelectorAll('.textFields .text');
result.value = '';
for (i = 0; i < x.length; i++) {
result.value += x[i].value + ' ';
}
}
addButton.onclick = function() {
let x = document.querySelectorAll('.textFields .text');
var textField = document.createElement("INPUT")
let id = 'text' + (x.length + 1);
textField.setAttribute("id", id)
textField.setAttribute("name", id)
textField.classList.add("text")
container.appendChild(textField)
}
</script>
</body>
</html>
Have a look at some of the guidance in this post for further simple examples: How do I add textboxes dynamically in Javascript?
in my form I have an input box of type email, like this:
<input class="form-control" id="Empresa_Email" name="Empresa_Email" type="email" maxlength = "50" placeholder="xxxx#yyyy">
If I don't put any '#' it considers that the email is not valid and sends an error messagem. Although, I want to also send an error message if i don't introduce an ending statement like ".com" or ".pt", because that's not valid either. How can i achieve this?
<input type="email"> already validates that the value doesn't contain more than one #, among other things.
The MDN docs show the actual regex browsers are supposed to use.
You've now edited the question to ask about rejecting email addresses with a lack of top-level domain, rather than multiple # symbols.
The fact is that such email addresses are totally valid.
But if you really want to ensure there is a dot in the domain part, you could add a pattern attribute with a regex like this:
<input type="email" pattern=".*#.+\..+">
If you don't want to use an email value type. You would need to use javascript to check if the text of your input has 2 or more "#" characters.
This question might help you a little bit.
detecting mistyped email addresses in javascript
It would be something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" onclick="atcounter('as#at#.com')">
</body>
<script type="text/javascript">
function atcounter(a) {
// get values
var m = a.length;
var flag=0;
for (var i = 0; i < m; i++) {
if (a[i]='#') {
flag++;
}
}
if (flag>1) {
alert('you spelled more than one "#"')
}
}
</script>
</html>
What you are looking for can be achieved through the pattern attribute using Regex only for ".com" and ".pt":
<form>
<input type="text"
pattern="[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*#[a-zA-Z]+(?:\.com|\.pt)"
required>
<input type="submit" value="Send Request">
</form>
And here is a complete pattern to validate any email :
<form>
<input type="text"
pattern="[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?"
required>
<input type="submit" value="Send Request">
</form>
`
In a simple webpage, I am trying to grab the value of an input field as it's being typed and display it simultaneously within the context of code.
So a user could past an URL into the input field and it immediately update the code displayed, so he can easily copy the update code. For example:
<input type='text' name='typedURL'>
Here is your code: copy this
I searched all over the internet and am under the impression that the best solution is using this:
<form onsubmit="return false" onkeyup="o.value = a.value">
<input name="a" id="a" type="text" step="any">
<br>
Here is your code:
<code>
</output>">Copy this code
</form>
But I can't get it to output the value PLUS the surrounding code.
You can do selecting input value (with querySelector and .value), and change attribute href in JS replacing with .value.
Here the code:
var input = document.querySelector(".valore");
var link = document.getElementById("href");
input.addEventListener("keydown", function() {
link.innerHTML = input.value;
link.href = link.innerHTML;
});
<input type="text" class="valore">
I want to have a box in HTML such as this one:
Particular thing, I need to do this using only HTML (no PHP or particular langage requiring server, or particular installation).
The reason for this is that it is meant to be used for HTML pages that will be opened from a USB key, not a website, and it has to be usable by any non-expert person. So no web-server configuration or installation required, such as what would be required for PHP, if I am right.
Think about not using a Form, but just using a Javascript function.
I'm not sure if this probably is not possible due to security reasons, but it could be a solution...
function redirect() {
var input = document.getElementById("stuff");
window.location = input.value;
}
<span>NOM:</span>
<input type="text" id="stuff"></input>
<br>
<input type="button" onclick="redirect()" value="Submit"></input>
I managed to do what I needed thanks to Anders Anderson's answer. Here is the code for those interested in doing similar thing. First, for the Javascript
function redirect() {
var answergiven = document.getElementById("answergiven");
var realanswer = document.getElementById("realanswer");
var nextpage = document.getElementById("nextpage");
if(answergiven.value.toLowerCase() == realanswer.value.toLowerCase()){
window.location = nextpage.value;
}
else{
alert('Wrong answer, please try again.');
}
return false; // prevent further bubbling of event
}
And for the HTML part, there are two hidden variables that determine the real answer, and the next page to go to, and the text field for the answer
<form name="myform" onSubmit="return redirect()">
<span>Réponse:</span>
<input type="text" id="answergiven" />
<input name="tosubmit" type="submit" value="Submit" />
<input type="hidden" id="realanswer" value="theanswer" />
<input type="hidden" id="nextpage" value="thenextpage.html" />
</form>