I have a radio button and a submit button. On click of this submit button, I need to display a div.
My code is as follows:
<form action="" method="GET" name="myform">
<input type="radio" name="ID" value="total" id="radioInputValue"/>
<input type="submit" name="details1" value="Details"
onclick="return showDiv();"/>
<div id="element_to_pop_up" style="display: none;">
<?php
echo "DETAILS";
if (isset($_GET['details1'])) {
if (isset($_GET['ID'])) {
$n = $_GET['ID'];
echo "VALUE IS = $n";
}
} else {
echo "</br> DETAILS FAILED";
}?>
</div>
</form>
My JavaScript:
function showDiv() {
document.getElementById('element_to_pop_up').style.display = 'block';
return false;
}
Style:
#element_to_pop_up
{
background-color:#fff;
border-radius:15px;
color:#000;
padding:20px;
min-width:400px;
min-height: 180px;
}
I am getting the div on click of the details button. But its not entering the if condition .
Instead its giving the output as:
DETAILS
DETAILS FAILED
I want this as my output:
DETAILS
VALUE IS = total
How can i get this radio button value on clicking submit button, Plz help
just copy paste it: it works fine..
<form action="" method="POST" name="myform">
ONE<input type="radio" name="ID" value="total" id="radioInputValue" />
<input type="submit" name="details1" value="Details" onclick="return showDiv();" />
</form>
<div id="element_to_pop_up">
<?php
echo"DETAILS";
if(isset($_POST['details1']))
{
if(isset($_POST['ID']))
{$n=$_POST['ID'];
echo "VALUE IS = ".$n;
}
else
{
echo"</br> DETAILS FAILED";
}
}
?>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
function showDiv() {
document.getElementById('element_to_pop_up').style.display = 'block';
// return false;
}
</script>
Change your submit button like this:
<input type="submit" name="details1" value="Details" onclick="showDiv()" />
When you click your button, it displays the div.
Your PHP code should work, but make sure the file is .php and not .html or .htm.
Related
I have a little problem. Why do I have to click twice on my submit button before my js script run? I want that when I click the button the data are send, and the js script runs without click again
This is my page:
<html>
<head>
<script src="js-scripts.js"></script>
<style>
.content {
max-width: 600px;
margin: auto;
}
.test{
width:200px;
text-align: center;
}
</style>
</head>
<body>
<div class="content" id="tot-op">
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<center>
<div class="content" id="tot-op">
<fieldset>
<input type="number" min="1" max="7" name="num" required>
<br><br>
<input type="submit" value="Invia" onclick="hide()">
</fieldset>
</div>
</center>
</form>
</div>
<div id="insert" style="display:none">
<?php
$test=$_POST["num"];
echo $test;
?>
</div>
</body>
</html>
And this is my script:
function hide(){
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
}
What can I do?
Add an id attribute to your form like:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" id="test-form">
Change your button definition to:
<input type="button" value="Invia" onclick="hide()">
and then, inside your hide() add the form submit action like:
function hide()
{
document.getElementById("test-form").submit();
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
}
You can always break out of php and run javascript code or manipulate HTML using conditional blocks. Below the <script> tag will be added to the document only if condition returns true.
It is similar to echo "<script>...</script>".
So, your form data gets handled and also the Javascript code runs the
way you want it.
<?php
if( isset($_POST["sButton"]) ) //I had done a mistake here
{ //start if
//close php and add script which will run only if the variable $_POST["num"] is set
?>
<script>
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
</script>
<?php
//start php again and complete the if block
$test=$_POST["num"];
echo $test;
} //end of if block
?>
Set a name for your submit button. I have used sButton here and use
if( isset($_POST["sButton"]) ). I made changes above and remove onclick. It is not required here.
<input type="submit" name="sButton" value="Invia">
im trying to change the border if the user has leave the input empty after posting
well, i have tried:
<script>
function required (id) {
document.getElementById(id).style.border = "#FF0000 5px inset";
}
</script>
<form method="post">
<input type='text' id='req' name='t'>
</form>
<?
if ($_POST)
if (isset($_POST['t']))
echo "u've done";
else
echo "<script>required('req');</script>";
?>
Change your PHP code to the following:
<?php // <- no short tag
if ($_POST) { // <-- add brackets
if (isset($_POST['t']))
echo "u've done";
else
echo "<script>required('req');</script>";
} // <-- add brackets
?>
My solution with javascript :
HTML :
<form method="post" id="form1">
<input type='text' id='req' name='t'>
</form>
<button type="submit" form="form1" value="Submit" onclick="myFunction()">Submit</button>
JAVASCRIPT :
function myFunction() {
if (document.getElementById("req").value == '') {
event.preventDefault();
required("req");
} else {
alert("pas vide");
}
}
function required(id) {
document.getElementById(id).style.border = "#FF0000 5px inset";
}
CodePen
I think that i got a better approach:
<form method="post">
<input type='text' id='req' name='t' <?php if(!$_POST['t']): ?>class='required-input'<?php endif;?>>
</form>
Then in you put the "#FF0000 5px inset" in your css, creating the class "required-input" or whatever.
No intrusive scripts in your code!
I would like to update the content of #contentRight when either editForm-1 or editForm-2 is submitted with the submitted form values.
I can get the response output from the updateDB.php file and see it at the
alert("Data: " + theResponse + "\nStatus: " + status);
However it does not update the div content with either of the following 2 lines.
$("#contentRight").html(theResponse);
document.getElementById("contentRight") = theResponse;
[EDIT-------------]
I added some styles to see what element is occupying what space. If you click on #saveEdit-1 (which is the element with the blue border) The script works as it supposed to. When you click on the #saveEdit-1 button element (which is the arrow) the div does not get updated. WHY?
Here is the working example
if I change the click listeners to
$("#saveEdit-1 button").click(function(){ performAjaxSubmission(1); });
$("#saveEdit-2 button").click(function(){ performAjaxSubmission(2); });
it still does not work. Working Example
[/EDIT-------------]
Any help would be greatly appriciated.
Here are the files.
<?php require_once("includes/functions.php"); ?>
<!DOCTYPE html>
<html>
<head>
<style>
#editForm-1, #editForm-2 {
border:1px solid red;
}
#saveEdit-1, #saveEdit-2 {
border:2px solid blue;
}
#saveEdit-1 button, #saveEdit-2 button {
border:3px solid green;
}
</style>
<link href="/test/stylesheets/_appStyleAdmin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascripts/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="javascripts/jQuery-UI/jquery-ui.min.js"></script>
<script type="text/javascript">
function performAjaxSubmission(formID) {
// alert(formID);
var page = "edit-Test";
var URL = "http://310it.com/test/updateDB.php?page=" + page;
var formData = $("#editForm-" + formID).serialize();
// alert(formData);
$.post(URL , formData, function(theResponse){
alert("Data: " + theResponse + "\nStatus: " + status);
$("#contentRight").html(theResponse);
// $("#contentRight").text(theResponse);
// document.getElementById("contentRight") = theResponse;
// document.getElementById("contentRight").innerHTML(theResponse);
});
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#saveEdit-1").click(function(){ performAjaxSubmission(1); });
$("#saveEdit-2").click(function(){ performAjaxSubmission(2); });
});
</script>
</head>
<body>
<div id="contentRight">
<p>AJAX Response will be displayed here.</p>
<p> </p>
<span></span>
</div><!-- endof contentRight -->
<form id="editForm-1" name="editForm-1" method="post" action="">
<input type="hidden" name="action" id="action" value="edit">
<input type="hidden" name="formID" id="formID" value="1">
<div class="addNewItem-InputField">
<p>Edit Test - 1</p>
<label for="editTestName"><input type="text" name="editTestName" id="editTestName" /></label>
</div><!-- endof addNewItem-InputField -->
<div id="saveEdit-1" name="saveEdit-1" class="submitButton">
<button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"><img src="/test/images/icon-update-02.png"></button>
</div><!-- endof submitButton -->
</form>
<p> </p>
<form id="editForm-2" name="editForm-2" method="post" action="">
<input type="hidden" name="action" id="action" value="edit">
<input type="hidden" name="formID" id="formID" value="2">
<div class="addNewItem-InputField">
<p>Edit Test - 2</p>
<label for="editTestName"><input type="text" name="editTestName" id="editTestName" /></label>
</div><!-- endof addNewItem-InputField -->
<div id="saveEdit-2" name="saveEdit-1" class="submitButton">
<button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"><img src="/test/images/icon-update-02.png"></button>
</div><!-- endof submitButton -->
</form>
</body>
</html>
<?php
/************************************
updateDB.php
************************************/
if (isset ($_GET['page'])) {
$currentPage = $_GET['page'];
} else {
$currentPage = NULL;
}
showVarPre ($_POST);
showVarMed ($currentPage); // Shows the current page passed from JS
if ($currentPage == 'test2') {
$currentTable = 'records';
} elseif ( $currentPage == 'court-types') {
$currentTable = 'ota_court_types';
}
$action = ($_POST['action']);
echo "<h3>" . $action . "</h3>";
if ($action == "updateRecordsListings"){
/*
$listingCounter = 1;
foreach ($updateRecordsArray as $recordIDValue) {
$query = "UPDATE " . $currentTable . " SET position = " . $listingCounter . " WHERE id = " . $recordIDValue;
mysql_query($query) or die('Error, insert query failed');
$listingCounter = $listingCounter + 1;
}
*/
echo '<pre>';
echo '</pre>';
echo 'If you refresh the page, you will see that records will stay just as you modified.';
}
?>
document.getElementById("contentRight").innerHTML(theResponse);
Are you expecting html or text from the response? If it's the former, use:
$("#contentRight").html(theResponse);
if it's the later, use:
$("#contentRight").text(theResponse);
update:
your form submission is causing a full page refresh. this is the default behavior. you need to catch the event and prevent the default behavior.
`$(document).ready(function(){
$("#editForm-1").submit(function(e){
e.preventDefault();
performAjaxSubmission(1);
});
$("#editForm-2").submit(function(e){
e.preventDefault();
performAjaxSubmission(2);
});`
The problem was using input type as an image rather than using a button with an image. I still do not know or understand why but here is the related link
Hi i am trying to save value and alert them using ajax which i am insert using php in my sql table but my alert is not working
Here is my code
demo.php
<html>
<head>
<script>
function my(){
var name = document.getElementById("name").value;
var last_name = document.getElementById("last_name").value;
document.getElementsById('div1').style.backgroundColor = green;
var dataString = 'name='+name+'&last_name='+last_name;
$.ajax({
type:'POST',
data:dataString,
url:'demo.php',
success:function(data) {
alert(data);
}
});
} </script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="" />
<input type="text" name="last_name" id="last_name" value="" />
<input type="submit" name="Update" id="update" value="Update" onclick="my();" />
</form>
<div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
</div>
</body>
</html>
<?php
include('conn.php');
if (isset($_POST['Update'])) {
$name = $_POST['name'];
$last_name = $_POST['last_name'];
echo $name;
$insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
if(mysql_query($insert)) {
echo "Success";
} else {
echo "Cannot Insert";
}
}?>
demo.html
<html>
<head>
</head>
<body>
<div id="div2" style="width:300px;height: 50px;background-color: yellow;" >
</div>
</body>
</html>
here i want when i submit form them div color should change which is in demo.html
where i am wrong in this code
and how can i achieve my goal
Any help will be appreciated
changes you need to make:
add jquery as a dependency as you are using $.ajax utility function which is provided by Jquery.
As you are using Jquery, you could use its selectors for getting values of elements and binding functions to dom elements. I have commented it in the source code.
You are using a form with a submit button and executing the ajax call on click of it. But you need to prevent the page from submitting the form by preventing the default behavior of the submit button. Refer event.preventDefault();
Move the php ajax response part to the top and call exit() once your response is complete. Else your ajax response will include the whole page html source also.
.
<?php
include('conn.php');
if (isset($_POST['Update'])) {
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
if(mysql_query($insert)) {
echo "Success";
} else {
echo "Cannot Insert";
}
//Call exit as your ajax response ends here. You dont need the html source along with it.
exit();
}
?>
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="" />
<input type="text" name="last_name" id="last_name" value="" />
<input type="submit" name="Update" id="update" value="Update" />
</form>
<div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
</div>
<!-- include jquery dependeny before your js code block -->
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$("#update").on("click",function(event) {
//Prevent Default submit button behavour. Prevent the form from submission.
event.preventDefault();
// using Jquery selectors for better readability of code.
var name = $("#name").val();
var last_name = $("#last_name").val();
$("#last_name").css("background-color","green");
$.ajax({
type:'POST',
data:{name:name,last_name:last_name,Update:true},
url:'demo.php',
success:function(data) {
alert(data);
}
});
});
</script>
</body>
</html>
You send two parameters in "dataString" variable, and then in php check undefined variable "Update"
So, just replace string
if (isset($_POST['Update'])) {
to
if (isset($_POST['name']) && isset($_POST['name'])) {
And add this line to tag
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
So I have pop-up window where user need to enter name, after clicking submit button this window close.
You can test it here: http://eurokos.lt/under20/button.php (Click 21 button, then try to enter any value and see what happens)
For this pop-up box I've used function:
function popUp() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
This function is used for X button to close window:
function closeWindow() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
My button which open pop-up window looks like:
Echo "<input type='button' onclick='popUp();' value='".$i."' />";
And here is PHP_SELF and form:
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
echo "</br>You have entered: <b> $name </b>";
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
`
What I need to do that posted result what entered and window not closed?
Maybe I need to use popUp() function again when submitting? But how to do that correctly? Thank you.
Try this:
html:
<form method="post" action="" onsubmit="return display()">
<div id="answer"></div>
<input type="text" name="name" id="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
javascript:
function display(){
var ans = document.getElementById("name").value
document.getElementById("answer").innerHTML="You have entered:"+ans;
return false;
}
Update:
function popUp(){
document.getElementById("answer").innerHTML=""; //Add these in your popup function
document.getElementById("name").value="";
}
First of all i suggest you to avoid PHP_SELF in the action it can be manipulated by people and it's not good.
at top of page try to do :
<?php
$thispage = $_SERVER['PHP_SELF'];
?>
<html>
.
.
.
<form method="post" action="<?=$thispage?>">
<input type="text" name="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
</html>
Then, using the action for sending data to PHP, will reload the page so you are probabilly losing all the inline fix you did.
Try to get the input values after the submit, assign them to varibles and do, for example:
xmlhttp.open("POST","<?=$thispage?>",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=name");
with an asynchronous call you don't reload the page and you don't lost your changes