Onclick put that value in form action

in a section from the middle of URL

[rowtc2]

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.

[Readie]

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>

[rowtc2]

Thanks Readie, is working very well!