Geek Answers Handbook

JS / Ajax: submit the form without refreshing the page or click the button

I am trying to submit a form without clicking a button or refreshing the page. As soon as the form is submitted, I will answer the value in the input field via php. The problem is that I added a timer but am not doing anything. How can I set a timer after the user stops typing, give two seconds (keyup), and then take this value? EXAMPLE

Js

<script> $(function() { var timer; $(".submit").click(function() { $('submit').on('keyup', function() { var name = $("#name").val(); var dataString = 'name='+ name; $.ajax({ type: "POST", url: "index.php", data: dataString, success: function(result){ /*$('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide();*/ $('#special').append('<p>' + $('#resultval', result).html() + '</p>'); } }); return false; }); }, 2000; }); </script>

Php

  <?php if($_POST){ $url = $_POST['name']; echo ('<b><span id="resultval">'.$url.'</span></b>'); } ?>
+4
source share
2 answers

http://jsfiddle.net/earlonrails/pXA6U/2/

 $(function() { var timer = null; var dataString; function submitForm(){ alert("success"); $.ajax({ type: "POST", url: "index.php", data: dataString, success: function(result){ alert("success"); } }); return false; } $('#submit').on('keyup', function() { clearTimeout(timer); timer = setTimeout(submitForm, 2000); var name = $("#name").val(); dataString = 'name='+ name; }); });

+4
source

I use the following to provide the auto-refresh page with a visual timer. It does more than you need, but you can throw it away for something simpler.

Run it when the page loads with

 auto_refresh();

Auxiliary functions below

 /** * This function checks if the auto-refresh check box is checked and then refreshes the page. * * */ function auto_refresh() { // **************************************** // Countdown display // **************************************** $("#countdown").progressbar({ value: 100 }); check_refresh(120, 120); $("#autorefresh").click(function() { if ($(this).attr("checked") == "checked") { $("#countdown").progressbar("option", "disabled", false ); $("#countdown").progressbar("option", "value", 100); check_refresh(120, 120); } }); }

A...

 /** * This functions sets the time interval used to auto-refresh the page. */ function check_refresh(countdownValue, secondsRemaining) { var autorefresh = $("#autorefresh"); if ($(autorefresh).attr("checked") == "checked") { setTimeout(function() { var value = Math.round(secondsRemaining / countdownValue * 100); // consoleDebug("Seconds remaining: " + secondsRemaining); secondsRemaining -= 10; $("#countdown").progressbar("option", "value", value); if (secondsRemaining < 0) { loadDashboard(); // <--- Launch whatever you want here. check_refresh(120, 120); } else { check_refresh(countdownValue, secondsRemaining); } }, 10000); } else { $("#countdown").progressbar({ disabled: true }); } }
+2
source

More articles:


All Articles