Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: open

Message Too Old, No Replies

Onclick put that value in form action

in a section from the middle of URL

     
7:50 am on Nov 3, 2013 (gmt 0)

Full Member

5+ Year Member

joined:Dec 27, 2006
posts:311
votes: 0


I have product pages with hex color. www.mysite.com/product/000000/5
000000 = hex color for black
5 = product id from db

On product page i have an input form where users can choose another color with color picker, then script will change color of image through PHP.
After they choose a color (e.g. FFFFFF), they click submit and i need to have this color in form action url.


I know how to do it with POST method (go to processing page and then redirect to www.mysite.com/product/FFFFFF/5), but it takes few seconds more with redirects.

I use JScolor [jscolor.com] open source.

Here is my code

<!-- load color picker, class="color" will trigger color picker -->
<script type="text/javascript" src="http://www.mysite.com/jscolor/jscolor.js"></script>
....

<form method="GET" action="http://www.mysite.com/product/HEX_COLOR_HERE/5">

<input class="color" name="hex_color" size="5" value="">
<input type="submit" value="Go">

</form>


I don't know how to put color code triggered at onclick by class="color" in "HEX_COLOR_HERE" area.

Any help appreciated.
10:09 am on Nov 3, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts:943
votes: 0


This should do you. Just attach on onsubmit event to the form.

For the sake of that small percentage of internet users who still refuse to use JavaScript, I've structured this solution around a server side redirect from post being available.

Gives a better experience for people who have JavaScript enabled as well because they won't get that message "Browser needs to resend data etc" when using the forward/back buttons.

<script type="text/javascript">

function submitColorForm(form) {
// Get the colour from the form, set it to upper case and remove any hashes
var color = form.hex_color.value.toUpperCase().replace(/\#+/g, '');

// Validate it with a regular expression
if(!color.match(/^[A-Z\d]{6}$/)) {
alert('Invalid colour selected');
return false;
}

// Redirect browser with javascript rather than form
window.location.href = 'http://www.mysite.com/product/' + color + '/5';

// Returning false will prevent the natural form submission from occurring
return false;
}

</script>

<!-- load color picker, class="color" will trigger color picker -->
<script type="text/javascript" src="http://www.mysite.com/jscolor/jscolor.js"></script>
....

<!--
form submission has been changed to your old redirect method
to support the annoying few who like to disable JavaScript.
-->
<form onsubmit="return submitColorForm(this);" method="post" action="http://www.mysite.com/redirect_page.php">
<input class="color" name="hex_color" size="5" value="">
<input type="submit" value="Go">
</form>
10:09 am on Nov 4, 2013 (gmt 0)

Full Member

5+ Year Member

joined:Dec 27, 2006
posts:311
votes: 0


Thanks Readie, is working very well!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members