So i have been getting help from another question on here but i need some help getting this code to work
What i am trying to do is have the form send the "count" var to JS so that it can do a for loop a user specified amount of times and also have it send the other 2 variables to php for it to process the form data.
But I am new to javascript so i dont know how i could accomplish this.
here is the code for the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #FF0000;
background-color: #000000;
}
.style7 {color: #FF0000}
</style>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#Submit").click(function(){
var count = form.count.value;
var number = 0
for (i=1;i<=#count;i++)
{
$.ajax({
url:"process.php",
type:"get",
data:$("form").serialize(),
success:function(response){
number++
var obj = jQuery.parseJSON( response );
var success = obj.success;
var actionsNumber = obj.number;
$("#result").html('<b>'+number+'</b>');
}
})
}
})
})
</script>
</head>
<body>
<form action="" method="post">
<center> <p>
<label><b><big><big><big><big><big><big><big>Page</big></big></big></big> </big> </big></big></b></label>
</p>
<p>
<p>
<label><strong>MN</label>
</p>
<input name="MN" type="text" value=""/>
</p>
<p>
<p>
<label><strong>Number to Send</label>
</p>
<input name="count" type="text" value = "1"/>
<input name = "number" type = "hidden" value = "$number"/>
</p>
<p>
<p>
<label><strong>Provider</label>
</p>
<select name="provider">
<option value="">Choose One...</option>
</select>
</p>
<p>
<input id="Submit" type = "button" value = "Send">
</p>
<p>You have done <span id="result">0</span> actions</p>
</center>
</body></html>
and this is process.php
<?php session_start();
// process your form data as you do
//:::::::::
//
if(!isset($_SESSION['number'])){
$_SESSION['number'] = 0;
}
$number = $_SESSION['number']++;
sleep(.5);
// output json response
echo'{"success":"true","number":"'.$number.'"}';
?>
so I need for (i=1;i<=#count;i++) to work with the number the user puts in the "count" field and I also need process.php to get the stuff from the other boxes.
any help?
You can read out the number with $('#count').val(). Your codes looks a bit weird though. What are you trying to accomplish?
Well, first you need to bind your click event to the correct element in the DOM. Your existing code looks like this...
$("#Submit").click(...);
#Submit refers to an element with id="Submit" -- which there isn't one on your page. What you should be doing is something more like this...
$('form').bind( 'submit', function( ){ ... } );
Now your form submission event is being properly captured, you just need to get the values out.
$('form').bind( 'submit', function( )
{
var self = $(this); // -- reference to form element
var count = self.find( 'input[name="count"]' );
console.debug( count.val( )); // -- if you don't have a console, get one... or just use alert()
} );
Related
I am having trouble with this code. I don't understand how to add another box apart from the one that it already adds with ajax within the code when I press the link Add more. I want to be able to add two text boxes when I press the add more link, one for hobby and another one for age but I only get one. What I tried was on the on click function I tried to add another var html_box2 but it did not work out.
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="text-box">
<label for="box1">Box <span class="box-number">1</span></label>
<input type="text" name="boxes[]" value="" id="box1" />
<a class="add-box" href="#">Add More</a>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 5 < n ) {
alert('Stop it!');
return false;
}
var box_html = $('<p class="text-box"><label for="box' + n + '">Box <span class="box-number">' + n + '</span></label> <input type="text" name="boxes[]" value="" id="box' + n + '" /> Remove</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
These lines of code add one box
var box_html = $('<p class="text-box">whatever goes here</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
You can copy and modify them to create another box like
var box_html = $('<p class="text-box">whatever goes here</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
var box_html2 = $('<p class="text-box">whatever has to go here</p>');
box_html2.hide();
$('.my-form p.text-box:last').after(box_html2);
box_html2.fadeIn('slow');
On clicking the button magic1 or magic2, the div mybox will be updated with a text, button id and button (different for magic1 and magic2).
After clicking on the newly generated button it should display the button id of the newly generated button in the box div. When I click on the newly generated button, box div is not getting updated. Here is the code.
jquerycode.php is the initial file. On clicking the button magic1 or magic2, Ajax will call the page session.php.
jquerycode.php file
<!doctype html>
<?php
$first=$_POST['q'];
echo $first;
?>
<html>
<head>
<meta charset="utf-8" />
<title>My jQuery Ajax test</title>
<style type="text/css">
#mybox {
width: 300px;
height: 250px;
border: 1px solid #999;
}
#box {
width: 300px;
height: 250px;
border: 1px solid #999;
position: absolute;
right:210px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".magic_button").click(function() {
var data = $(this).attr('id');
//alert (data);
$.ajax({
type: "POST",
url: "session.php",
data: { 'id': data }
}).done(function(msg) {
$("#mybox").html(msg);
});
});
});
</script>
<script>
$(".fir").click(function() {
var dataa = $(this).attr('id');
alert ("hello");
$.ajax({
type: "POST",
url: "jquerycode.php",
data: { 'q': dataa }
}).done(function(msg) {
$("#box").html(msg);
return false;
});
});
</script>
</head>
<body>
The following div will be updated after the call:<br />
<div id="mybox">
</div>
<div id="box">
</div>
<form name="magic">
<!-- <label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label> -->
<input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic1" />
<input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic2" />
</form>
</body>
</html>
session.php file
<?php
$id = $_POST['id'];
$id = ucwords(implode(' ',explode('_',$id)));
if($id==="Magic Button 2")
{
echo "hey its button 2!!";
?>
<input type="button" name="butb" id="second" class="fir" value="second"/>
<?php
}
else
{
echo "hey its button 1!!";
?>
<input type="button" name="buta" id="first" class="fir" value="First"/>
<?php
}
echo $id;
?>
Best if you can use JQuery Live() for dynamic Generated Elements :
$("a.offsite").live("click", function(){ alert("Goodbye!"); }); // jQuery 1.3+
Beca JQuery Live() is deprecated you need to use JQuery on()
$("#elementid").on("click", function(event){
alert($(this).text());
});
I want to submit my form. In my form using first button I create a textbox through ajax and after that I use second button to submit the form normally. When I want to get the value of newly created textbox using $_POST it gives error. How can i get value of ajax created button on submission. my php code is :
<?php`enter code here`
session_start();
ob_start();
require_once "config.php";
if ($_SERVER['REQUEST_METHOD']=="POST")
{
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subtest").click( function() {
alert(jQuery("#tt").val());
});
});
</script>
</head>
<body id="#bdy">
<form id="FrmMain" method="post" action="">
<div id="Shd" style="font: 10%; margin: 50px; background-repeat:repeat-y; padding- left:120px;" >
<input type="text" id="txtFrom" name="txtFrom" />
<input type="text" id="txtUpto" name="txtUpto" />
<input type="text" id="txtOpt" name="txtOpt" />
<input type="submit" id="subt" name="subt" />
<input type="submit" id="subtest" name="subtest" />
<div id="RuBox" style="font-weight:bold;"><input type="checkbox" id="chkaccept" name="chkaccept" /> I accept terms and conditions.</div>
</div>
</form>
<div style="color:#F00; font-size:18px; display:none;" id="divload">Please wait loaidng... </div>
<div id="disp"></div>
</body>
</html>
Code of my adp.php file :
<?php
sleep(5);
?>
<div style="color:#30F; font-size:36px;">
Application testing............
<input type="text" id="tt" name="tt" />
</div>
I am not getting value of textbox named "tt" in temp form
Thanks
You're pretty much not posting anything from here:
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
So I would assume that you only want to generate a text field dynamically. And you can do it without the use of ajax:
var form = $('#FrmMain');
$('<input>').attr({'type' : 'text', 'id' : 'tt', 'name' : 'tt'}).appendTo(form);
Plus you're also trying to print out $_GET['tt'] while the form method is POST
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
This should also be:
echo $_POST['tt'];
I have a jquery function that retrieves information that a user clicks on in a database table.The user can select any one of ten rows that becomes highlighted when mouseover and when the user clicks the highlighted row the function retrieves it and puts it into a textbox. Then if the user submits this request for purchase I want to echo the textbox on the next page which is an order form.
The code below works well up until I try to retrieve the information from the url. I can see that it is passed in the url to the next page but after trying for two days I have not been able to retrieve it. I don't know where to go from here. Can someone look at this and see if I have not coded properly or done something wrong.
I have copied down the code that applies...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table tr").click(function(){
$("#txttread").val($.map($(this).children('td:not(:eq(7))'), function (item) { return $(item).text() }).join(' - '));
});
});
$(document).ready(function() {
$('.pickme tr').not(':first').hover(
function() { $(this).addClass('highlight'); },
function() { $(this).removeClass('highlight'); }
).click( function() {
$('.selected').removeClass('selected');
$(this).addClass('selected').find('input').attr('checked','checked');
});
});
</script>
</head>
<body>
<form action="Order.html" method="GET" name="myform2" />
<div>
<div style="text-align:left height:250px;">
<DIV STYLE="font-family: Arial Black;
color: black; font-size: 20pt;">
Select from inventory below:<br/><input type="text" style="width:500px; height:35px;" rows="1" STYLE="font-family: Arial Black;
color: red; font-size: 20pt;" name="txttread" id="txttread" DISABLED /></div></div></div>
<div>
<div style="text-align:center;">
<br/><input type="button" button id="getone" name="getone" value="Submit your request for purchase" onclick="window.location.href = 'http://localhost/order.html?txttread='+ ( $('#txttread').val() )"><br/><hr/>
</body>
</html>
The url on the next page is....
http://localhost/order.html?txttread=Firestone - All Season - FR-710 - 225/60/16 - 4 - 3 - 60.00
I think this has to do with the URL not being encoded correctly. On that last line where you append the $('#txttread').val(), you should wrap it with encodeURIComponent():
<input type="button"
button id="getone"
name="getone"
value="Submit your request for purchase"
onclick="window.location.href = 'http://localhost/order.html?txttread=' + encodeURIComponent($('#txttread').val());">
This might not answer your question completely, but consider this:
window.location.href = 'http://localhost/order.html?txttread='+ ( $('#txttread').val() )
You should apply proper escaping when you pass parameters:
window.location.href = 'http://localhost/order.html?txttread=' + encodeURIComponent( $('#txttread').val() );
To access the value of txttread from an HTML page:
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
As found here: https://stackoverflow.com/a/901144/1338292
Ok so here it is.
I have a index.php page. What it does is either make the html page or run a while loop.
It will only run the loop after you fill in some info and press a submit button on the html page. Now on the html page at the bottom i have it say "__ actions have been completed" with the blank being a variable that has 1 added to it each time the loop is run.
Now what i want to happen is that number to update everytime the loop is run. I have also been told to us ajax/jquery to do this but i have been unable to figure it out.
So what can i put in the while loop to have the variable update?
<?php
$number = $_POST['number'];
if(isset($number)){}
else{
$number = 0;
}
if(isset($_POST['Submit'])){
$MN = $_POST['MN'];
$count = $_POST['count'];
$provider = $_POST['provider'];
for ($i = 0; $i < $count; $i++) {
$m = rand(10e16, 10e20);
$n = base_convert(¤m, 10, 36);
$subject = $m;
$body = $n;
$number = $number + 1;
}
}
echo <<<END
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<form action="$PHP_SELF" method="post">
<center> <p>
<label><b><big><big><big><big><big><big><big>Page</big></big></big></big></big></big></big></b></label>
</p>
<p>
<p>
<label><strong><u>MN</u></label>
</p>
<input name="MN" type="text" value=""/>
</p>
<p>
<p>
<label><strong><u>Number to Send</u></label>
</p>
<input name="count" type="text" value = "1"/>
<input name = "number" type = "hidden" value = "$number"/>
</p>
<p>
<p>
<label><strong><u>Provider</u></label>
</p>
<select name="provider">
<option value="">Choose One...</option>
</select>
</p>
<p>
<input name = "Submit" type = "submit" value = "Send"></a>
</p>
<p>You have done {$number} actions</p>
</center>
</body></html>
</style>
</head>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #FF0000;
background-color: #000000;
}
.style7 {color: #FF0000}
END;
?>
What you could do, is use a session variable to record the number of times the user has completed the action.
if (!$_SESSION["times"]) $_SESSION["times"] = 0;
else $_SESSION["times"]++
Then in the HTML, output that variable.
i have modified your code so it can use jquery ajax to submit the form
the response is a json string , we parse it with jquery to get an javascript object
this your form code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #FF0000;
background-color: #000000;
}
.style7 {color: #FF0000}
</style>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#Submit").click(function(){
$.ajax({
url:"process.php",
type:"get",
data:$("form").serialize(),
success:function(response){
var obj = jQuery.parseJSON( response );
var success = obj.success;
var actionsNumber = obj.number;
$("#result").html('You have done '+actionsNumber+' actions');
}
})
})
})
</script>
</head>
<body>
<form action="" method="post">
<center> <p>
<label><b><big><big><big><big><big><big><big>Page</big></big></big></big></big></big></big></b></label>
</p>
<p>
<p>
<label><strong><u>MN</u></label>
</p>
<input name="MN" type="text" value=""/>
</p>
<p>
<p>
<label><strong><u>Number to Send</u></label>
</p>
<input name="count" type="text" value = "1"/>
<input name = "number" type = "hidden" value = "$number"/>
</p>
<p>
<p>
<label><strong><u>Provider</u></label>
</p>
<select name="provider">
<option value="">Choose One...</option>
</select>
</p>
<p>
<input id="Submit" type = "button" value = "Send">
</p>
<p id="result"></p>
</center>
</body></html>
and the code of process.php :
<?php session_start();
// process your form data as you do
//:::::::::
//
if(!isset($_SESSION['number'])){
$_SESSION['number'] = 0;
}
$number = $_SESSION['number']++;
// output json response
echo'{"success":"true","number":"'.$number.'"}';
?>
we store the number in the session and increment it every action ( call of process.php)
and update the paragraph id="result" with the response.number
hope that help
What you want to do isn't possible (well, not in the way you think).
If I had to do this as an absolute requirement (even though it stinks of poor design) I would do it like so:
Wherever your number is in the original output file, wrap it in a div or span and give it a unique id.
I would then use a session variable for your loop counter.
Finally, I would use jQuery with the timers plugin to fire off at 1 or 2 second intervals. Within the timer, you should call a .php file in the background that simply returns the value of the session variable.
Here's a bit of code to demonstrate:
(Edited to clarify based on comments below)
Here is a working example:
<?php
// main_page.php
session_start();
$_SESSION['loop_count'] = 0;
?>
<html>
<head>
<title>Background Updating Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="PATH_TO_YOUR_SCRIPTS/timers.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: 'exec_loop.php',
success: function(data) {
$('#status_message').html("Loop started...");
}
});
$(document).everyTime(1000, function() {
$.ajax({
url: 'get_counter.php',
success: function(data) {
$('#counter_text').html(data);
}
});
});
});
</script>
</head>
<body>
The loop has executed <span id='counter_text'>0</span> times.
</body>
</html>
Then in the get_counter.php file, just do something like this:
<?php
// get_counter.php
session_start();
echo $_SESSION['loop_count'];
?>
Now for the loop file
<?php
// exec_loop.php
session_start();
for ($i = 0; $i < 50000000; $i++) {
$_SESSION['loop_count']++;
}
?>
Save these three files, and you'll get the result you desire.