Use javascript to replace input value into mailto - javascript

I have to email some information and I can't use PHP unfortunately. I've set up an input to get the email address of a user.
<form name="email-form">
<div class="email">
Enter your email:
<input type="email" name="email-value">
</div>
<a type="submit" class="email-link" value="Email Results"></a>
</form>
What I thought I could do is set up an onClick event like this and append the user input to the end of the mailto: part.
var emailAddy = $("email-value").val();
$(".email-link").on("click", function(){
$(".email-link").prop("href", "mailto:").append( emailAddy );
});
In don't get any errors running this code, but when the mail client comes up, the "to:" section is blank. Is this even possible?

There's a lot going on here.
$("email-value") doesn't match anything. You want $('input[name="email-value"]').
You're trying to capture the email address in a global variable on page load, before the user has an opportunity to enter anything, so it'll always be empty. Instead, you should capture that value inside the function that uses it.
.append adds a text node to the document. What you want is to concatenate the email address to the string "mailto:", so just use concatenation (+).
<a> tags don't have a value attribute. Use a text node inside the tag instead.
<a> tags don't have a type attribute, and aren't a submit button for a form. Fortunately, what you're doing is constructing a regular anchor link, so it doesn't need to be a submit button; the only use for the form is for the input field.
There's no href attribute on the anchor to begin with, so the browser won't style it as a link.
href is an attribute, not a prop: use .attr(). prop is for booleans such as checked or disabled.
You're altering the link's href during the same click event that would fire that link. That does seem to work -- somewhat unexpectedly -- but means the hover indicator on the link will be incorrect (since the href doesn't exist until the user clicks the link.) I'd use a change event on the input field instead (and ideally validate the email address before altering the link href.)
Here's a corrected version of your code:
$('input[name="email-value"]').on("change", function() {
var emailAddress = $(this).val();
// validate the address here
$(".email-link").attr("href", "mailto:" + emailAddress);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
<div class="email">
Enter your email:
<input type="email" name="email-value">
</div>
</form>
Email Results

You need to use attr instend of append to set attribut value
$(".email-link").on("click", function(){
var emailAddy = $("input[name='email-value']").val();
$(this).attr("href", "mailto:" + emailAddy);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
<div class="email">
Enter your email:
<input type="email" name="email-value">
</div>
<a type="submit" class="email-link" value="Email Results">Submit</a>
</form>
Edit : your selector for the value was undefined, target by class, name, id, etc...

Related

How to make browser save password without redirect?

We have a form with username password inputs and a button. When button is clicked, the form redirects to another url by adding /? to the url current, which is unwanted behavior.
In case we add event.preventDefault(), it prevents the browser from offering to save the username and password (see the picture below, what i mean).
Here is the code. It does not redirect here, because it is inside a snippet.
document.getElementById('send').addEventListener('click', (event) => {
//event.preventDefault()
console.log('test')
})
<form>
<div>
<label for="username">username</label>
<input
id="username"
type="text"
autocomplete="username"
/>
<label for="password">password</label>
<input
id="password"
type="password"
autocomplete="new-password"
/>
</div>
<button id="send">send</button>
</form>
I tried to use div instead of form tag, but it prevents autocomplete from working too.
Also, here you can test the form with browser offering to save password. Copy the code from here
How to prevent redirect on button click and preserve browser's autocomplete functionality?
To prevent redirection on button click, set the type="button" for the button element and that will turn the button element to just an ordinary button, then after then you know that you will be using AJAX to submit the form:
<button id="send" type="button">send</button>
is this the answer you are looking for
I have not checked. But you can try this:
document.getElementById('send').addEventListener('click', (event) => {
console.log('test');
return false;
})
The 'new-password' value used for autocomplete should be preventing autofill since the browser is expecting a new password to be entered there. According to the MDN:
Preventing autofilling with autocomplete="new-password"
If you are defining a user management page where a user can specify a
new password for another person, and therefore you want to prevent
autofilling of password fields, you can use
autocomplete="new-password".
I think this answer may help

Changing a form redirect value, when you can't edit the form HTML itself

I'm using a site builder tilda.cc.
They don't let you edit the HTML of their own elements.
But you can add an HTML block, where JS is allowed.
What I'm trying to do, is figure out, how can I add one of the form input values, to the redirect URL as a GET element.
For example:
User enters a form field.
On clicking to another form field, the code should add to the redirect URL the value that the user just entered.
For example, if user entered email#domain.com, the JS code would add it as a GET parameter to the redirect link.
Redirect.com/success?email=email#domain.com
Is it even possible to do it like this?
This is the basic code, how the form looks like:
<form action method="POST" data-success-url="redirect.com/success">
<input type="text" name="Email">
</form>
I can get the email to be displayed as an alert:
<script>
$('form').change(function() {
alert('email input value: ' +
$(this).find('input[name=Email]').val());
});
</script>
But how would I actually go about adding it to the "data-success-url"?

Input button value is used to append a URL

I'm looking for a boilerplate smart way to take the input value, append it to a fixed url like /search/inputboxvalue and send the user there. Is there anyway smart robust way to do it? I could use an onlick handler and a form but I wondered if there is a more elegant way to do it, pref just using javascript.
My code:
<input name="search" id="search" value="" type="text" width="650px"></input>
Try this:
var my_value = document.getElementById('search').value;
window.location.href = window.location.href + my_value
Use following statment to get value from text box and append to current url.After append it will redirect user to that url.
input_box_value = jQuery('#search').attr('value');
window.location.href = window.location.href + input_box_value
Above 2 statement can be insert on particular event.like click
This is not really correct way to form requests. This symbol "/" should tell us, that we go to subdirectory, or its analog. So, to form this type of url, you will need to use javascript.
But, there is more easy way to create this type of request. Native:
<form id="search" method="get" action="search">
<input type="text" name="q" value="" />
<button type="submit">Search</button>
</form>
This small HTML snippet will allow you to visit an url: site.com/search?q=inputboxvalue without any JS. You may even hide submit button and just use Enter to search.

Different placeholder via Javascript on same input ID

I guess this is pretty basic yet I don't know how to solve this puzzle. What I have is two inputs generated by a plugin in Wordpress. What I want to do is to change the placeholders in the fields.
The problem is that the fields ID (which I use to call the inputs via Javascript) is the same, resulting in that only the first inputs placeholder changes.
The auto-generated HTML:
<input type="password" placeholder="Lösenord" name="swpm-19" id="swpm-19" value="" class="swpm-text swpm-large required ">
<input type="password" placeholder="Retype password Here" name="swpm-19_re" id="swpm-19" value="" class="swpm-text swpm-large required ">
The Javascript:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#swpm-19').attr("placeholder","Lösenord");
});
</script>
I have no idea how to call the second input since the ID's are the same. What I did notice is that the names of the inputs is different. The second inputs name is "swmp-19_re". Would it be possible to fetch the input in the Javascript via the name instead of the ID?
You cannot have duplicate id, this is invalid document.
You can use the attribute value selector to select the elements by using name attribute value.
$('input[name="swpm-19"], input[name="swpm-19_re"]').attr('placeholder', 'Lösenord');
You can also use starts with as
$('input[name^="swpm-19"]').attr('placeholder', 'Lösenord');
For more information on the type of CSS (attribute) selectors that jQuery supports check this page.

prefill text field using javascript

I have a simple javascript that I can't seem to get to work.
So what I'm trying to accomplish is a text field on my homepage that the user can type in(just 1 field). Submit it and it'll take them to another page with a text field that is pre filled with what they already typed in the first field.
<script type="text/javascript">
function go_page(page)
{
document.location.href = '/?page_id=11' + '#addressInput=' + addressInput;
}
</script>
When i fill in the 'addressInput' (for this example, lets say '90501')..
Currently, the url comes up as www.mywebsite.com/?addressInput=90501
Goal, i want it to be.. www.mywebsite.com/?page_id=11#addressInput=90501
This 'goal url' works when i type it in the address bar. I just need to figure out how to do that function automatically for the user..based on what they input in the first text field.
...any ideas?
EDIT 1
Here is the form code..
<form method="get" onsubmit=" go_page(this.page.value); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
EDIT 2
just more info..
The user will be on the homepage and type in an 'address/zip code' in the text field and click submit.
Which will then take them to the locations page(page_id=11) that has a text field that's pre-populated with the 'address/zip' the user typed in on the homepage.
You could try grabbing the element in the form like this
<form method="get" onsubmit="go_page(this.addressInput); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
And extracting the value of addressInput inside your function like this
function go_page(elem) {
var addressInput = elem.value;
window.location.href = "/?page_id=11#addressInput"+addressInput;
}
In Wordpress that should navigate you to the page id and add the hash to the end
Its not clear from the limited information provided, but have you stopped the default form submission behavior? Maybe the form if being submitted before your javascript is called. Capture the form submission and return:false or event.preventDefault() to stop it continuing with the submission.
If you want to have # in the URL, you have to encode it so instead of using # use %23. And do not forget that for separating values in URL you have to use &.
document.location.href = '/?page_id=11' + '%23addressInput=' + addressInput;
Update
Instead of document.location.href use window.location

Categories