homepage Welcome to WebmasterWorld Guest from 174.129.103.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Onclick put that value in form action
in a section from the middle of URL
rowtc2




msg:4620842
 7:50 am on Nov 3, 2013 (gmt 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.

 

Readie




msg:4620849
 10:09 am on Nov 3, 2013 (gmt 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>

rowtc2




msg:4621009
 10:09 am on Nov 4, 2013 (gmt 0)

Thanks Readie, is working very well!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved