Passing data from one form field to another

Question

I am trying to customize a form on a Wordpress site. This form has two fields which will share the same exact data (Post Title and Location). Rather than have the user enter the same information in two different fields, I am looking for a way to have the user enter the Location in the Location field, and then have that same input passed on to the Post Title field (which will be hidden) before the form is submitted.

I have done some research on this and it seems like jquery is need to make this happen. I'm not at all knowledgeable with jquery, so I need some clarification on how to make this happen. If you could, please explain how to implement the jquery code into the page. Do I have to create a jquery file and then call that file on this page? As I said, I know nothing about jquery. Thanks.

Note: Having issues with jquery event that will work with autocomplete drop down. All events I've tried are only passing text I type manually. When I click on an autocomplete dropdown suggestion, any text I didnt type manually is not passed to the second field.

Here is the current code I am working with:

<input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address" placeholder="<?php echo esc_attr__( 'Provide full street address', APP_TD ); ?>" class="required" value="<?php echo esc_attr( $project->_hrb_location ); ?>" />
    <input name="post_title" type="hidden" value="<?php echo esc_attr( $project->_hrb_location ); ?>" class="required" />

Answer 1

<script>
$( document ).ready(function() {
   $('#location').on("keyup", function(){
     $("input[name=post_title]").val($('#location').val());
   });
});
</script>

On every keyup that will add the value of the input with the id of location and 'place' it inside the hidden input with the name post_title

Answer 2

jQuery is a JavaScript library which has a few simple basics and a lot of advanced topics. Here are a couple relevant points to your question:

1. You select elements through the DOM just like CSS selectors. Here you select every element with an ID of 'location'

   var input = $("#location");

2. You can bind events to elements, such as on click, blur, mouse over, load, etc.

3. You would include jQuery as a script in the head tag of your HTML, and any scripts you have that require jQuery can be in their own js files or in the HTML/PHP document you're working with.

See my fiddle as an example of how to bind the blur event (focus on an element is removed... IE tab off the text input).

http://jsfiddle.net/2maw8xo4/1/

 var input = $("#location"); var showme = $("#showme"); $(input).on("blur", function() { showme.val($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address" placeholder="Provide full street address" class="required" value="" /> <input type="text" id="showme" disabled /> 

Answer 3

Here's how I did it in WordPress:

First form - looking for the name="YourNameValueHere" variable and calling a "GET" request instead of a "POST".

<form class="mailform" method="get" name="grab" action="Your-URL-here-or-file.php"> <fieldset> <label > <input type="text" name="first_name" /> </label> <label > <input type="text" name="last_name" /> </label> <label> <input type="text" name="email_address" /> </label> <label> <input type="text" name="phone"/> </label> <div class="controls-submit"> <button class="btn-large" type="submit">Get started now!</button> </div> </fieldset> </form>

Form #2 spits out the info in the input fields

These are the vars that grab the name input fields in the first form with "GET" request.

<?php $firstName = $_GET['first_name']; $lastName = $_GET["last_name"]; $emailAddress = $_GET["email_address"]; $phoneNumber = $_GET["phone"];
?>
<form method="POST"> <p>First Name*</p> <input required type="text" name="first_name" value="<?php echo $firstName; ?>"> <p>Last Name*</p> <input required type="text" name="last_name" value="<?php echo $lastName; ?>"> <p>email*</p> <input required type="email_address" name="email_address" value="<?php echo $emailAddress; ?>"> <p>Phone*</p> <input required type="phone" name="phone" value="<?php echo $phoneNumber; ?> "> <button>Submit</button> </form>

Answer 4

This JavaScript function is going to take the value entered in the field Location and will post to the field Post_ID accordingly.
JS:

<script>       
 var swap_val = function  (val){
            var input = document.getElementById("post_title");
            input.value = val;
        }
</script>

HTML:

Enter Location to see it in the Post ID:
<input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address"  
class="required" value="" onkeyup='swap_val(this.value);'/>
Post ID:
<input name="post_title"  id = "post_title" type="text" value="" class="required" />

A Pen

Answer 5

You can use a couple of different event handlers to achieve this quite easily:

http://jsfiddle.net/f84shzxu/

The event handler can be asked to execute on different events, two of these include:

1) blur - After the current element has lost focus.

2) keyup - After button presses

The example includes both methods.

The basic structure of the event handlers are:

// On 'blur' will update when you click off the field
$('#location').on('blur', function(){
    $('#location2').val($('#location').val());
});

// On 'keyup' will update after each key press
$('#title').on('keyup', function(){
    $('#title2').val($('#title').val());
});

If you are using autocomplete, try using the blur event handler.

Let me know if it helps.