We Keep Coding

Auto submit or clicked form based on referrer url

I want to make a form auto click based on referrer site..
My url is http://example.com/from/
<form action="" method="post">
<input name="name" value="Jhon" type="text">
<input name="email" value="address#example.com" type="email">
<input name="age" value="28" type="text">
</form>
What I would like, is that when a user come from a certain URL the form will automatically be submitted (auto-clicked). However when the user comes directly to this page, or from a specific site (such as my own) the form will not be submitted.
Is it possible to do this?

Try using:
string = document.referrer;
For more information on this, you should see this for more information concerning this.
After you have gotten the URL, you need to decide what to do with it. You can use document.ready:
$( document ).ready(function() {
//logic
});
Make something that x has the value of "example website" then do:
$("#form_id").submit();
Else do nothing.
Also, this might be a duplicate of this except that this user purely needs a function to run on the document being finished. Finally this solution needs Jquery.

You should use "match" function to submit the form when the user came from any page of the site anything.com
$(document).ready(function(){
var uri = document.referrer;
if (uri.match(/anything.com/)){
$("#yourForm").submit();
}
});

Something like this?
if (document.referrer == "certain_url")
$("#form_id").submit();

Subscribe to Newsletter Form

I have a form which includes the input field and submit button.
<form class="subscribe">
<div class="">
<input type="text" placeholder="Your e-mail adresss">
<span>
<button type="button">Subscribe</button>
</span>
</div>
</form>
What is the easiest way to make this functional using front-end only so that when new email is entered I will receive an email with the new signup info. Is this possible with JS/Jquery only?

Yes this is possible now! You dont even need javascript/jquery to implement this.
There is a good API Endpoint that you can use to send an email such
as this one: https://formsubmit.co
You can read through the documentation for more information. But here is
a little snippet that you can use:
<!--
*Provide your email address on action attribute
*The email you provide on action attribute will be the one to receive an email.
-->
<form action="'https://formsubmit.co/yourEmail#email.com" method="POST">
<input name="email" type="email" required>
<!-- You can add more input/fields, this message input is just to notify you about the subscribers-->
<input hidden name="message" value="Hey! I want to subscribe on your news letter." type="text">
<button type="submit">Subscribe</button>
</form>

That's not possible in the front end. You have to do this server side.
The only thing possible with pure javascript is bringing up the users default email client with a predefined message. But the user will still have to send it.
function sendMail() {
var link = "mailto:me#example.com"
+ "?cc=myCCaddress#example.com"
+ "&subject=" + escape("This is my subject")
+ "&body=" + escape(document.getElementById('myText').value)
;
window.location.href = link;
}

If you want to sent any mail you have to use server side function, But javascript/jquery is client side script.
you can do this make a ajax request and send all data then send mail with your need.

javascript or jquery cant provide that facility because it will be loaded and executed in client side browser. To send a mail you need protocal(SMTP) and server help.
Solution:
1.Use AJAX and serialize your form elements and post it to server file
2.Create your server side file and in that get the posted value and send a mail.ex: php(server side)
mail("youremailaddress#gmail.com", "subject" .$email, $message);
Need more stuff see this ..

How do you generate web pages based on a form?

For example, the website https://talky.io/ has a form on its homepage. When you enter text into the form and hit the button, you're taken to a page that's https://talky.io/[your text]. How do you do this? What's the best way to do it?
Thank you!

You can use onSubmit and change the action attribute of the form via javascript, then return true. The code could look like this:
HTML from linked page:
<form id="createRoom">
<input id="sessionInput" placeholder="Name the conversation" autofocus="autofocus">
<button type="submit">Let’s go!</button>
</form>
Js code:
document.getElementById("crateRoom").onsubmit = function(){
var url = encodeURIComponent(document.getElementById("sessionInput").value);
document.getElementById("crateRoom").action = "/" + url;
return true;
}

It is server-side script job. You can look at some MVC framework and the url parameters

You can use GET method of form;for example:
<form action="index.php" method="get">
Page: <input type="text" name="page">
<input type="submit" value="Submit">
</form>
that after submit will go to index.php?page=yourEnteredPage.

You can use PHP symfony or codeignitor, if you use .net then create a new MVC project.
But if you only need to change urls like
www.mysite.com/mypage.php?something=value
to
www.mysite.com/value
You can do a mod rewrite in apache or if you're using .net then use RegisterRoutes in your global.asax.cs

Using a form you can submit data to a location/url that was given in the action attribute of the for, for example
<form method="POST" action="http://example.com">
<input name="first_name" type="text" value="" />
<!-- Form elements -->
<input type="submit" name="mySubmitButton" value="Submit">
</form>
This form will submit the form data to the given action url when submit will be pressed and on the derver data could be retrieve using
$first_name = $_POST['first_name';];
and so on. The method POST is used to submit the form in the post array so you can retrieve data using $_POST['formfieldname'] and if you use method="GET" then you can get submitted data from $_GET variable, like, $fname=$_GET['first_name']. GET has limitation of amount when submitting data (safe to use up to 2000 characters IE's limit) and is visible to address bar of the browser and not being used for login (password) and POST can send more data than GET and also not visible to address bar.
You may read this.

Fairly possible with URL Rewriting
http://en.wikipedia.org/wiki/Rewrite_engine

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

One form that needs two actions (one local, one remote)

I've read many links and tried many examples but still can't seem to get this working. Any help and suggestions would be most appreciated.
I have one form that needs two actions:
Send an email with all form data to a given user email address (can
do on own host)
Submit all form data to external server (CRM server)
(no edit ability on external server
Upon completion of these two actions, a thank you page will be shown.
My thoughts at the moment are to create two forms (only one will be visible to the user).
HTML form:
<form id="form1" name="form1" action="">
form1: Last Name: <input type="text" name="Last Name" id="Last Name" class="copy" value="from A"/>
</form>
<form id="form2" name="form2" action="externalhost.html">
<input type='text' name='returnURL' value='thankyou.php'>
form2: Last Name: <input type="text" name="Last Name" id="Last Name" class="copy" value="target A" />
</form>
<input id="myButton" type="submit" value="hit me..." >
When the user enters the data and hits submit, all the data will be copied over to the second form.
function form2form(aF1, aF2) {
var selection = "#" + aF1 + " .copy";
jQuery(selection).each(function() {
document.forms[aF2].elements[jQuery(this).attr('name')].value = jQuery(this).val();
});
}
Then submit "form1" to own server to create and send email.
Then submit "form2" to external host to enter into that CRM system. One field in "form2" will be a return URL which will be the thankyou page.
The logical,straightforward method,
jQuery(document).ready(function() {
jQuery('#myButton').click(function() {
form2form ('form1', 'form2' );
jQuery('#form1').submit();
jQuery('#form1').submit();
});
});
unfortunately, doesn't work.
My current jquery code also isn't working.
jQuery(document).ready(function() {
jQuery("#myButton").livequery('click', function() {
var form = jQuery("#form2");
var action = form.attr("action");
var serialized_form = form.serialize();
jQuery.post(action, serialized_form, submit_first);
});
});
function submit_first(val) {
jQuery("#form1").submit();
}
If you can direct me towards a workable solution, it would really help. I've been having headaches over this one for far too long.

Don't reinvent the internet. Use jQuery.ajax() to send the data to your server. Then Transfer over to the external server.

What I would do is submit the form via ajax to both servers.
Something like:
jQuery("#form1").submit(function() {
data = jQuery(this).serialize();
jQuery.post('internal_server', data);
jQuery.post('external_server', data);
//redirect to thank you page, etc.
return false; // Prevent normal form submission
});