Solved

Add to variable when form field is set

Posted on 2014-10-15
9
294 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 110

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 110

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
Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

 
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
 
LVL 110

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 110

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 110

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

Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

Question has a verified solution.

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

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 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