Filling a form field with the current URL via javascript - javascript

I'm trying to populate a hidden field in a form that I have created with the current URL of the page including all the UTM tags.
I seem to be having trouble when trying to get the value of the URL into the field, for some reason it keeps reporting null
var urlnew = window.location.href;
document.querySelector("input[name='url_hidden']").value = "urlnew";
if I hard code a value it works correctly and submits but it's just anytime i try to use something else

You should remove the quote:
<html>
<body>
<input type=text name=url_hidden>
</body>
<script type="text/javascript">
var urlnew = window.location.href;
document.querySelector("input[name='url_hidden']").value = urlnew;
</script>
</html>

function submitForm(e) {
e.preventDefault();
const username_el = document.querySelector("input[name='username']");
const password_el = document.querySelector("input[name='user_password']");
const hidden_el = document.querySelector("input[name='hidden_url']");
const url = window.location.href;
hidden_el.value = url;
window.alert(`${username_el.value} - ${password_el.value} - ${hidden_el.value}`);
}
<form onsubmit="submitForm(event)">
Username: <input type="text" name="username" id="username" placeholder="Username">
<br>
Password: <input type="password" name="user_password" id="user_password" placeholder="Password">
<br>
Hidden URL: <input type="hidden" name="hidden_url" id="hidden_url">
<br>
<button type="submit">Submit</button>
</form>

You might as well want to populate the value attribute:
document.querySelector("input[name='url_hidden']").value = urlnew;

Related

Second input box in form doesn't work second time

I have this form:
<form id="addChore" method="post" action="allocate.php">
<label>Name of new chore:</label>
<input type="text" id = "choreName" name="choreName">
<p></p>
<label>Description:</label>
<input type="text" id="description" name="description">
<p></p>
<label>Frequency:</label>
<select id="frequency" name="frequency">
...
</select>
<input type="submit" value="Submit">
</form>
and this jQuery
$(document).ready(function(){
$("#addChore").on('submit',function(e){
e.preventDefault();
$("#error").empty();
var name = $("#choreName").val();
console.log(name);
var description = $("#description").val();
console.log(description);
var frequency = $("#frequency").val();
console.log(frequency);
var message=("Please fill all fields");
// $('#addChore')[0].reset();
if (!name || !description){
$("#error").append("<p>"+message+"</p>");
return false;
}
else{...}
but when I try and use the form a second time, description is empty in the log, while name and frequency accept a new input. I have tried resets and .val("") but nothing seems to change this. Any help? :/
Turns out I had another element with the same id, but defined in php in a separate script

How can I create a custom url for users to share based off of their form input?

I'm fairly new to programming but was wondering how I could attach a users first/last name after my domain to make a custom URL?
I have a form that asks for a users name, email, phone, and how many kids they need babysat.
Once they submit the form I want the success page to show a custom url: domain.com/firstLast and then theoretically they can share their link with other people for a possible discount.
I have the copy function working but I cannot seem to get the url to display. Please help!
<body>
<section>
<container>
<div>
<div .form-wrapper>
<form>
<div .slider>
<div .slide>
<div .form-content>
<input type="text" id="name">
</div>
</div>
<div .slide>
<div .form-content>
<input type="email" id="email">
</div>
</div>
<div .slide>
<div .form-content>
<input type="tel" id="phone">
<input type="submit" id="contactMe">
</div>
</div>
</div>
</form>
<div class="success-message">
<div>
<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Url</button>
<script>
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
<script>
....
On your form tag
<form id="onboarding-form">
And your js
<script>
document.getElementById('onboarding-form').onsubmit = function(event){
event.preventDefault();
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url ;
}
<script>
Try moving your Javascript after your HTML:
<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Link</button>
<script>
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
</script>
As your code is currently written, your Javascript will execute before the element share-link exists.
Here is some problems:
Where is html tag with id="name". I also add 1 input tag with this attribute for you.
Just replace the region below the defined html tag. Or put it on function - make sure that the script run after element is created.
Done. There is my test and result:
<input type="text" id="name" class="hidden" value="demoname"/>
<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Link</button>
<script>
var slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
</script>
screenshot of result with this code
Best Regards,

html button redirect to page specified in <input>

I need to redirect the user to a page specificed in an input tag.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/VALUE'" id="connect">EnterRoom</button>
</div>
So where it says "VALUE" inside of the button tag, it would redirect to mysite.com/rooms/VALUE
the "VALUE" input would be inputted by the user inside the input tag.
Any simple way I can do this?
You can get the value of the input using
document.getElementById('username').value
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/' + document.getElementById('username').value" id="connect">EnterRoom</button>
</div>
If you are using jQuery then;
<button onclick="location.href='rooms/' + $('#username').val() " id="connect">EnterRoom</button>
and with the javascript
<button onclick="location.href='rooms/' + document.getElementById('username').value " id="connect">EnterRoom</button>
Here is a version with script separated from HTML of what you want.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button id="connect">EnterRoom</button>
</div>
<script type="text/javascript">
var value = ""
var username = document.getElementById("username")
username.addEventListener('change', function (e) {
value = e.target.value
console.log(value)
})
var connect = document.getElementById("connect")
connect.addEventListener('click', function (e) {
location.href='rooms/'+value
})
</script>
You can use document.getElementById() in button tag.
onclick="location.href='rooms/' + document.getElementById('username').value"
Its good to have a separate javascript function to do redirect task.
In your HTML add onclick event for the button and in javascript function write code to validate and redirect.
HTML
<button onclick="toRedirect()" id="connect">EnterRoom</button>
Javascript
<script type="text/javascript">
function toRedirect(){
// get the user input
var user_value = document.getElementById('username').value ;
// check the validation
if(user_value!=''){
// redirect
location.href='rooms/' + user_value;
}else{
// alert error message
alert("validation error");
}
}
</script>

Get JS object data from user input

Acceptance Criteria: Enter a name and have the person's extension returned to the UI onClick or when pressing "return".
I am looking for suggestions on how to get this to work.
UI
<html>
<head>
<title>SearchFunction</title>
</head>
<body>
<script type="text/javascript">
var extensionList = {
Abby: '8845',
David: '8871',
Jim: '8890',
Lewis: '8804',
};
var returnLookUp = function(){
var getInfo = document.getElementById("thisSearch");
var SearchInfo = thisSearch.value;
/*......?*/
}
</script>
<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick = "returnLookUp();">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>
</body>
</html>
There is no explicit button type is defined. So by default it will be button type ="submit". in that case it will try to submit the form. button type="button" can be use or to prevent the default behaviour, preventDefault() can be used
extensionList[thisSearch.value] is use to get the value of the key from the object, extensionList is the object, thisSearch.value will be the input which is same as the key of the object
var extensionList = {
Abby: '8845',
David: '8871',
Jim: '8890',
Lewis: '8804',
};
var returnLookUp = function(e) {
e.preventDefault();
var getInfo = document.getElementById("thisSearch");
document.getElementById("output").value = extensionList[thisSearch.value];
}
<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick="returnLookUp(event);">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>

Pass JS variable to HTML form onsubmit - Mailchimp embed form

I have a form that I am trying to pass a JavaScript variable into. The custom hidden field works, but nothing gets passed into it... is there something wrong with the onsubmit code?
Embedded form code:
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email" required>
<input type="hidden" name="REFERID" id="MERGE1" value="">
Here is the JS Code later in the page:
<script type="text/javascript">
function addref() {
var urlref = (document.url);
var refcode = urlref.substring(urlref.indexOf "ref" +4 != urlref.length);
document.mc-embedded-subscribe-form.MERGE1.value = refcode;
}
</script>
Try to use:
document.getElementById("MERGE1").value = refcode;

Categories

Resources