Make a request without submitting - PHP, AJAX & Javascript - php

I'm still a beginner in PHP programming. I need help on how can I prompt the selected date. A simple webpage which allows user to choose date (via javascript) then after it clicks the submit button. I'd like to prompt the user of the date but what it does is open up a new page and displays the current page.
My PHP file: rcl_stock_allocation.php
<html>
<head>
<LINK REL=StyleSheet HREF="inc/style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="inc/cal_styles.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" language="javascript" src="inc/myCalendar.js"></script>
<script type="text/javascript" src="inc/jquery-1.9.1.js"></script>
<script type="text/javascript">
function popCal(ThisValue){
calpop = new Epoch('epoch_popup','popup',document.getElementById(ThisValue));
calpop.toggle();
}
</script>
<title>RCL Stock Allocation</title>
</head>
<body>
<?php
echo "<form name='rcl_stock_allocation' action='' method='get' target=_blank >";
echo "<table border = '0'>";
echo "<tr><td colspan='2'><font size='2' ><b>RCL Stock Allocation for Bookshop</b></font></td></tr>";
print "<tr><td></br></td></tr>";
print <<<menu1
<tr><td align=right >Date of Transaction</td><td> <input type="text" id ="transactionDate" name="transactionDate" class = graytextbox readonly=true style='width:80px; text-align:center' value = '$transactionDate' /> Date Picker
menu1;
print "</td></tr>";
echo "<tr><td></td><td><input type='submit' name='load_data' id='load_data' value='Load Stocks' /></td></tr>";
echo "</table>";
echo "</form>";
//echo "lloyd";
?>
</body>
</html>
And here is my javascript: rcl_stkall.js
$(function() {
$('.error').hide();
$(".load_data").click(function() {
$('.error').hide();
var transactionDate = $("input#transactionDate").val();
if(transactionDate == ""){
$("label#transactionDate").show();
$("input#transactionDate").focus();
return false;
}
var dateOfTransaction = 'date=' + transactionDate;
alert(dateOfTransaction); return false;
});
});
Thanks in advance.

First of all you are using id="load_data" for submit button so
try this,
$(".load_data").click(function() { should be
$("#load_data").click(function() {

Here are some of the basics:
When you start the form, remove 'target=_blank' - this isn't necessary.
Then you can stop the form from submitting by preventing the default submit action.
Add this to your JS within the '$(function() {'
$('#rcl_stock_allocation').on('submit', function(e) {
e.preventDefault();
// add code here to show prompt the user of the date
});
if you then need to submit the form after the user has being prompted of the date, use:
$('#rcl_stock_allocation').submit();
to complete sending the form.

put type='button'
<input type='button' name='load_data' id='load_data' value='Load Stocks' />

Related

dynamic textbox are not store in the textbox

i m creating dynamic text box on onclick event the code is running properly text box are created but the problem is when i create new text box and fill the some value on the first text values are store properly and again create the new text box that time first text box value are automatically delete or null i m trying to solve this error but not getting answer properly please help me....
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form>
</body>
</html>
Please try this,
<script type="text/javascript" language="javascript">
function changeIt() {
var divTag = document.createElement("input");
document.body.appendChild(divTag);
}
</script>
<input type="button" value="Create"
onclick="changeIt();" />
createTextbox is not explicitly available. You'll have to get it by using document.getElementById. Like this...
var createTextbox = document.getElementById("createTextbox");
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >";
By using createTextbox.innerHTML =, you replace the current content of the div.
Use the appendChild function to solve it, here is one example:
function addInput(){
//get the div element
var d = document.getElementById('myDiv');
//create an input element
var i = document.createElement("input");
//add it to the div
d.appendChild(i);
}
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('createTB').innerHTML="<input type='text' />";
}
</script>
</head>
<body>
<div id="createTB"></div>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>

How to Store javascript checkbox result in php mysql

I am trying to accomplish live checkbox result with checked/unchecked checkbox. My logic for checkbox works but now I want to store this live checkbox result in MYSQL. So when I click on checkbox, result should be stored in database same as when I uncheck checkbox result should be stored in database. I don't want to use any button in this example.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" >
function writeTo(object) {
var container = document.getElementById("container");
if (object.checked) {
container.innerHTML = "Added " + object.value + " <br />";
} else {
container.innerHTML = "Removed " + object.value + " <br />";
}
}
</script>
</head>
<body>
<div id="container"></div>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Appel">Apple<br>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Grape">Grape<br>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Orange">Orange<br>
<?php
echo $dd= "<script>document.writeln(container.innerHTML);</script>";
require 'Database.php';
echo $sql="Update scott123.rahul_tbl_users set group1='$dd' where Dingoid=70001501";
//$sql1=mysql_query($sql);
?>
</body>
</html>
Have your writeTo function initiate an ajax request to your server that performs the mysql insert/update query.
You can check the current state of a checkbox by reading its "checked" attribute.
If you have experience with jQuery, it makes a lot of this easier to implement.
In your writeTo function, you'll have to perform an Ajax call to a script that will then update the database.
In most basic form, it would look like: (using jQuery - http://jquery.com/)
function writeTo(object) {
// .. your other code ..
$.ajax( {
url: 'update.php',
method: 'POST',
data: { chkvalue: object.value }
} );
}
And update.php could then look like:
<?php
$value = $_POST['chkvalue'];
// $value now contains the checkbox value, which can now be updated in DB

Storing javascript checkbox(checked/unchecked) result in php mysql error

I am trying to accomplish live checkbox result with checked/unchecked checkbox.
My logic for checkbox works but now I want to store this live checkbox result in MYSQL So when I click on checkbox, result should be stored in database same as when I unchecked checkbox result should be stored in database.
I don't want to use any button in this example. I am very close to result just want doing something small mistake. Please help me out. Thank you.
Here is my complete small code:
### Check.php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" >
function writeTo(object) {
var container = document.getElementById("container");
if (object.checked) {
container.innerHTML = "Added " + object.value + " <br />";
} else {
container.innerHTML = "Removed " + object.value + " <br />";
}
$.ajax( {
url: 'check1.php',
method: 'POST',
data: { chkvalue: object.value }
});
}
</script>
</head>
<body>
<div id="container"></div>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Appel">Apple<br>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Grape">Grape<br>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Orange">Orange<br>
<?php
echo $dd= "<script>document.writeln(container.innerHTML);</script>";
require 'Database.php';
echo $sql="Update scott123.rahul_tbl_users set group1='$dd' where Dingoid=70001501";
//$sql1=mysql_query($sql);
?>
</body>
</html>
###check1.php
<?php
$value = $_POST['chkvalue'];
echo $sql="Update scott123.rahul_tbl_users set group1='$value' where Dingoid=70001501";
$sql1=mysql_query($sql);
?>
Looks like you are trying to put alias on rahul_tbl_users like this scott123.rahul_tbl_users
This is wrong you cannot do that way.

trigger click problem on isset (Php, jquery, iframe)

I am having a small problem and i don`t know the reason. I set that
1- If you click Print button then print.php page will be printed automatically.
2- if you submit a form then print.php page will be printed automatically.
Problem is on second option. Page gets printed automatically perfect but if i click Print button again it does not print the page again.
I am using firefox.
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function loadiFrame(src)
{
$("#iframeplaceholder").html("<iframe id='myiframe' name='myname' src='" + src + "' frameborder='0' vspace='0' hspace='0' marginwidth='0' marginheight='0' width='1' scrolling='no' height='1' />");
}
$(function()
{
$("#printbutton").bind("click",
function() {
loadiFrame('print.php');
$("#myiframe").load(
function() {
window.frames['myname'].focus();
window.frames['myname'].print();
}
);
}
);
});
</script>
<?
if (isset($_POST['formSubmit']))
{
echo "form submitted";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#printbutton').trigger('click');
});
</script>
<? } ?>
</head>
<body>
<table border="1">
<tr>
<td><input type="button" id="printbutton" value=" Print " /><div id="iframeplaceholder"></div></td>
</tr>
</table>
<form action="auto.php" method="post">
<input name="formSubmit" type="submit" value="Submit" />
</form>
</body>
you should call loadiFrame function only if the iframe doesn't exist.
$(function()
{
$("#printbutton").click(
function() {
if($('#myiframe').length==0){
loadiFrame('print.php'); }
$("#myiframe").ready(
function() {
window.frames['myname'].focus();
window.frames['myname'].print();
});
});
});
Try it now.
Good luck :)
it's a bug in Firefox. It works if you add a counter that makes each iframe name unique.

jquery form plugin & programmatic submit

There are similar questions at SO, but none that seem to address this.
Below is a very simplified variant of my situation. Drupal/PHP site -- I have a form w/ submit button that I am using jquery.form plugin to ajax-ly submit. It works fine if I use the submit (#submit) button.
Now, I want to programmatically fire that button using another button (#submit2) outside of the form. I can do that using jquery click() function, but the content coming back isn't going to the ajax target as I would expect.
I do not have much freedom to re-organize this code, else i would.
(Note I tried to make this code easy for you to run by src-ing jquery and the form plugin from my website.)
Ideas? Thanks!
<?php
if ($_REQUEST['submit'] == 'Submit') {
print 'ajax returns ... ' . $_REQUEST['text'];
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$('#form').ajaxForm( { target: $('#span') } );
$('#submit2').click( function() { $('#submit').click(); } );
});
</script>
</head>
<body>
<span id='span'>target span</span>
<form method='post' id='form'>
<input type='text' name='text' size='50' />
<input type='submit' id='submit' name='submit' value='Submit'/>
</form>
<input type='submit' id='submit2' name='submit2' value='Submit Too?' />
</body>
</html>
I managed to solve a similar situation to yours. If the only objective of simulating a click on submit1 is to submit the form, you might try:
$('#submit2').click(function() {
$('#form').trigger('submit');
});
You may also need to return false immediately after triggering the form submit button from the non-form submit button click event code. For example:
<script type="text/javascript">
$(function() {
$('#form').ajaxForm({ target: $('#span') });
$('#submit2').click(function() { $('#submit').click(); return false; });
});
</script>
It works for me. Is that what you are looking for?
Have you tried giving a name to the form, and instead of
$('#submit2').click( function() { $('#submit').click(); } );
doing
$('#submit2').click( function() { document.myForm.submit(); } );
That should do the same thing as having the submit button clicked if the form has been ajaxified.

Categories