Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 45
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Need help in making the function thats tied to a...

    I was wondering if someone could help me make this function that's tied to a HTML select work on an <imput type="image">.

    Ideally what I would like to do is tie everything to the <input type="image"> , right now the way the code works is that when I choose yes or no the image on the <img src=""> changes. So basically when I choose yes or no in the select what I would like the image source to change for the <input type="image"> assuming it's possible.

    Ty...

    See my demo page for where I have it working on an img src but not an input which is what I really want.

    Here's the link again to my testing / demo page: http://www.myu2sig.com/stellardonations/buttontype.php

    Now for all of the code that produces what you see on said page.

    Code:
    <script type="text/javascript">
    	function showimage(t){
    		if (!document.images)
    		return;
    		document.images[t.getAttribute("name").replace("select","pics")].src=t.options[t.selectedIndex].id
    	}
    </script>
    
    Regular Image using: < img name="firstpics" src="/stellardonations/paypaldonate.gif"><br />
    <img name="firstpics" src="/stellardonations/paypaldonate.gif">
    
    <br /><br />
    
    Input Image using: < input type="image" src="/stellardonations/paypaldonate.gif" border="0" name="submit" ><br />
    <input type="image" src="/stellardonations/paypaldonate.gif" border="0" name="submit">
    
    		<br /><br />
    		
    		<select name="firstselect" onChange="showimage(this)">
    		<option id="/stellardonations/paypalsubscribe.gif" value="Yes">Yes</option>
    		<option selected="selected" id="/stellardonations/paypaldonate.gif" value="No">No</option>
    		</select>
    		
    		<br /><br />
    		
    		No = Donate<br />
    		Yes = Subscribe
    Last edited by MoreBloodWine; 11-12-2010 at 03:27 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    I *assume* that your <input type=image> is in a <form>, yes?

    So:
    Code:
    <form>
    ...
    <input type="image" src="/stellardonations/paypaldonate.gif" border="0" name="Submit" />
    ...
    <select name="firstselect" onchange="this.form.Submit.src=this.value;">
    <option value="/stellardonations/paypalsubscribe.gif">Yes</option>
    <option selected value="/stellardonations/paypaldonate.gif">No</option>
    </select>
    ...
    </form>
    Some browsers don't allow id's on <option>s. And in any case the code is much easier if you just use value="...the image location...", as you can see.

    Also, you shouldn't name a <form> field "submit" or "action", as that can mess up some scripting (probably not in this case, but a good idea to avoid it). You *and* use "Submit" and "Action", as of course JS is case sensitive.

    If you insist on using ID's in the <option>, then it's only a tiny more code:
    Code:
    <select name="firstselect" 
      onchange="this.form.Submit.src=this.options[this.selectedIndex].id;">
    Okay?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I applied it to the relevant code where it's meant to be used on my site and the outputted image doesn't change for the <input type="image">.

    Check out eojmarket.com and look down the left side and you'll see a donations tracker. What should happen is that when you select yes the Donate button should change to a Subscribe button but it doesn't.

    The tracker code was part of something I paid for and modified as needed so I can't post full files but this is everything you should need to figure out whats going on but like I said ideally what should be happening is that when a user selects Yes the image to submit the form should change to Subscribe and if they change it back to No it should change back to a donate button.

    Anyway, here's that code...

    Code:
    	echo '
    	<script type="text/javascript">
    		function confirmation(){
    			var respConfirmation = confirm(
    		"Please Confirm Before Proceeding !" + 
    		"\n\n" + 
    		"Display Name: " + document.forms["paypal"]["os0"].value + 
    		"\n" + 
    		"Donation Amount: $" + document.forms["paypal"]["amount"].value + 
    		"\n" +
    		"Repeat this Donation Monthly: " + document.forms["paypal"]["firstselect"].value +
    		"\n\n" + 
    		"Click Ok to Proceed or Cancel to Make Changes."
    			);
    		if (respConfirmation == true){
    		return true;
    			}else{
    		return false;
    		}
    	}
    
    	function showimage(t){
    		if (!document.images)
    		return;
    		document.images[t.getAttribute("name").replace("select","pics")].src=t.options[t.selectedIndex].id
    	}
    	</script>
    ';
    
    	global $context;
    	
    	$br = strtolower($_SERVER['HTTP_USER_AGENT']);
    
    	if(ereg("msie", $br)) {
    			if ($test_ipn == 1) {
    		echo '
    		<form name="paypal" style="display: inline;" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" onSubmit="return confirmation()">
    		<hr width="75%" />
    		<P class="stellarwebsolutions" style="padding: 0px 0px 4px 0px; line-height: 16px;" align="left">
    		Display Name: <input type="text" name="os0" value="'.$context['user']['name'].'" maxlength="25" style="vertical-align: middle; color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 58.5%;">
    		<input type="hidden" name="on0" value="Username">
    		Donation Amount: $<input type="text" name="amount" value="0.00" maxlength="25" style="vertical-align: middle; color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 45%;">
    		Repeat this Donation Monthly: 
    		<select name="firstselect" onchange="this.form.Submit.src=this.options[this.selectedIndex].id;">
    		<option id="./U2Signatures//stellardonations/paypalsubscribe.gif" value="Yes">Yes</option>
    		<option selected="selected" id="./U2Signatures//stellardonations/paypaldonate.gif" value="No">No</option>
    		</select>
    		</P>
    	';
    	} else {
    		echo '
    		<form name="paypal" style="display: inline;" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onSubmit="return confirmation()">
    		<hr width="75%" />
    		<P class="stellarwebsolutions" style="padding: 0px 0px 4px 0px; line-height: 16px;" align="left">
    		Display Name: <input type="text" name="os0" value="'.$context['user']['name'].'" maxlength="25" style="vertical-align: middle; color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 58.5%;">
    		<input type="hidden" name="on0" value="Username">
    		Donation Amount: $<input type="text" name="amount" value="0.00" maxlength="25" style="vertical-align: middle; color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 45%;">
    		Repeat this Donation Monthly: 
    		<select name="firstselect" onchange="this.form.Submit.src=this.options[this.selectedIndex].id;">
    		<option id="./U2Signatures//stellardonations/paypalsubscribe.gif" value="Yes">Yes</option>
    		<option selected="selected" id="./U2Signatures//stellardonations/paypaldonate.gif" value="No">No</option>
    		</select>
    		</P>
    	';
    	}
    	} else {
    			if ($test_ipn == 1) {
    		echo '
    		<form name="paypal" style="display: inline;" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" onSubmit="return confirmation()">
    		<hr width="75%" />
    		<P class="stellarwebsolutions" style="padding: 0px 0px 4px 0px; line-height: 16px;" align="left">
    		Display Name: <input type="text" name="os0" value="'.$context['user']['name'].'" maxlength="25" style="color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 59.5%;">
    		<input type="hidden" name="on0" value="Username">
    		Donation Amount: $<input type="text" name="amount" value="0.00" maxlength="25" style="color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 46%;">
    		Repeat this Donation Monthly: 
    		<select name="firstselect" onchange="this.form.Submit.src=this.options[this.selectedIndex].id;">
    		<option id="./U2Signatures//stellardonations/paypalsubscribe.gif" value="Yes">Yes</option>
    		<option selected="selected" id="./U2Signatures//stellardonations/paypaldonate.gif" value="No">No</option>
    		</select>
    		</P>
    	';
    	} else {
    		echo '
    		<form name="paypal" style="display: inline;" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onSubmit="return confirmation()">
    		<hr width="75%" />
    		<P class="stellarwebsolutions" style="padding: 0px 0px 4px 0px; line-height: 16px;" align="left">
    		Display Name: <input type="text" name="os0" value="'.$context['user']['name'].'" maxlength="25" style="color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 59.5%;">
    		<input type="hidden" name="on0" value="Username">
    		Donation Amount: $<input type="text" name="amount" value="0.00" maxlength="25" style="color: #FFFFFF; background-color: transparent; border: 1px solid; border-color: #9E853D; padding: 0px 0px 0px 1px; font-size: 10px; width: 46%;">
    		Repeat this Donation Monthly: 
    		<select name="firstselect" onchange="this.form.Submit.src=this.options[this.selectedIndex].id;">
    		<option id="./U2Signatures//stellardonations/paypalsubscribe.gif" value="Yes">Yes</option>
    		<option selected="selected" id="./U2Signatures//stellardonations/paypaldonate.gif" value="No">No</option>
    		</select>
    		</P>
    	';
    	}
    	}
    	?>
    	<input type="image" src="./U2Signatures/stellardonations/paypaldonate.gif" border="0" name="submit">
    	</form>
    Ps; The reason I'm using ID's is because of the alert / confirmation that comes up when the user submits the form. If I use values the full image paths are printed in the message vs Yes or No like I have in the values now.

    Edit: I would ask that anyone helping please reply in a find this and replace with this manner given the amount of code and what should be a small fix / hack.
    Last edited by MoreBloodWine; 11-12-2010 at 02:05 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    Well, I will be durned. I never knew that an image button can't be referenced by name like that.

    My fix is simple. Give it an id.
    Code:
    <select name="firstselect" onchange="document.getElementById('ppimg').src=this.options[this.selectedIndex].id;">
    	<option id="http://www.eojmarket.com/U2Signatures/stellardonations/paypalsubscribe.gif" value="Yes">Yes</option>
    	<option selected="selected" id="http://www.eojmarket.com/U2Signatures/stellardonations/paypaldonate.gif" value="No">No</option>
    </select>
    ...
    <input type="image"  name="submit" id="ppimg"
           src="http://www.eojmarket.com/U2Signatures/stellardonations/paypaldonate.gif" border="0">
    You don't have to have the full image urls in there. I just put them there so I could test it locally on my machine.

    My head hurts. Very strange! And for once, FF and MSIE agreed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I could kiss you lol, looks like were golden.

    The input image now change based on the selects value !

    +1

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I had this marked as solved but I actually was wondering if it would be possible to take this one step further. Would it be possible to modify the below function in a way that based on the select value the following function is used when the form submits ?

    function printDonationButton($item_number,$comments=0)
    {
    global $currency_code;
    global $site_cert_id, $site_sandbox_cert_id;
    global $business, $use_encryption;
    global $global_anonymous, $notify_url, $return, $test_ipn;

    $hash = array('cmd' => '_xclick',
    'business' => $business,
    'cert_id' => $site_cert_id,
    'currency_code' => $currency_code,
    'item_name' => 'Donation for eojmarket.com',
    'item_number' => $item_number,
    'notify_url' => $notify_url,
    'return' => $return,
    //'lc' => 'US',
    );

    That's the normal function used for regular donations which should be tied to No / Donate button. Well, when Yes is selected and the Subscribe button / image is shown the function used should be a different one which I'm still trying to figure out since changing _xlick to _s-xclick doesn't work and AFAIK _s-xclick is used for subscriptions.

    If I need to provide more code I can but it would have to be with a singular dedicated person via PM who knows what their doing. I only say that because I can share full files but again it would have to be with a singular dedicated person.

    Preferrably Old Pedant.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    ??? Sorry, I don't get that.

    When the form submits, it goes directly to paypal. It says so:
    Code:
    <form ... action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" ...>
    So how can "the following function is used when the form submits" if the form submits to PayPal and not to your site???

    Or are you talking about this:
    Code:
    <input type="hidden" name="notify_url" value="http://www.myu2sig.com/stellardonations/smf-ipn.php">
    ???

    That is, the page that PayPal goes to after the donation is processed?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    As far as I understand it when the form submits it goes to PayPal but runs that function before leaving the site. If I understand the way this tracker works it uses the function to tell what information gets passed to PayPal. So ya, I think before it leaves my site it runs that function.

    Either way to simplify what I'm asking... is it possible to write in PHP / JS or whatever a statement that says if the selected value on the drop box reads Yes run function a else run function b.

    I could be wrong in how this tracker works but it's work a shot.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    when the form submits it goes to PayPal but runs that function before leaving the site
    I don't see how. You could only do that by using a document.unload that would invoke the PHP code via AJAX or similar. And then the PHP code couldn't possibly affect the <form> contents that are POSTed to PayPal.

    I think that code does just what it says: It prints the PayPal donate button on your Web page for you.

    Yeah...looking at it closer, it's obvious that's exactly what it does.

    So you want it to change from _xlick to _s-xclick and back? Trivial.

    Code:
    <select name="firstselect"
     onchange="document.getElementById('ppimg').src=this.options[this.selectedIndex].id;
               this.form.cmd.value=this.selectedIndex==0?'_s-xclick':'_xclick';">
    But why stop there?
    Code:
    <select name="firstselect"
     onchange="document.getElementById('ppimg').src=this.options[this.selectedIndex].id;
               this.form.cmd.value=this.selectedIndex==0?'_s-xclick':'_xclick';
               this.form.item_name.value=this.selectedIndex==0?'Subscription for eojmarket.com':'Donation for eojmarket.com';" >
    But don't do that last one if it messes up the tracking, of course.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I don't see how. You could only do that by So you want it to change from _xlick to _s-xclick and back? Trivial.
    Ya, I pretty much want to change the _xclick to _s-xclick if Yes is chosen in the select since as I understand it _s-xclick is what PayPal uses for the subscription process. I'm sure there's more to it than that but I wont know until I / we figure the bit out about changing _xclick ot _s-xclick is Yes is selected on the drop box and then using _xclick by default or switching back ot it should a user choose Yes and then change it back to no which is the selects default value. The function is what tells paypal to grab or some thing so I don't really know... at this point aside from passing you full files to look at this is more of a hunt and peck thing I guess.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    Ummm...

    I wont know until I / we figure the bit out about changing _xclick ot _s-xclick is Yes is selected on the drop box ...
    And in what way does the code I just showed you *NOT* do that???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm...


    And in what way does the code I just showed you *NOT* do that???
    Sorry if I made it sound like it didn't, I was just saying ya that's what I wanted it to do heh.

    Also, it would appear that it does work but I get the following error when processing with _s-xclick so there must be info missing from the function or something for it to process as a subscription instead of a regular donation.

    Some required information is missing or incomplete. Please correct your entries and try again.

    To fix this problem I'll have to go to the codes author to figure this out since I don't know what would be missing that PayPal's looking for to process as a subscription.

    Also, for arguments sake whats the "and why stop there" code do ? I didn't plug it in because you said it could cause issues with the tracker which it may very well do but since I have it in Sandbox mode I could just plug n play it to test.

  • #13
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I see what the other code does now heh, sorry if I seem dumb today... had a long day and lack of sleep the past week. Changing the item number wont hurt it because that's for the end users benefit. So I have to thank you for that touch, I never even considered that but really like it ;-)

    So +1 again for you in my book ;-)

    Either way it looks liek I'm golden now except for the error I get at PayPal when I try to process with _s-xclick that says something about missing info. I'll get to the code author and see what they have to say.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    I suspect that PayPal expects info about the number of months/weeks/years that the subscription is to run when you tell it you want a subscription.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Regular Coder
    Join Date
    Nov 2010
    Posts
    204
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I suspect that PayPal expects info about the number of months/weeks/years that the subscription is to run when you tell it you want a subscription.
    That actually could very well be the case because I recall when playing around with buttons when I was looking for images it asked what sort of subscription I wanted. In the case of my site it would be a month to month thing until the user cancels it. I still wouldn't know how to code that missing info. In any case I sent a mail off to the codes author asking if they knew what was missing. But I'll bring that up when they get back to me since I think that may very well be the case of the error.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •