I am trying to figure out how I can make my form submit load the results of the desired field into the existing page instead of refreshing, I have this segment.
<form action="post.php" method="post">
<div class="form-group">
<select class="form-control" id="inputState" name="inputState" style="width: 100%">
<option selected>
Choose...
</option>
<option value="account">
The Accounts
</option>
<option value="cape">
The Capes
</option>
</select>
</div><input type="submit">
</form>
The above code works flawlessly other than the fact that it opens a new url, I am wondering how I can load this php on the same page after submitting the form.
print $our_submit = $_POST["inputState"];
I've looked over all the posts related to AJAX but for my example, I've not been able to get anything to work.. thanks in advance for help, still new to this.
try with below code and remove action name like action=""
if(isset($_POST["inputState"])){
$our_submit = $_POST["inputState"];
print_r($our_submit);
}
In form action like action="<?php echo $_SERVER['PHP_SELF'];?>"
if(isset($_POST["inputState"])){
$our_submit = $_POST["inputState"];
print_r($our_submit);
}
Try to submit then you get form data
If you don't want to refresh the page after form submission, you needt to send your date with AJAX.
The simple way is using Jquery
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="post.php" method="post">
<div class="form-group">
<select class="form-control" id="inputState" name="inputState" style="width: 100%">
<option selected>
Choose...
</option>
<option value="account">
The Accounts
</option>
<option value="cape">
The Capes
</option>
</select>
</div>
<input type="submit" class="send-data">
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
$('.send-data').click(function(e) {
e.preventDefault();
var url = $('form').attr('action');
var data = {
'inputState' : $('#inputState').val()
};
if (data.inputState != '') {
$.post(url, data, function(Response) {
// Work if your response here
console.log(Response);
});
}
});
});
</script>
</body>
</html>
PHP Code
<?php
if (isset($_POST['inputState']) && !empty($_POST['inputState'])) {
echo $_POST['inputState'];
return true;
}
echo 'Please Choose a state ...';
?>
Related
Full Question: I want to log the value of each field (email address & select menu) to the console in the browser. I have made an attempt for this below but it does not seem to work. Any help would be much appreciated!
Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopify Frontend Developer Intern</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<script>
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('email').value);
}
function myFunction() {
logOptions();
logEmail();
}
</script>
<!-- <div class="input form"> -->
<form id="inputform" method="get" action="confirmation.html">
<input id="email" type="email" placeholder="Email Address" required>
<button type="submit" id="validate" onsubmit="myFunction()">Sign up now</button>
<select name="Interests" required>
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
I have two dropdowns with the data in the second dropdown dependent on what is selected in the first dropdown. I'm using Ajax/JQuery and it works fine if I comment out the include file that has my site template code for the sidebar of every page on my site. With that include file in the code though, it doesn't work. Instead of populating the second dropdown, it has an empty list. When I inspect the element using the browser's development tools, the code from the the head tag is being replicated there instead of the code populating the list options. So I guess my question is if there is some potential conflict between HTML, PHP, and Ajax/JQuery? I should also note that even if I place all the HTML in the file instead of calling the include library for the sidbar, it still behaves in the same manner.
Here is the ajax2.js...
$(document).ready(function() {
$("#country").change(function() {
var country_id = $(this).val();
if(country_id != "") { $.ajax({
type:"POST",
url:"sample.php",
data:{c_id:country_id},
success:function(response) {
var resp = $.trim(response);
$("#state").html(resp);
}
});
} else {
$("#state").html("<option value=''>------- Select --------</option>");
}
});
});
Here is the Ajax/JQuery source files from the head tag...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
And finally, here is the HTML with the code for the two dropdowns (sample.php)...
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>Sample</title>
<link href="../../sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
</head>
<body>
<?php include("../includes/sidebar.php"); ?><?php
//MySql DB Info
include("../includes/db_connect7.php");
if (isset($_POST['c_id'])) {
$title = mysql_real_escape_string($_POST['c_id']);
echo "title = $title";
$sql = "select * from TW_Picks where title='$title'";
$res = mysql_query($sql);
if(mysql_num_rows($res) > 0) {
echo "<option value=''>------- Select --------</option>";
while($row = mysql_fetch_assoc($res)) {
echo "<option value=\"$row[name]\">$row[pick]</option>";
}
}
} else {
?>
<div align="center">
<font face="Verdana, Arial, Helvetica, sans-serif" size="5"><strong>SAMPLE</strong></font> </div>
<p> </p>
<center>
<form action="<?php echo $PHP_SELF ?>" method="post">
<br><br>
<select name="country" id="country">
<option>Select Fed</option>
<option value="USA">USA</option>
<option value="CAN">CAN</option>
<option value="MEX">MEX</option>
</select>
<br><br>
<select name="state" id="state">
<option>Select Title</option>
</select>
<br><br> <br><br><br>
<input name="addnew" type="submit" value="Add New">
<br><br>
</form>
</center>
<?php
} ?>
<br><br><br><br><br><br><br>
<p> </p>
</body>
</html>
The sample.php file also includes the header file. When you fetch sample.php using jQuery, it send back the header code as well. Make your your sample.php file only returns required HTML.
if (isset($_POST['c_id'])) {
// what you are doing here should work okay
} else {
// Put the includes here
include("../includes/sidebar.php");
}
i try to submit some basic data to a PHP script via GET.
Two of my 5 values are populated by a JqueryUI datepicker.
When I check those two input-fields via alert, they show up correctly, however they don't get passed to the PHP script on submit.
Code: JSFiddle
index.php - Note: the addHourOptions() php functions just add some select <option>-fields, nothing fancy.
<?php
include('inc/functions.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Filter</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/main.js"></script>
<!--<script language="javascript" type="text/javascript" src="ajax/ajax.js"></script>-->
</head>
<body>
<form id="filter" action="filter.php" method="GET">
<label for="date-from">
from Date: <input id="date-from" type="text" />
</label>
<label for="date-to">
to Date: <input id="date-to" type="text" />
</label>
<label for="time-from">from Time:
<select id="time-from" name="time-from" size="1">
<?php addHourOptions(); ?>
</select>
</label>
<label for="time-to">to Time:
<select id="time-to" name="time-to" size="1">
<?php addHourOptions(); ?>
</select>
</label>
<label for="corps">Corporation:
<select id="corps" name="corps" size="1">
<option value="98256608">Scroll Lock.</option>
<option value="955058602">German Angels</option>
<option value="98323502">Rat der 66er</option>
<option value="98183461">Girl Friends Please Ignore</option>
<option value="98371266">Know your Role</option>
</select>
</label>
<button type="submit" id="filterButton">Filter</button>
<button type="button" id="debug">Debug</button>
</form>
</body>
</html>
main.js
//initialize datepicker: yy-mm-dd / yesterday
$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional[''])
);
$('#date-from').datepicker({dateFormat: 'yy-mm-dd'}).datepicker("setDate", -1);
$('#date-to').datepicker({dateFormat: 'yy-mm-dd'}).datepicker("setDate", "TODAY");
});
// set defaults for time timespan-dropdowns
$(function() {
$('#time-from option[value="19:00"]').attr("selected",true);
$('#time-to option[value="23:59"]').attr("selected",true);
});
$('#debug').click( function() {
alert($('#date-from').val() + " " + $('#date-to').val());
}
filter.php - only displays _GET variables for now, no logic
<?php
foreach($_GET as $key => $param){
echo $key . " => " . $param . "<br />";
}
?>
So there should be 5 lines in the output of filter.php,
one for each form-value. But there are only 3.
Example Output:
time-from => 19:00
time-to => 23:59
corps => 98256608
Can someone please tell me why the two input-fields that contain
my dates just don't get submitted with the rest of the form?
Thanks in Advance
EDIT: I used the search here, and read many questions and answers about it, but nothing seemed to work for me.
<label for="date-from">
from Date: <input id="date-from" type="text" name="date-form" />
</label>
<label for="date-to">
to Date: <input id="date-to" type="text" name="date-to" />
</label>
Create name attribute for them and I think your problem is solved.
I want to add a form with javascript and want to use this code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="afbeelding1" class="afbeelding">
<form>
<input type="checkbox" onclick="addOrRemoveSpecifications()">
</form>
<img src="afbeelding1.jpg">
</div>
</body>
<script>
function addOrRemoveSpecifications(){
var div = document.getElementById("afbeelding1").firstchild;
div.innerHTML=div.innerHTML +
'
<form>
<select>
<option value="320x200">320x200
<option value="1024x768">1024x768
<option value="1920x1200">1920x1200
</select>
<select>
<option value="Canvas">Canvas
<option value="Hout">Hout
<option value="Digitaal">Digitaal
</select>
</form>
';
}
</script>
</html>
can anybody help me with this?
thank you in advance, you guys are awesome :)
simply use jquery or equivalent
myform = '<form ...';
$('afbeelding1').append(myform);
There are two ways depending what you want.
First Method
1.Add the form in your HTML itself where you want it.
2.Set the css :display of that form as none.
3.Use the JavaScript function to change the display from none to block.
function addOrRemoveSpecifications() { documentgetElementById("form").style.display="block"; }
Second Method:
Use the following to create your form :-
1.createElement
2.appendChild
.
For Example:http://jsfiddle.net/rvs4oq6p/
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?
You 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.com/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