Solved

Add to variable when form field is set

Posted on 2014-10-15
9
276 Views
Last Modified: 2014-10-16
I need to add a capital P to the $rescode variable if the Pets field is set to more than 0 when the form is submitted. I don't have any control over the result script which is on an external site. Anyone have any ideas how I could do this since it's a combo of html and php submitting to another site?

Below is the code I'm using in the functions.php theme file to display using shortcode. I initially created the form using the gravity forms plugin simply because it has a built-in calendar option. But then adjusted the fields as needed to work with / pass correct parameters to the reservation system on another location.

function displayresform() {
	global $post;
	if (get_post_meta($post->ID, rescode, true)) {
	$rescode = get_post_meta($post->ID, rescode, true);
	}
	$date = date("m/d/Y");
	return "
	<div class='gf_browser_gecko gform_wrapper' id='gform_wrapper_1' ><form method='post' enctype='multipart/form-data'  id='gform_1'  action='https://newportres.hallmarkinns.com/irmnet/res/resmain.aspx?resort=de' target='_blank'>
	<div class='gform_body'>
	<ul id='gform_fields_1' class='gform_fields top_label description_below'><li id='field_1_1' class='gfield' ><label class='gfield_label' for='input_1_1'>Arrival</label><div class='ginput_container'><input name='Arrival' id='input_1_1' type='text' value='".$date."' class='datepicker medium mdy datepicker_with_icon' tabindex='1' /> </div><input type='hidden' id='gforms_calendar_icon_input_1_1' class='gform_hidden' value='/wp-content/plugins/gravityforms/images/calendar.png'/></li><li id='field_1_2' class='gfield' ><label class='gfield_label' for='input_1_2'>Departure</label><div class='ginput_container'><input name='Departure' id='input_1_2' type='text' value='".$date."' class='datepicker medium mdy datepicker_with_icon' tabindex='2' /> </div><input type='hidden' id='gforms_calendar_icon_input_1_2' class='gform_hidden' value='/wp-content/plugins/gravityforms/images/calendar.png'/></li><li id='field_1_3' class='gfield' ><label class='gfield_label' for='input_1_3'>People</label><div class='ginput_container'><select name='People1' id='input_1_3'  class='medium gfield_select' tabindex='3' ><option value='2' >2</option><option value='4' >4</option><option value='6' >6</option></select></div></li><li id='field_1_5' class='gfield' ><label class='gfield_label' for='input_1_5'>Children</label><div class='ginput_container'><select name='People2' id='input_1_5' class='medium gfield_select' tabindex='4' ><option value='0' >0</option><option value='1' >1</option><option value='2' >2</option><option value='3' >3</option><option value='4' >4</option></select></div></li><li id='field_1_4' class='gfield' ><label class='gfield_label' for='input_1_4'>Pets</label><div class='ginput_container'><select name='People3' id='input_1_4'  class='medium gfield_select' tabindex='4' ><option value='0' >0</option><option value='1' >1</option><option value='2' >2</option></select></div></li>
	</ul></div>
	<div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_1' class='button gform_button' value='Submit' tabindex='5' onclick='if(window[\"gf_submitting_1\"]){return false;}  window[\"gf_submitting_1\"]=true; '/>
	<input type='hidden' class='gform_hidden' name='RoomType' value='".$rescode."' />
	<input type='hidden' class='gform_hidden' name='is_submit_1' value='1' />
	<input type='hidden' class='gform_hidden' name='gform_submit' value='1' />
	<input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
	<input type='hidden' class='gform_hidden' name='state_1' value='WyJbXSIsIjIwN2EzZWUwNmExMmJjYzQ3NDVlOGZmODIxNWRmMGFkIl0=' />
	<input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' />
	<input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' />
	<input type='hidden' name='gform_field_values' value='' />

	</div>
	</form>
	</div><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [1, 1]) } ); </script>
	";          	
}

Open in new window


I thought about trying to just submit to the page the form is on, use php to create the url to submit to, but with the location of the coding - I can't see a way to do an auto redirect after the form submitted and that url gets created. I don't want the customers to have to submit twice either.

Maybe javascript or jQuery would be a solution, but I'm not sure how to combine that in with the php.
0
Comment
Question by:Dzynit
  • 5
  • 4
9 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40383216
Not sure how you might integrate this into the WP setup, but I think it would be a matter of just putting the javaScript statements into the browser stream.  
http://iconoun.com/demo/temp_dzynit.php

Explanations:
1. We attach an event handler that gets fired when the submit button is clicked.
2. If the "Pets" checkbox is checked,
3. We set variable "x" to "P" and append the value of the hidden input control with the id="hiddenControl"
4. We assign the newly created value of "x" to the hidden input control.
5. The name of the form element, "RoomType" is what comes through in the POST-method request. You will see the contents in the var_dump() when you test the script.

<?php // demo/temp_dzynit.php
error_reporting(E_ALL);

// IF THERE IS A REQUEST SHOW THE VARIABLES THAT CAME THROUGH
if (!empty($_POST))
{
    var_dump($_POST);
    die();
}


// SET A RESCODE VALUE FOR USE IN THE HTML DOCUMENT BELOW
$rescode="ABC123";

?><!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>Example Using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function(){
    $("#submitControl").click(function(event){
        var p = $('#checkControl').is(':checked');
        if (p){
            var x = "P" + $("#hiddenControl").val();
            $("#hiddenControl").val(x);
        }
    });
});
</script>

</head>
<body>

<form  id="myForm" method="post">
The value of rescode is <?php echo $rescode; ?>
<br>
Check if you have <input id="checkControl" type="checkbox" /> Pets
<input id="hiddenControl" type='hidden' name='RoomType' value='<?php echo $rescode; ?>' />
<input id="submitControl" type="submit" />
</form>

</body>
</html>

Open in new window

0
 
LVL 14

Author Comment

by:Dzynit
ID: 40384521
Ray,
I think this is going to work for me, but the Pets field is a dropdown box rather than checkbox. The dropdown has 0,1, and 2 as the options. I tried searching for the right jquery for a dropdown, but jquery is just my weakest language.

I altered the code you showed above to match the correct id's in my form and also had to change the $ to jQuery because I was getting the not a function error message:

<script>
jQuery(document).ready(function(){
    jQuery(\"#gform_submit_button_1\").click(function(event){  	
        var p = $('#People3').is(':checked');
        if (p){
            var x = \"P\" + $(\"#RoomType\").val();
            $(\"#RoomType\").val(x);
        }
    });
});
</script>

Open in new window


(Because the script is being placed in php, I added the \ to the double quotes. I'm sure you see that, but thought I should point it out if you try copying and testing the edited code.)
I think if we can just get that People3 changed to get the dropdown value and check to see if it's either choice except 0 - I think it'll do what we want.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40384776
Let's try it this way...
http://iconoun.com/demo/temp_dzynit.php

<?php // demo/temp_dzynit.php
error_reporting(E_ALL);

// IF THERE IS A REQUEST SHOW THE VARIABLES THAT CAME THROUGH
if (!empty($_POST))
{
    var_dump($_POST);
    die();
}


// SET A RESCODE VALUE FOR USE IN THE HTML DOCUMENT BELOW
$rescode="ABC123";

?><!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>Example Using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function(){
    $("#submitControl").click(function(event){
        var p = $('#selectControl').val();
        if (p > 0){
            var x = "P" + $("#hiddenControl").val();
            $("#hiddenControl").val(x);
        }
    });
});
</script>

</head>
<body>

<form  id="myForm" method="post">
The value of rescode is <?php echo $rescode; ?>
<br>
Select
<select id="selectControl">
<option value="0">No Pets</option>
<option value="1">Dog</option>
<option value="2">Cat</option>
</select>
<input id="hiddenControl" type='hidden' name='RoomType' value='<?php echo $rescode; ?>' />
<input id="submitControl" type="submit" />
</form>

</body>
</html>

Open in new window

0
 
LVL 14

Author Comment

by:Dzynit
ID: 40384881
Hmm, seems it should work, but it's still not adding the P. What about an onclick on the Pet field? Is there a way to add the P to the hidden field when 1 or 2 pets is selected in the dropdown?
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40384936
What do you see when you run it in Google Chrome Dev Tools?  The script I posted is correct according to my tests.
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40384965
This is all it says:
Uncaught TypeError: undefined is not a function (index):439(anonymous function) (index):439m.event.dispatch jquery.js?ver=1.11.1:3r.handle

I'm not sure if that's related to the script we've been working on though. That might be the slider.  That's what the chrome console said. I use firebug, and it's not giving me any jquery errors other than when I used only the $ instead of jQuery in the script.

Here's the location of the form if that might help (lower right hand of the content area): http://dev7.wpmate.net/newport/accommodations/limited-edition-rooms/limited-edition-king-spa-for-2/

I'm not sending the form to the external res system site right now so we can see the dump output after hitting submit. I've also tried moving the jquery code around from header to after all other scripts load to be sure it's not a conflict.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40385057
This may be a long shot, but check the last reported error here:
http://validator.w3.org/check?uri=http%3A%2F%2Fdev7.wpmate.net%2Fnewport%2Faccommodations%2Flimited-edition-rooms%2Flimited-edition-king-spa-for-2%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

It may also have something to do with having two document.ready(function... declarations
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40385083
I got it! Removed the doc.ready from the script you provided and changed all the $ in it to jQuery and it's now adding the P as expected.
(maybe it was the other $'s in the middle of the script all along. But it's working without the doc.ready, so I'll try leaving that out.)

I really appreciate you hanging in there and helping me with this. I've never had the time to take to learn the jQuery and very rarely have to work with it. I think you've helped me with some of it a couple times before :)

Thanks much, Heather
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40385141
Thanks for the points, Heather.  I think I never really "got it" about CSS until I started learning jQuery!

All the best,
Ray
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now