Solved

Add to variable when form field is set

Posted on 2014-10-15
9
281 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

895 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

16 Experts available now in Live!

Get 1:1 Help Now