Solved

Add to variable when form field is set

Posted on 2014-10-15
9
291 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

733 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