liomon41 Posted November 22, 2011 Share Posted November 22, 2011 i have a form with two buttons, one is for submitting the form while button is for generating a random a code and placing it in a textfield. this works fine but the problem is anytime i click on the generate button, it refreshes the page thereby validating the form , which i don't want. How do i make it perform the function without refreshing the page.... Quote Link to comment Share on other sites More sharing options...
Fadion Posted November 22, 2011 Share Posted November 22, 2011 If it's a submit button inside the form, it will always submit the form. You have to use an <input type="button"> or a <button> and handle the event with Javascript. I would suggest you generate the code with Javascript (directly with JS code or with an AJAX call) too, so the page doesn't get refreshed at all. jQuery would help on it a lot. If you want help with code, just ask. Quote Link to comment Share on other sites More sharing options...
Fadion Posted November 22, 2011 Share Posted November 22, 2011 I'm posting directly two solutions to your problem. 1) Using Javascript to generate a random code. Not sure what type of code it is, but I assumed it's a simple rand(min, max). It can be worked on if you know a bit of JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#code-button').click(function(){ random = generateRandom(1000, 10000); $('#code').val(random); return false; }); /* ** From Mozilla Developer Center ** https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/random */ function generateRandom (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } }); </script> </head> <body> <form method="post"> <input type="text" name="code" id="code"><br> <input type="text" name="email"><br> <input type="text" name="mobile"><br> <button type="submit">Send Form</button> <button id="code-button">Generate Code</button> </form> </body> </html> 2) Using Javascript once again, but this time the code is generated by PHP and the response is fetched with AJAX. It's practically the same thing, as I've used rand() to generate the code, but it may suit your case better depending on the complexity of the generated code. I just changed the Javascript a bit and left the HTML code from above intact. $(document).ready(function(){ $('#code-button').click(function(){ $.get('generate_code.php', function(data) { $('#code').val(data); }); return false; }); }); generate_code.php, which gets called by Javascript has just one line of code: <?php echo rand(1000, 10000); ?> Hope this helps. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.