here is my html code.....
<!DOCTYPE html>
<html>
<title>Plot</title>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script>
function refilter()
{
var ch = document.getElementById('Choice').value;
//do something
}
</script>
</head>
<body>
<form action="save.php" name="myform" method="POST">
Select any station:<select id="Choice" name="choice">
<option value="None">Select</option>
<option value="option1">DELHI</option>
<option value="option2">MUMBAI</option>
</select>
<input type="button" onclick="refilter()" value="Submit!">
</form>
</body>
</html>
I wish to do two things:
1.save the "choice" entered by user, since I have to do further task using it and
2.call the "refilter" function.
As of now, I tried using php and store the "choice" in a text file but for that i need to change "input type=submit" and if I do so,
1.The function is not called.
2.the save.php file opens up, which i dont want. I wish to stay on the html page only.
I am a beginner to javascript and html and knew a little php, so tried my hand at that.
Is there anyway I can do both the tasks together?
here is my html code.....
<!DOCTYPE html>
<html>
<title>Plot</title>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script>
function refilter()
{
var ch = document.getElementById('Choice').value;
//do something
}
</script>
</head>
<body>
<form action="save.php" name="myform" method="POST">
Select any station:<select id="Choice" name="choice">
<option value="None">Select</option>
<option value="option1">DELHI</option>
<option value="option2">MUMBAI</option>
</select>
<input type="button" onclick="refilter()" value="Submit!">
</form>
</body>
</html>
I wish to do two things:
1.save the "choice" entered by user, since I have to do further task using it and
2.call the "refilter" function.
As of now, I tried using php and store the "choice" in a text file but for that i need to change "input type=submit" and if I do so,
1.The function is not called.
2.the save.php file opens up, which i dont want. I wish to stay on the html page only.
I am a beginner to javascript and html and knew a little php, so tried my hand at that.
Is there anyway I can do both the tasks together?
Share Improve this question asked Mar 19, 2015 at 11:57 itzcutiesushitzcutiesush 892 silver badges10 bronze badges 1- research submitting form using ajax, will find lots of tutorials – charlietfl Commented Mar 19, 2015 at 12:02
2 Answers
Reset to default 3You can do following with your code:
<!DOCTYPE html>
<html>
<title>Plot</title>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script>
<script>
window.onload = function() {
document.getElementById('test').onclick = function(event) {
document.getElementById('myform').submit();
// Do somthing
}
}
</script>
</script>
</head>
<body>
<form action="save.php" name="myform" id="myform">
Select any station:<select id="Choice" name="choice">
<option value="None">Select</option>
<option value="option1">DELHI</option>
<option value="option2">MUMBAI</option>
</select>
<input type="button" value="Submit!" id="test">
</form>
</body>
</html>
or you can follow: http://www.formget./form-submission-using-ajax-php-and-javascript/
Thanks.
The problem is that you want to have both the default behavior as well as your custom behavior.
Here's a simple solution you can try.
<form action="save.php" name="myform" method="POST" id="myform">
<input type="button" id="submit-btn" value="Submit" />
In javascript,
window.onload = function() {
document.getElementById('submit-btn').onclick = function(event) {
event.preventDefault();
refilter();
document.getElementById('myform').submit();
}
}
This will redirect the page to save.php anyway. If you don't want that, you can send a POST request via AJAX. Please find more about AJAX and post if you still face problems