Add variable to attribute - javascript

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

Related

How to Add javascript variable inside html attribute

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;

JavaScript issue passing value across pages

I have this JavaScript code that processes and displays the value onto the same page; the value is entered using a textbox. I want to pass this value onto another page. this my code:
index.html:
<form action="display.html" method="post" id="name-form">
<p>
<label>Your full Name</label>:<br />
<input type="text" name="fullName">
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<!-- <p id="result"></p>-->
<script>
var form = document.getElementById('name-form');
form.onsubmit = function (e) {
e.preventDefault();
var result = document.getElementById('result');
result.innerHTML = 'Hi ' + form.fullName.value;
console.log(form.fullName.value);
this.reset();
};
</script>
display.html
<p id="result"></p>
<script>
var form = document.getElementById('name-form');
form.onsubmit = function (e) {
e.preventDefault();
var result = document.getElementById('result');
result.innerHTML = 'Hi ' + form.fullName.value;
console.log(form.fullName.value);
this.reset();
};
</script>
my question is how do I get the value that is entered into the textbox to display onto another page?
If you have a static website, you should consider storing that value in localStorage. So that value will be available all across your web pages.
And if you have a dynamic website you can store that value in db and then request db for that value when you're on some other page.
Choose anyone of the approaches that fits in your case and application.
Read here about localStorage
Use cookies.
Save the name: document.cookie = "name=" + name
Load the name: name = document.cookie.replace(/(?:(?:^|.*;\s*)name\s*\=\s*([^;]*).*$)|^.*$/, "$1");
See here for a simpler way to load cookies

adding an input value and submitting the form on load

I have the following form:
<form action="http://example.co.uk/order" method="post" id="voucher" class="AVAST_PAM_nonloginform">
<fieldset>
<h4>Vouchers</h4>
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</fieldset>
</form>
and am using the following script:
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
}
</script>
to populate the input. I then use:
<script>
window.onload = function(){
document.forms['voucher'].submit();
}
</script>
to activate the submit.
However, use the second script, it stops the "50681" from being inputted into the text box (instead submits a blank input).
Originally I had the code as :
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
document.forms['voucher'].submit();
}
</script>
(I split it up thinking it may be a timing issue).
Any ideas?
p.s. the reason for the backslash's is due to it currently being run under php until I can get it working
The issue seems to be with (\"discount_name\").value = \"50681\"; & document.forms['voucher'].submit();
In either of the case you can avoid \ & for form you need to target by the index number. Assuming there is only one form present , so passing 0 in index
window.onload = function(){
document.getElementById("discount_name").value = "50681";
document.forms[0].submit();
}
Note: In the demo I have changed the action url to https else it will prohibit to make call from jsfiddle. In your case you can still keep http in code
DEMO USING ID

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.

Using results from a post request in a javascript variable

I have a very basic question (I'm sure) - I have an Zoho application and I'm using their REST API to recover a single result from a table.
I want to use that result in a javascript variable - the form request is here:
<form id="Latest" method="POST" action="https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
I can auto submit the form using this
<script type="text/javascript">
document.getElementById("Latest").submit();
</script>
Which recovers a the result - but I want to assign this result to a javascript variable and use it in a following piece of code (within the same frame).
I am new to this, so please be gentle! Any help appreciated.
This is easily done with jQuery:
<form id="Latest">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('#Latest').submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
var url = "https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report";
// Get some values from elements on the page:
var $form = $( this );
var authtokenData = $('#authtoken').attr('value');
var scopeData = $('#scope').attr('value');
// Send the data using post
var posting = $.post( url,
{
authtoken: authtokenData,
scope: scopeData
}
);
// Put the results in a div
posting.done(function( data ) {
// empty results div
$("#result").empty()
// write POST result to results div
$("#result").append("<p>" + data + "</p>);
});
});
</script>

Categories