I have a fancybox gallery that is working perfectly but when I do a submit for voting instead of processing the form it goes to the next image
The fancybox script
$(".fancybox-button").fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
The HTML page
<div class="showContestant"><a class="fancybox-button" rel="fancybox-button" href="viewDetail.php?id=1" title="Fine Gal One">
<img src="images/pix1.jpg" width="100" /></a></div>
<div class="showContestant"><a class="fancybox-button" rel="fancybox-button" href="viewDetail.php?id=4" title="Fine Gal two">
<img src="images/pix4.jpg" width="100" /></a></div>
<div class="showContestant"><a class="fancybox-button" rel="fancybox-button" href="viewDetail.php?id=2" title="Fine asdfasfasf asfasfasfsadf Gal three">
<img src="images/pix2.jpg" width="100" /></a></div>
The PHP page called
<? if (isset($_REQUEST['cid'])) { echo 'posted';} else{?>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="images/pix<?=$_REQUEST['id'];?>.jpg" width="400" height="400" /><input name="cid" id="cid" type="hidden" value="<?=$_REQUEST['id'];?>" /></td>
</tr>
<tr>
<td>My Picture Description: i am looking great in my red top!!!<br />
Vote this Contestant;</td>
</tr>
<tr>
<td><input type="submit" name="Vote" id="Vote" value="Vote Me!!!" /></td>
</tr>
</table>
</form>
<? } ?>
Add this API options
arrows: false,
closeClick: false,
.
Related
I'm pretty new to WordPress and web development. I've been working on converting an older website to WordPress for a person I do business with. I've got almost everything done, but I'm having trouble getting his contact form to work properly. I've created a custom template for the page, but am not sure how to get the page for when the email is sent to work. My template code looks like this
<?php
/*Template Name: Contact*/
?>
<?php
get_header();
?>
<?php $nav = get_field ('navigation_links'); ?>
<body bgcolor="#ffffff" onload="MM_preloadImages('<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c1_s2.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c1_s4.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c1_s3.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c3_s2.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c3_s4.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c3_s3.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c5_s2.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c5_s4.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c5_s3.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c7_s2.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c7_s4.png','<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c7_s3.png');">
<div class = "container" style = "background-image:url(<?php bloginfo('template_directory')?>/images/Generic_Background.jpg);">
<div id="header" style="position:relative;">
<div id="FWTableContainer1270816879">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="960">
<!-- fwtable fwsrc="masthead.png" fwpage="Page 1" fwbase="masthead.png" fwstyle="Dreamweaver" fwdocid = "1270816879" fwnested="0" -->
<tr>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="179" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="55" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="179" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="89" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="179" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="68" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="199" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="12" height="1" border="0" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="8"><img name="masthead_r1_c1_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r1_c1_s1.png" width="960" height="193" border="0" id="masthead_r1_c1_s1" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="1" height="193" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="masthead_r2_c1_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c1_s1.png" width="179" height="43" border="0" id="masthead_r2_c1_s1" alt="" /></td>
<td><img name="masthead_r2_c2_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c2_s1.png" width="55" height="43" border="0" id="masthead_r2_c2_s1" alt="" /></td>
<td><img name="masthead_r2_c3_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c3_s1.png" width="179" height="43" border="0" id="masthead_r2_c3_s1" alt="" /></td>
<td><img name="masthead_r2_c4_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c4_s1.png" width="89" height="43" border="0" id="masthead_r2_c4_s1" alt="" /></td>
<td><img name="masthead_r2_c5_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c5_s1.png" width="179" height="43" border="0" id="masthead_r2_c5_s1" alt="" /></td>
<td><img name="masthead_r2_c6_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c6_s1.png" width="68" height="43" border="0" id="masthead_r2_c6_s1" alt="" /></td>
<td><img name="masthead_r2_c7_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c7_s1.png" width="199" height="43" border="0" id="masthead_r2_c7_s1" alt="" /></td>
<td><img name="masthead_r2_c8_s1" src="<?php bloginfo('template_directory')?>/menu_images/masthead_r2_c8_s1.png" width="12" height="43" border="0" id="masthead_r2_c8_s1" alt="" /></td>
<td><img src="<?php bloginfo('template_directory')?>/menu_images/spacer.gif" width="1" height="43" border="0" alt="" /></td>
</tr>
</table>
<div id="MMMenuContainer1120175513_0">
<div id="MMMenu1120175513_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> Pistols & Knives Rifles & Shotguns Collectibles & Antiques </div>
</div>
</div>
</div>
<div class="content" style="position:relative;">
<!-- InstanceBeginEditable name="maincontent" --><div id="centertable"><center><table width="70%" border="0" cellpadding="2" cellspacing="0" style="background-color:#fcb076;">
<tr>
<td align="center"><h2 style="margin-top:4px;">Contact Information</h2> <h5>Phone: 574.295.6440<br />
Monday – Friday 9:00 am – 5:00 pm Eastern Standard Time</h5>
<h5>Saturdays 9:00 am - noon<br />
Fax: 574.522.1600 (Anytime)</h5></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><h5>Mailing Address:<br />
22382 State Road 120 Elkhart, IN 46516</h5></td>
<td align="center"><h5>Physical Address:<br />
22382 State Road 120 Elkhart, IN 46516</h5></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><h5>E-mail - paul.stybert#gmail.com</h5></td>
</tr>
<tr>
<td><h5>If you have questions, you can reach us by phone, fax, regular mail, or use the email form below. This form will be sent to a customer service representative, who will be in contact with you soon. Thank you for your interest in Doug's Guns.</h5></td>
</tr>
<tr style="background-color:#005d90;color:#fff;">
<td align="center" style="border:1px solid #000;"><h3>Online Information Request Form</h3></td>
</tr>
<tr >
<td align="center" style="border:1px solid #000;background-color:#d3a06f;"><form action="<?php bloginfo('template_directory')?>/template-emailproc.php" method="post" id="mailform" name="mailform">
<input type="hidden" value="yxstreme" name="name" />
<table width="80%" border="0" cellspacing="0" cellpadding="2" class="formtable" style="margin-top:0px;">
<tr>
<td align="right" valign="top">*Name</td>
<td align="left" valign="top"><span id="sprytextfield1">
<input type="text" name="txtName" id="txtName" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>
</tr>
<tr>
<td align="right" valign="top">*Email</td>
<td align="left" valign="top"><span id="sprytextfield2">
<input type="text" name="txtEmail" id="txtEmail" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr>
<td align="right" valign="top">Company</td>
<td align="left" valign="top"><label for="txtCompany"></label>
<input type="text" name="txtCompany" id="txtCompany" /></td>
</tr>
<tr>
<td align="right" valign="top">Address</td>
<td align="left" valign="top"><label for="txtAddress"></label>
<input type="text" name="txtAddress" id="txtAddress" /></td>
</tr>
<tr>
<td align="right" valign="top">City</td>
<td align="left" valign="top"><label for="txtCity"></label>
<input type="text" name="txtCity" id="txtCity" /></td>
</tr>
<tr>
<td align="right" valign="top">State</td>
<td align="left" valign="top"><label for="txtState"></label>
<input type="text" name="txtState" id="txtState" /></td>
</tr>
<tr>
<td align="right" valign="top">Postal Code</td>
<td align="left" valign="top"><label for="txtPostalCode"></label>
<input type="text" name="txtPostalCode" id="txtPostalCode" /></td>
</tr>
<tr>
<td align="right" valign="top">Phone</td>
<td align="left" valign="top"><label for="txtPhone"></label>
<input type="text" name="txtPhone" id="txtPhone" /></td>
</tr>
<tr>
<td align="right" valign="top">Interested In:</td>
<td align="left" valign="top"><select name="ddInterest" class="contactformoption" id="ddInterest">
<option value="null" selected="selected">Please Choose One</option>
<option value="Buying One Of Our Products">Buying One Of Our Products</option>
<option value="Pistols">Pistols</option>
<option value="Rifles or Shotguns">Rifles or Shotguns</option>
<option value="Collectibles">Collectibles</option>
<option value="Other">Other</option></select></td>
</tr>
<tr>
<td align="right" valign="top">How did you find our website?</td>
<td align="left" valign="top">
<input type="text" name="txtHowFind" id="txtHowFind" /></td>
</tr>
<tr>
<td align="right" valign="top">Comments/Questions</td>
<td align="left" valign="top"><label for="txtComment"></label>
<textarea name="txtComments" id="txtComment" cols="60" rows="5"></textarea></td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td align="left" valign="top"><input type="submit" name="btnSubmit" id="btnSubmit" value="Send" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table></center>
</div>
<!-- InstanceEndEditable -->
<!-- end .content --></div>
<!-- end .container --></div>
</body>
<?php wp_footer();?>
<!-- InstanceEnd --></html>
I know it has something to do with the post method and where the email is being sent I changed the link to a page I've created with a custom template. The code that is different in that template is
<div class="content" id="maincontent"><!-- InstanceBeginEditable name="MainContent" -->
<%
on error resume next
xname=request.form("txtName")
xemail=request.form("txtEmail")
xcompany=request.form("txtCompany")
xaddress=request.form("txtAddress")
xcity=request.form("txtCity")
xstate=request.form("txtState")
xpostalcode=request.form("txtPostalCode")
xphone=request.form("txtPhone")
xinterest=request.form("ddInterest")
xhowfind=request.form("txtHowFind")
xcomments=request.form("txtComments")
If Request.form("name") = "yxstreme" Then
psFrom="no-reply#plugguardstore.com"
psSubject="Contact from Doug's Guns Website"
' message body
psbody = "<html><head><title>E-mail sent from the Doug's Guns website</title></head>"
psBody="<body><h5>The following e-mail was sent from the Doug's Guns website :</h5>"
psBody=psBody & "<hr />"
psBody=psBody & "<p>Name: " & xname & "</p>"
psBody=psBody & "<p>Email" & xemail & "<br />Company: " & xcompany & "<br />Address: " & xaddress & "<br />"
psBody=psBody & "City: " & xcity & "<br />State: " & xstate & "<br />Postal Code: " & xpostalcode & "<br />"
psBody=psBody & "Phone: " & xphone & "<br />"
psBody=psBody & "Interested In: " & xinterest & "<br /><br />"
psBody=psBody & "Discovered Website How: " & xhowfind & "<br /><br />"
psBody=psBody & "Comment/question:<br />" & xcomments & "<br /><br />"
psBody=psBody & "</body></html>"
strErr = ""
bSuccess = False
'On Error Resume Next
'sendCDOHTMLEmail "paul.stybert#gmail.com",psFrom,psSubject,psBody
sendCDOHTMLEmail "paul.stybert#gmail.com.com",psFrom,psSubject,psBody
'sendCDONTSHTMLEmail "paul.stybert#gmail.com",psFrom,psSubject,psBody,1
If Err <> 0 Then ' error occurred
strErr = Err.Description
response.write "<center><h3>There was a problem sending your message.</h3></center>"
'response.write Err.Description
else
bSuccess = True
response.write "<center><h3>Thanks! Someone will be in touch with you shortly.</h3></center>"
End If
End If
%>
<!-- InstanceEndEditable --><!-- end .content --></div>
I'm lost on what I need to do to make this work. Any help would be appreciated. For your information the website was originally created with DreamWeaver and I've been moving the html code over and adding php for WordPress into it.
As I understand you want to ditch the asp processing for a Wordpress solution?
Apart from the good suggestion that #biesior gave about a form plugin (ninja forms, gravity forms), this would in your case be done by leaving the action part of the form empty (the form will then post to the same page) and handling the post variables and mailing in your template, just above the get_header(). You would also need to put conditions around the form content like this: if (!isset($_POST["btnSubmit"]) { ... }, so that it doesn't show if the form has been posted.
Look into the wp_mail function. And put a nonce in that form and probably a (re)captcha.
But, forms are nasty and a lot of work, so look into one of the popular form plugins. You'll set this one up in no-time
I am trying to add an option in the backend of an administration panel where admins can change the user type. Called: Change User Type
Before these were the options available: Add Notes about Driver and Change Email :
I modified the php and added the front end selector to Change user type in the admin panel:
But the problem is that it keeps pulling a box to enter data. I want a list with all user types to be listed in a drop down so I can select a user type and change and not add notes to it.
In the database I only have three types of users "user_group". They are listed under Ids 1, 2, and 3.
MY QUESTION IS:
How can I make a drop down list appear, once I select Change User Type after already having selected the user under the Select Driver options in the previous drop down?
My user type ids are listed under user_group
Below is the current code on the file, which is not very much:
function fn_ACTION_METHOD(sMethod){
if(sMethod=='notes'){
document.getElementById('comment_box').style.display='block';
document.getElementById('email_box').style.display='none';
document.getElementById('btnSUBMIT').value='ADD NOTES';
}else if(sMethod=='email'){
document.getElementById('comment_box').style.display='none';
document.getElementById('email_box').style.display='block';
document.getElementById('btnSUBMIT').value='CHANGE EMAIL';
}else if(sMethod=='user_group'){
document.getElementById('comment_box').style.display='none';
document.getElementById('email_box').style.display='block';
document.getElementById('btnSUBMIT').value='ChangeType';
}
}
function fn_LOAD_EMAIL(iDriverID){
$.get("ajax_data.php", {action: 'load-email', did: iDriverID}, function(data){
if (data=="ERROR"){
$('#Message').html("Error!!! in loading driver email");
}else{
$('#txtemail').val(data);
}
}, 'html');
}
</script>
</head>
<body style="margin: 0px;">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<!--start header -->
<? include('inc_header.php'); ?>
<!-- start side nav -->
<!-- actual page -->
<td>
<table border="0" cellspacing="0" cellpadding="0" width="980">
<tr valign="top" align="left">
<td width="15" height="16"><img src="../assets/images/autogen/clearpixel.gif" width="15" height="1" border="0" alt=""></td>
<td width="1"><img src="../assets/images/autogen/clearpixel.gif" width="1" height="1" border="0" alt=""></td>
<td width="949"><img src="../assets/images/autogen/clearpixel.gif" width="683" height="1" border="0" alt=""></td>
<td width="15"><img src="../assets/images/autogen/clearpixel.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr valign="top" align="left">
<td height="40"></td>
<td colspan="2" width="949">
<table border="0" cellspacing="0" cellpadding="0" width="949" style="background-image: url('../assets/images/banner.png'); height: 40px;">
<tr align="left" valign="top">
<td width="100%">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td class="TextObject" align="center">
<h1 style="margin-bottom: 0px;">DRIVER NOTES & EMAIL CHANGE</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr valign="top" align="left"><td colspan="4"> </td></tr>
<tr valign="top" align="left"><td colspan="4"> </td></tr>
<tr valign="top" align="left">
<td colspan="2"></td>
<td width="1050" class="TextObject" align="center">
<form name="frm1" action="driver_notes_email.php" method="post">
<input type="hidden" name="action" value="add_action" />
<table cellpadding="0" cellspacing="5" border="0" width="800" align="center" class="box">
<tr><td colspan="2" id="Message" width="100%"><?=$sMessage?></td></tr>
<tr>
<td class="label" width="200">Driver:</td>
<td width="800"><? fn_DISPLAY_USERS('drpdriver', 0, "200", "1", "--Select Driver--", "CONCAT(l_name, ' ', f_name) AS user_name", "l_name", $iGROUP_DRIVER.",".$iGROUP_COORDINATOR_STAFF, "fn_LOAD_EMAIL(this.value);");?></td>
</tr>
<tr>
<td class="label">Action:</td>
<td>
<div class="left"><input type="radio" id="opttype" name="optaction" value="ChangeType" onClick="fn_ACTION_METHOD('notes');"/></div>
<span class="label left">Change User Type</span>
<div class="left"><input type="radio" id="optnotes" name="optaction" value="Notes" onClick="fn_ACTION_METHOD('notes');"/></div>
<span class="label left">Add Notes about Driver</span>
<input type="radio" id="optreading" name="optaction" value="Change Email" onClick="fn_ACTION_METHOD('email');"/>
<span class="label">Change Email</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="email_box" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="label" width="200">Email:</td>
<td width="400"><input type="text" id="txtemail" name="txtemail" value="" maxlength="150" style="width:250px;" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="comment_box" style="display:none; width:100%;">
<table cellpadding="0" cellspacing="5" border="0" width="100%">
<tr>
<td class="label" valign="top" width="200">Notes:</td>
<td width="400"><textarea name="txtcomments" id="txtcomments" cols="50" rows="10" style="width:250px;" ></textarea></td>
</tr>
</table>
</div>
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr><td></td><td><input type="button" name="btnSUBMIT" id="btnSUBMIT" value="ACTION" class="Button" onClick="valid_action(this.form);" style="width:150px;" /></td></tr>
</table>
</form>
</td>
<td></td>
</tr>
</table>
</td>
<!-- end actual page -->
<!-- footer -->
<? include('inc_footer.php'); ?>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Look in your html code where the div id equals email_box. This box is already on the page but is hidden. In your javascript you added for the 'change user type' you correctly changed the action button but you are still just showing the email_box div by calling style display = block
You need to add a new div which is hidden by default with a select box in it, and only show it when the radio button is clicked. You will also need to add your php code in to actually update the user when the form is submitted.
My trying to show product desc in pop up. Mean when i click on product link then one pop up will open and show product desc. but here something is wrong. every product link showing first product desc. My code is Below. Please help me out.
Javascript:
<script language="JavaScript">
function displayPopup(alert_MSG)
{
var theDetail = document.getElementById('flyBox');
theDetail.style.display="block";
}
function closePopup(alert_MSG)
{
var theDetail = document.getElementById('flyBox');
if (theDetail.style.display=="block")
{
theDetail.style.display="none";
}
}
</script>
HTML:
View larger
<div id="flyBox" style="display:none;">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="borderWindow">
<div class="container">
<div id="closeButton"><img src="http://i1122.photobucket.com/albums/l523/Long_Islander/flyBoxClose.png" width="28" height="28" alt="Close Button" border="0" /></div>
<div class="content">
<table width="600" border="0" cellspacing="20" cellpadding="0">
<tr>
<td>
<div id="myMessageBox" name="myMessageBox">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="colheadingL"><font color="white">Description</font></td>
</tr>
<tr>
<td ><?php echo $img; ?></td>
<td>Book Name:</td>
<td ><?php echo $row['pname']; ?></td>
<td class="text1">MRP:</td>
<td><?php echo $row['price'];?> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
But pop up is open click on hyperlink. but problem is showing only 1'st record in all product
You don't have loop any in your template script, that is why you see just one record vizualized.
I don't know exactly how your code is organized outside of the snippet you have posted, but assuming your data rows are in $rows array variable, the code will look something like that:
<? foreach($rows as $row) { ?>
<tr>
<td ><?php echo $img; ?></td>
<td>Book Name:</td>
<td ><?php echo $row['pname']; ?></td>
<td class="text1">MRP:</td>
<td><?php echo $row['price'];?> </td>
</tr>
<? } ?>
Try to make IDs of each DIV as Unique.
Below is the sample code, try to use it as per your requirement
<script language="JavaScript">
function displayPopup(id)
{
var theDetail = document.getElementById(id);
theDetail.style.display="block";
}
function closePopup(id)
{
var theDetail = document.getElementById(id);
if (theDetail.style.display=="block")
{
theDetail.style.display="none";
}
}
</script>
<?php for($i=0;$i<4;$i++){?>
<div>
View larger
<div id="flyBox_<?php echo $i;?>" style="display:none;">
<div id="closeButton"><img src="http://i1122.photobucket.com/albums/l523/Long_Islander/flyBoxClose.png" width="28" height="28" alt="Close Button" border="0" /></div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<?php echo "Div ".$i. " Content comes here";?>
</td>
</tr>
</table>
</div>
</div>
<?php }?>
I'm trying to set a form value when mulitple draggable objects are dropped onto a form. Once all the draggables have been dropped, I want to press the submit for a PHP code to do some processing with the form values.
I just can't get the drop event to set the form value????
Here's the JqueryUI stuff..
$(function() {
$( ".player" ).draggable({ revert: "invalid" });
$( ".position" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept:".player",
drop: function( event, ui ) {
var playerid = ui.draggable.attr("id");
var target = $(this).attr("id");
alert(playerid); //this works - got the right draggable id
alert(target); //this works - got the right droppable id
//!!!! THIS DOESN'T SET IT!!!!!
$('#resultform').attr('#target','playerid');
}
});
});
Here is the HTML
<div id="result_space">
<div id="player_list" class="player_list">
<p>This is the player space </p>
<div id="pos_1" class="player">
<p>Player 1</p>
</div>
<div id="pos_2" class="player">
<p>Player 2 </p>
</div>
</div>
<div id="pitch">
<form id="resultform" name="resultform" action="results_submit.php" method="post">
<table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
<tr height="30"> <td colspan="4" align="center" style="color: #FFFF00; font-size: 24px;">stowupland falcons fc</td></tr>
<tr height="80" valign="bottom"><td colspan="4" align="center"><div class="position" id="goalie"> <input type="text" name="goalie" id="goalie" value="Player 1" /></div></td></tr>
<tr height="110" align="center" valign="middle">
<td width="25%"><div id="defence1"><input class="position" type="text" name="r_def_1" id="r_def_1" value="player 2" /></div></td>
<td width="25%"><div class="position" id="defence2"><input type="hidden" name="r_def_2" id="r_def_2" value="player 3" /></div></td>
</table>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
</div>
</div>
So as an example, I want to drag Player 1 (pos_1) to Defence 1 and make the form value r_def_1 = pos_1.
I made a few tweaks to get this to work:
I updated the HTML to make the tds droppable. This seems to work a little bit better. I also changed the colspan attribute of the tds appropriately.
Updated HTML:
<div id="result_space">
<div id="player_list" class="player_list">
<p>This is the player space </p>
<div id="pos_1" class="player">
<p>Player 1</p>
</div>
<div id="pos_2" class="player">
<p>Player 2 </p>
</div>
</div>
<div id="pitch">
<form id="resultform" name="resultform" action="results_submit.php" method="post">
<table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
<tbody>
<tr height="30">
<td colspan="2" align="center" style="color: #FFFF00; font-size: 24px;" class="">stowupland falcons fc</td>
</tr>
<tr height="80" valign="bottom">
<td colspan="2" align="center" class="position">
<div class="" id="goalie">
<input type="hidden" name="goalie" id="goalie" value="Player 1" />
</div>
</td>
</tr>
<tr height="110" align="center" valign="middle">
<td class="position">
<div id="defence1">
<input class="" type="hidden" name="r_def_1" id="r_def_1" value="player 2" />
</div>
</td>
<td class="position">
<div class="" id="defence2">
<input type="hidden" name="r_def_2" id="r_def_2" value="player 3" />
</div>
</td>
</tr>
</tbody>
</table>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
</div>
</div>
JavaScript:
$(function() {
$(".player").draggable({
revert: "invalid"
});
$(".position").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ".player",
drop: function(event, ui) {
var playerid = ui.draggable.attr("id");
$("input", this).val(playerid);
}
});
});
The key is this line:
$("input", this).val(playerid);
which finds the input inside of the droppable td.
CSS (with draggable its useful to limit the width of draggable items):
.player { width: 75px; }
Example: http://jsfiddle.net/z8pWN/
I have this shopping cart page, wherein, it displays the products + price and their quantities
now my problem is, I dunno how to make the total number of items and price updated, once I input a different number of quantity and hit update button
here's my function that "lists" the products based from the $_SESSION data
public function getCartListings(){
if (is_array($_SESSION['cart'])){
foreach($_SESSION['cart'] as $id => $qty){
$query = "SELECT * FROM gg_t_wsproducts WHERE ProductID = $id";
$result = mysql_query($query);
if (!$result){
echo "Couldn't execute query: ".mysql_error();
exit;
}
$product = $this->getProduct($id);
echo '<div class="cart-content">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="20%" align="center" style="vertical-align:top !important;">
<img src="images/shopping-cart/thumb-image.png" />
</td>
<td width="80%" style="vertical-align:top !important;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-bottom:2px solid #c6c6c6; padding-bottom:10px">
<tbody>
<tr>
<td width="60%"><b style="font-size:18px">'.$product["ProductName"].'</b></td>
<td width="20%">Qty <input id="proditem" name="'.$id.'" type="text" style="width:20px; margin:0 0 0 4px;" value="'.$qty.'"></td>
<td width="20%"><span style="font-size:24px; font-weight:bold;">$'.number_format($product['ProductOverridePrice'],2).'</span></td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="50%" valign="bottom" align="left"><br>
<span style="font-size:18px; font-weight:bold;">$'.number_format($product['ProductOverridePrice'],2).'</span><br>
<img src="images/shopping-cart/star.png" /> <img src="images/shopping-cart/star.png" /> <img src="images/shopping-cart/star.png" /> <img src="images/shopping-cart/star.png" /> <img src="images/shopping-cart/star.png" /><br>
<span style="font-size:12px; color:#828282;">14 reviews</span>
</td>
<td width="50%" valign="bottom" align="right">
<a class="removefromcart" name="'.$id.'" id="'.$qty.'" href="#"><img src="images/shopping-cart/remove-item-btn.png" border="0" /></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>';
}//end foreach
}
}
As you can see above, the items are coming from the foreach loop
here's the front-end code that display the actual items
<div id="catalog-wrapper">
<form action="#" method="POST" id="updatecart">
<h1 class="cart-header">ITEMS IN YOUR CART <span style="float:right"><input type="image" name="updatecart" src="images/shopping-cart/update-cart-btn.png" border="0" /> <img style="float:right;" src="images/shopping-cart/continue-shopping-btn.png" border="0" /></span></h1>
<?php $myCart->getCartListings(); ?>
</form>
</div>
and now, here's the "useless" jquery code i have
$('input[name="updatecart"]').click(function(){
var pid = $('input#proditem').attr('id');
var qty2 = $('input[type="text"]').each(function(idx,elem){
});
$.ajax({
type: "POST",
url: "classes/ajax.cartupdate.php",
data: "pid="+pid+"&qty2="+qty2,
success: function(data){
alert(data);
location.reload();
}
});
return false;
});
the ajax PHP code should have been something like this...but am still having a problem with those codes above..not really sure what to do
if ($qty2){
$cart->updateCart($qty2);
$_SESSION['total_items'] = $cart->totalItems($_SESSION['cart']);
$_SESSION['total_price'] = $cart->totalPrice($_SESSION['cart']);
echo "cartUpdated!";
}
Why you are getting multiple variables? Just get one array and explode it on server side with PHP. I mean, create a javascript array and include every input value in it and then send it to PHP. But in your code there will be two array, no problem. It would like this:
pid="1,2,3,4,5,6,7"+&qtty="0,1,1,0,1,1,0"
Get this values with PHP and explode them to "," and do whatever you want with for loop. By the way, if you will reload the page after sending, then why you are using the ajax method?