How to Add javascript variable inside html attribute - javascript

I have a form and I want to add javascript variable inside the value="". value="embedurl"
I am new to adding javascript variable inside html, so far, all of the solutions that i found on google is not working. How to do this? Thanks.
<form id="landing2" action="https://example.com/post10/" method="post">
<input type="hidden" name="name" value=" var embedurl ">
<input type="submit">
</form>
<script>
var embedurl ="https://" + document.location.host + "/embed" + window.location.pathname;
document.getElementById('landing2').submit();
</script>

Try this ,
var embedurl ="https://" + document.location.host + "/embed" + window.location.pathname;
document.getElementsByName("name")[0].value = embedurl; // here you need to set the input value
document.getElementById('landing2').submit();

If you want to add a javascript value, you must do it by javascript.
First, you need to get the dom input element, then set the value
var form = document.getElementById("landing2");
var input = form["name"];
input.value = embedurl;

Related

User input to build URL

I have a bit of experience with HTML but am very new to JavaScript. In essence, I would like for a user input to be part of a URL. For example, we could have something simple such as:
<script>
function get_cityname() {
var cityname = document.getElementById("cn").value;
alert(cityname);
}
</script>
<form>
Enter city name:
<input type = "text" size = "12" id = "cn">
<input type = "submit" onclick = "get_cityname();">
</form>
This will create a textbox where a user inputs their text (city name) and then click the 'submit' button next to it, and an alert should pop up based on the information they provided, just to make sure this works. However, this code only would seem to work (because of the 'onclick' command) to work for one user input. Therefore, I have 2 questions:
How could the above variable be included in a URL string? If it were something simple as:
URLstring = "https://sampleurl" + cityname + "moretext.html"
How could this be expanded if I want to include two or possibly even n number of inputs? For example, if I create more user prompt boxes and want to have the user also be able to input their zipcode, or state abbreviation, for example:
URLstring = "https://sampleurl" + cityname + "moretext" + zipcode + "moretext" + "stateabbreviation.html"
You could do something along these lines (it would be the same for one or more fields):
// Ensures the DOM (html) is loaded before trying to use the elements
window.addEventListener('DOMContentLoaded', function() {
var cnInput = document.getElementById("cn"),
zipInput = document.getElementById("zip"),
form = document.getElementById("myForm");
form.addEventListener('submit', getUrl); // On submit btn click, or pressing Enter
function getUrl(e) {
var cityname = cnInput.value,
zipcode = zipInput.value,
url = "https://sample.com/" + cityname + "/" + zipcode + ".html";
alert(url);
e.preventDefault(); // Prevent the form from redirecting?
}
});
<form id="myForm">
<label>Enter city name: <input type="text" size="12" id="cn"></label>
<label>Enter zip code: <input type="text" size="12" id="zip"></label>
<input type="submit">
</form>
First specify an action attribute for your form. This is where your form will be submitted. Then set your form's method attribute to GET. Finally, add as many fields as you like (I am assuming you are after a GET query such as https:url.com?key1=val1&key2=val2...):
<form method="GET" action="https://sampleurl">
Enter city name:
<input type="text" size="12" id="cn">
Enter zip code:
<input type="text" pattern="[0-9]{5}"
<input type="submit" ">
</form>

HTML Text Input Value not changing in Backend JavaScript

I am new to web development . I have a question I am trying to build a website that takes input on the front end from the HTML page and actively changes the value on the backend javascript file . The functions I have on the backend rely on the front end input . The input never changes it just stays the default value "google.com". For Reference here is some code of what I am trying to accomplish .
HTML WebPage
<input type="text" id="input" value="google.com" placeholder="somewebsite.com">
Backend JavaScript File
var ajaxWebSiteValue = document.getElementById("input");
function getURL(){
var URL = "http://" + ajaxWebSiteValue.value ;
return URL;
}
It not clear what exactly you want to achieve here because heading, description and code snippet looks contradictory to each other.
1.If you are changing the input value on UI but not getting updated value in backend then use
function getURL(){
var ajaxWebSiteValue = document.getElementById("input");
var URL = "http://" + ajaxWebSiteValue.value ;
return URL;
}
2.If you want to change the value of input from backend.
function getURL(){
var ajaxWebSiteValue = document.getElementById("input");
ajaxWebSiteValue.value = "http://" + ajaxWebSiteValue.value ;
}
Also make sure that you are calling getURL() function from somewhere.
is that is what you want to achive??
var ajaxWebSiteValue;
function myFunction(){
ajaxWebSiteValue = document.getElementById('input').value;
document.getElementById("ajaxWebSiteValue").innerText = ajaxWebSiteValue;
document.getElementById("returnedURL").innerText = getURL();
}
function getURL(){
var URL = "http://" + ajaxWebSiteValue;
return URL;
}
<input type="text" id="input" value="google.com" placeholder="somewebsite.com" />
<p id="ajaxWebSiteValue"></p>
<p id="returnedURL"></p>
<button id="change" onclick="myFunction()">change</button>

Add variable to attribute

I need to attribute action url to be composed of "url" + variable.
Like this:
<script>
var domain = "#example.com";
</script>
<body>
<form action=("https://login.example.com/&" + domain) id="login_form" method="get">
<input type="text" name="username">
<button type="submit" id="submit">Log in</button>
</form>
I need to make label with lastname and send the label as lastname#example.com by this form.
You can try this
<script>
var domain = "#camosoft.cz";
var url = "https://login.szn.cz//?returnURL=https://email.seznam.cz/&serviceId=email&" + domain
document.getElementsById("login_form").setAttribute("action", url);
</script>
<body>
<form action="" id="login_form" method="get">
Get the form element using document.querySelector. Using setAttribute add the variable to the action attribute and give it to the form
var domain = "#camosoft.cz";
var a=document.querySelector('form').getAttribute('action');
document.querySelector('form').setAttribute('action',a+domain);
<body>
<form action="https://login.szn.cz//?returnURL=https://email.seznam.cz/&serviceId=email&" + domain id="login_form" method="get">d</form>
You have to concatenate the string and then set the final value via JavaScript, not inline in HTML.
Also, place your script element just before the closing body tag (</body>) so that by the time the parser reaches it, all the HTML will have been parsed into memory.
Lastly, the parenthesis in your HTML around your attribute value is incorrect.
<body>
<form action="https://login.szn.cz//?returnURL=https://email.seznam.cz/&serviceId=email&" id="login_form" method="get">
</form>
<script>
var domain = "#camosoft.cz";
// concatenate the domain on to the end of the current action:
document.querySelector("form").action += domain;
console.log(document.querySelector("form").action); // <-- Verify results
</script>
</body>
You can set the form action dynamically with the help of Javascript after page load.
Example:
var frm = document.getElementById('login_form');
var domain = "#camosoft.cz";
var action = "https://login.szn.cz//?returnURL=https://email.seznam.cz/&serviceId=email&" + domain
if(frm) {
frm.action = action;
}

Pass js variable to form action url

I'm not sure if this is possible, or if I am doing it the wrong way?
I have a form that when submitted, should send the user to a URL depending on the input.
e.g If the users inputs '2', the URL should be books/itemView?id=2
I have created a var = id, which takes the search input box data. Is it possible to add this variable to my current form action? Perhaps there is a more efficient way?
My current code is as follows;
<form id="search" action="<?php echo URL; ?>books/itemView?id=" method="post">
<input type="text" name="search" id="demo"/>
<input type="submit" value="Submit">
</form>
My JS
$(document).ready(function(){
var id = $('#search').val();
});
Quite new to JS so any help appreciated.
JS should be
$('#search').on('submit', function() {
var id = $('#demo').val();
var formAction = $('#search').attr('action');
$('#search').attr('action', formAction + id);
});
If they enter 2 in the search input then your id will be appended to your url like:
url?search=2
So maybe you want to change the name of your search input to id or add another input field.
<form id="search" action="<?php echo URL; ?>books/itemView" method="post">
<input type="text" name="id" id="demo"/>
<input type="submit" value="Submit">
</form>
That should be all you need no jquery or javascript necessary.
When you submit it should result in:
books/itemView?id=2(or whatever is in the search/id input when you click submit)
Hmm, you can try with that:
$(document).ready(function(){
var $form = $('#search');
var id = $form.val();
var $search = $('#demo');
var originalAction = $search.attr('action');
$form.on('submit', function() {
$search.attr('action', originalAction + id);
});
});
Before submitting the form, jQuery's on('submit', handler) function executes the code in handler modifying the attribute action that you want.
originalAction variable stores the content of the action attribute that was partially generated in php, then you append your id dynamically created with js.

Can I exclude a input field from form.reload?

I've got a form.reload piece of JS that adds the chosen form dropdown to a variable, and to the head of the document so I can pass variables to the next page.
Sadly, my form reload is removing input fields that have been inputted.
Here's my simple JS reloading the form:
function reload(form) {
var val=form.cat.value;
var val2=form.cat2.value;
var val3=form.val3.value;
var val4=form.val4.value;
var val5=form.val5.value;
self.location='mypage.php?val=' + val + '&val1=' + val2 + '&val2=' + val3 + '&val4=' + val4 + '&val5=' + val5;
}
My call:
<select name='val' onchange=\"reload(this.form)\">
It's removing (reloading) my inputs. Is there a way around this?
I want to keep the form input when reloading the form.
You could try something like this in your php file
<input type='text' name='cat' value='<?php print $_REQUEST[val]; ?>'>
an alternate suggestion to add all the values to the header is this
function reload(form) {
self.location='mypage.php?' + $(form).serialize();
}

Categories