Solved

how to use jquery or ajax to sumbit a form to a process.php file and display the result on the main page

Posted on 2011-09-23
72
382 Views
Last Modified: 2012-08-14

how can I use jquery(or without) or ajax to sumbit a form to a process.php file and display the result on the main page

lets say the form is in main.php and process.php  take the name=test from the form and print it bck to main.php in <div results section
without refreshing the page or reloading main.php

I think its need ajax also but im not sure any thought anybody?

0
Comment
Question by:Nura111
  • 38
  • 32
  • +1
72 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36590003
which method? get ? post?
0
 

Author Comment

by:Nura111
ID: 36590025
which eer is better for this case
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36590041
>which eer is better for this case
no one...
both...

$.get(
     $("form").attr("action"), 
     $("form").serializeArray(), 
     function(data) { $("#results").html( data ); }
);

Open in new window


or

$.post(
     $("form").attr("action"), 
     $("form").serializeArray(), 
     function(data) { $("#results").html( data ); }
);

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590059
<script type="text/javascript" language="javascript">

$(document).ready(function() {

$("form").submit(function(e) {

e.preventDefault();

$.get(
     $("form").attr("action"), 
     $("form").serializeArray(), 
     function(data) { $("#results").html( data ); }
);

})

})

</script>

Open in new window

0
 

Author Comment

by:Nura111
ID: 36590071
where in this code is the form $post or Get is submitted to process.php ?
0
 

Author Comment

by:Nura111
ID: 36590076
and I don't understand what is the name of this function how do I call it withing the form code so when submit is clicked is will fire up this function
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590084
0
 

Author Comment

by:Nura111
ID: 36590095
I know a liitle bit jquery but if I have the form and I want a jquery function to fire up when the form is submitted dont I need to do something like:
onsumbit: return thefunction()

what it will be in this case?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590108
check line 5 of ID:36590059
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590111
0
 

Author Comment

by:Nura111
ID: 36590125
so the way is work is when sumbitting the form its will just go there? where should i put this code in the page?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590137
yes,
the right place is in the head section
0
 

Author Comment

by:Nura111
ID: 36590145
but still where is where in this code is the form $post or Get is submitted to process.php ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590160
the first parameter of $.get or $.post is the url
check line 10 :      $("form").attr("action"),
0
 

Author Comment

by:Nura111
ID: 36590170
ok and please explain:
 function(data) { $("#results").html( data ); }
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590189
put the result inside the element with the ID "result"
0
 

Author Comment

by:Nura111
ID: 36590194
is the "action" is a script name?

so if the Im writing :$("form").attr("process.php"),
and  process.php code is:
//update db
pull some information
echo $output;
how is what you wrote take this $output  and load it in the <results section?
0
 

Author Comment

by:Nura111
ID: 36590200
if you can take  a look  at another question I posted it realted to that one I thought this one will simplfy it
But I dint get it from the answer:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_27323168.html#a36588633

do you think its solving it? im having a hard time to understand how to implement it
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590215
0
 

Author Comment

by:Nura111
ID: 36590236
can you please use more words to secribe the action? I dont understand it ..
the attr take the first elemrnt how does it help me if its need to take the echo output from process.php??
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590255
$("form").attr("action"),

if you've : <form action="process.php"

$("form").attr("action") return process.php

as I said, $.get or $.post first parameter is the url : http://api.jquery.com/jQuery.get/

0
 

Author Comment

by:Nura111
ID: 36590372
Im sorry I dont understand. thank you for the try
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590390
The code work fine, it answer your question...
Now, if you don't understand it immediately, take your time to listen a bit from the four provided links, thanks.
0
 

Author Comment

by:Nura111
ID: 36590398
ok ill try I just don't get how to implement it in the my code. I dont know if you see that
but there is another question regarding that maybe you will see whyI don't understand
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_27323168.html#a36588633
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36590438
>ok ill try I just don't get how to implement it in the my code. I dont know if you see that

ok try, if it don't work, show how you tried, no more complicated
0
 
LVL 11

Expert Comment

by:maeltar
ID: 36591406
Hope this helps clear things up...

2 Files, main.php and process.php...  tested and working, as you can see with process.php the data you post using main is simply echo'd this is then displayed in the div labeled "loaddata". So in process.php you can do whatever you want, sql inserts, send email etc, using the form data and the output is show in the div on the main page without a refresh.

main.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title>Main File</title>

<script type="text/javascript" language="javascript">

$(document).ready(function() {

$(function() {
    $('#loginform').submit(function(evt) {
        evt.preventDefault();
        $.ajax({
            url: 'process.php', // make sure you set an action attribute to your form
            type: 'POST',
            data: $(this).serialize(),
            success: function(result) {
                $('#loaddata').html(result);
            }
        });
    });
});


});

</script>


</head>
<body>

<form name="loginform" id="loginform" action="process.php" />
Data 1 :<input type="text" name="data1" /><br />
Data 2 :<input type="text" name="data2" /><br />
Data 3 :<input type="text" name="data3" /><br />
<input type="submit" name="button" id="button" value="Submit">
</form>


<div name="loaddata" id="loaddata">&nbsp;</div>
</body>
</html>

Open in new window


process.php

<?
echo "Data 1 : " . $_REQUEST['data1'] . "<br />";
echo "Data 2 : " . $_REQUEST['data2'] . "<br />";
echo "Data 3 : " . $_REQUEST['data3'] . "<br />";

?>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 36592929
0
 

Author Comment

by:Nura111
ID: 36600950
---leakim971 ::I read your answer a few times I still dont understand it and dont know hoe to implement it in my code
put the result inside the element with the ID "result"

DO I also write data in my code is the data will always represent  what action.php echoing?


maeltar:  the same issue I dont understand the way the result is handle im on main.php what I need to do as when the form is submitted to update the db and than change an element color (for an element id =id="spam_{$row['id']}_body" ] so I need to call a javascript option somehow when the form is submitted and transfer it the id so he will get the right element and at the same time to update the db.

(without refersing main.php)
 



0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601046
I think before writing your question you already have working page. a main page (main.php) and a page where you post the main page (process.php)

starting from this, I give you the code to insert without any else modification of your pages.
you just need to place it in the right section (I said head) and you got your result (what process.php usually display) in a div as you ask him in your initial question
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601084
...without any other modification of your pages.
0
 

Author Comment

by:Nura111
ID: 36601163
yes I already have a main.php. and that is exctly my issue when you say  and a page where you post the main page (process.php) do you mean a page that will handel the post asynchronously using ajax? or a page that will also display on the browse?
because thats exactly the problem I need to process the POST without reloading the page and than just change part of it
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601176
your answer is already answered, the code provided do what you want.
only the way you put it/integrate it in your page is missing
0
 

Author Comment

by:Nura111
ID: 36601303
ok so just to make sure you talking about the  36590059 code? and action is process.php?
what does the output from process.php should be that is what I dont understand  
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601323
>36590059 code?

>and action is process.php?
yes and yes (ID:36590255)
because you said :<<  yes I already have a main.php. and that is exctly my issue when you say  and a page where you post the main page (process.php) >>
0
 

Author Comment

by:Nura111
ID: 36601333
ok how do we proceed from here?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601351
ID:36590438
ID:36601176
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:Nura111
ID: 36601388
ok but Im asking you I dont understand what need to be in Process.php ??
for exmple: I dont want to put anything in results I want to change an element id- row_$id  so how can I do it from your code? isnt that need to be a javascript function to do it how can I do it in process.php?
I just dont get what is php output should be.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601411
don't modify anything, you only need to add

ID:36601046
ID:36601084
0
 

Author Comment

by:Nura111
ID: 36601446
How many times can I explain that I  dont understand it what you wrote and where to put it I appreicate your initial effort to help but I dont understand what you are saying!!
 ID: 36601388
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601467
<< put the code provided in the head section >>

you did not understand that?
0
 

Author Comment

by:Nura111
ID: 36601516
I cant just put it like that it will not work my id for the form in your code "form"
is dynamic "popup_form_{$row['id']}" so I Need  somehow to pass the id parameter I don't know how.
same for the #result_{$row['id']}
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601526
the script don't worry about your form id, name...
0
 

Author Comment

by:Nura111
ID: 36601548
ok its there its not doing anything
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601567
ok, please provide a link to see you page.
or let me see how you integrate it ( do a right click on the page in your browser, choose view source, and post it in code snippet)
0
 

Author Comment

by:Nura111
ID: 36601595

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Search Engine Management - Manage Leads</title>
  <link rel="stylesheet" type="text/css" href="res/menu.css" />
  <link rel="stylesheet" type="text/css" href="res/styles.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript">
            function toggleGraph(id,ajaxUrl) {
                    var fieldName = "d_" + id + "_graph"; // prefix with d_ to avoid errors when domain_id begins with a number.
                    var element = $('#' + fieldName + ' #rank_graph');
                    if (element.is(':hidden')) {
                            element.load(ajaxUrl);
                    }
                    element.toggle();
            }

            function toggleLeadBody(id) {
					var fieldName1 = "#spam_"+ id + "_body";
                    var fieldName2 = "#sr_" + id + "_body";
					
					var element = $(fieldName1 +  ', ' + fieldName2);
                    element.toggle();                    
					//var element = $(fieldName2);
					//element2.toggle();
					//var element1 = $(fieldName1);

                    //element1.toggle();
				    //element = $('#'+ fieldName2);
					//element.toggle();

            }

            function toggleData(id,ajaxUrl) {
                    var fieldName = id + "_data";
                    var element = $('#' + fieldName + ' td');
                    element.toggle();
                    if (! element.is(':hidden')) {
                            element.load(ajaxUrl);
                    }
            }
			
			function togglePopUp(element){
			//	if (element.is(':hidden')) {
                //            element.load(ajaxUrl);
               //     }		  	
				$('#' + element).toggle();
				}	
			//function handleSpamForm(
$(document).ready(function() {

$("form").submit(function(e) {

e.preventDefault();

$.get(
     $("form").attr("action"), 
     $("form").serializeArray(), 
     function(data) { $("#results").html( data ); }
);

})

})

      </script>
    <link rel="stylesheet" type="text/css" href="/lib/yui2/build/button/assets/skins/sam/button.css" />
    <script type="text/javascript" src="/lib/yui2/build/yuiloader/yuiloader-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/dom/dom-min.js"></script>

    <script type="text/javascript" src="/lib/yui2/build/event/event-min.js"></script>

    <script type="text/javascript" src="/lib/yui2/build/json/json-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/element/element-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/swf/swf-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/charts/charts-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/button/button-min.js"></script>


    <script type="text/javascript" src="/js/sorttable.js"></script>

      <style type="text/css">
            .yuichart {
                    width: 100%;
                    height: 250px;
            }

            .chart_title {
                    display: block;
                    font-size: 1.2em;
                    font-weight: bold;
                    margin-bottom: 0.4em;
            }
    </style>
</head>

<body class="yui-skin-sam">

      <div id="container-base" align="center">
       <div id="container-inner" align="left">

        <div id="banner">
         <div id="menu-main">
          <div class="menu-main-tab-selected"><a href="seo_domain.php?page=domains&sub=manage">Website Manager</a></div>
          <div class="menu-main-tab"><a href="sem_page.php?page=articles&sub=manage">SEO | SEM</a></div>
          <div class="menu-main-tab"><a href="seo_clientmanager.php?page=cmanager&sub=customers">Client Manager</a></div>
          <div class="menu-main-tab"><a href="seo_report.php?page=reports&sub=index">Report Center</a></div>
          <div class="menu-main-tab"><a href="seo_cpanel.php?page=control&sub=index">Settings</a></div>

         </div>
         <div id="logo">GOTEQ</div>
        </div>

      <div id="menu-sub-row">   <div class="menu-sub-tab"><a href="seo_domain.php?page=domains&subClass=domain&sub=manage">Domains</a></div>
   <div class="menu-sub-tab"><a href="seo_market.php?page=markets&subClass=group&sub=groups">Groups</a></div>
   <div class="menu-sub-tab"><a href="seo_market.php?page=markets&subClass=market&sub=markets&subClass=markets">Markets</a></div>

   <div class="menu-sub-tab"><a href="seo_metro.php?page=metros&sub=manage">Metros</a></div>
   <div class="menu-sub-tab"><a href="seo_addresses.php?page=metros&sub=addresses">Addresses</a></div>
   <div class="menu-sub-tab"><a href="sem_page.php?page=textpools&sub=manage">Text Pools</a></div>
   <div class="menu-sub-tab-selected"><a href="sem_page.php?page=leads&sub=manage">Leads</a></div>
         <div id="logoff"><a href="index.php?logout=1">hardik</a></div></div><div id="content-out"><div id="content-in"><div id="content-buttonheader"><a href="sem_page.php?page=leads&sub=manage"><div class="newButton-selected">Statistics</div></a><a href="sem_page.php?page=leads&sub=integration"><div class="newButton">Integration</div></a><a href="sem_page.php?page=leads&sub=integration&action=edit"><div class="newButton">Add Integration</div></a><br /><br /><br /></div>    <FORM method="POST" id="mainForm">

<div id="content-filterheader" style="width: 100%; text-align: center;">
    <table cellspacing="10" align="center">
    <tr>
       <td align="left">
       <b>Market: </b>
       <select name="ddMarket">
        <option value="">- Market -</option>
       <option value="fh38d" >Locksmith</option>       </td>

       <td align="left">
       <span>Group: </span>
       <select name="ddGroup">
        <option value="">-</option>
         <option value="1" >1</option>
         <option value="2" >2</option>
         <option value="3" >3</option>

         <option value="4" >4</option>
         <option value="5" >5</option>
         <option value="6" >6</option>
         <option value="7" >7</option>
         <option value="8" >8</option>
         <option value="9" >9</option>

       </select>
       </td>

       <td align="left">
           Nationwide<input type="checkbox" name="chkNationwide"  />
       </td>

       <td align="left">
              <span>Days: </span>

           <input type="text" size="3" name="numDays" value="30" />
       </td>

       <td>
        <input type="submit" name="btnFilter" value="Apply Filter" class="newButton-red"/>
       </td>
        <td>
        <input type="reset" name="btnClearFilter" value="Clear Filter" class="newButton-red"/>
        </td>

    </tr>
    </table>
    </div>
    </FORM>
<div id="contentFrame">
    <table class="managerTable" style="width: 100%; background-color: white;">
        <tr>
            <th>Domain Name</th>
            <th>Market/Group</th>

            <th>Requests</th>
        </tr>
        <tr bgcolor="#DEDEDE" onClick="javascript:toggleGraph('oixrs', 'getLeadsGraph.php?domainId=oixrs&d=30');" style="cursor: hand; cursor: pointer;" class="lead_row">
            <td>name</td>
            <td>market (7)</td>
            <td>1</td>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601631
ok try with :

lines modified :
line 9 : <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
line 52 to 66

let me know what you get in the alert
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Search Engine Management - Manage Leads</title>
  <link rel="stylesheet" type="text/css" href="res/menu.css" />
  <link rel="stylesheet" type="text/css" href="res/styles.css" />

        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
      <script type="text/javascript">
            function toggleGraph(id,ajaxUrl) {
                    var fieldName = "d_" + id + "_graph"; // prefix with d_ to avoid errors when domain_id begins with a number.
                    var element = $('#' + fieldName + ' #rank_graph');
                    if (element.is(':hidden')) {
                            element.load(ajaxUrl);
                    }
                    element.toggle();
            }

            function toggleLeadBody(id) {
					var fieldName1 = "#spam_"+ id + "_body";
                    var fieldName2 = "#sr_" + id + "_body";
					
					var element = $(fieldName1 +  ', ' + fieldName2);
                    element.toggle();                    
					//var element = $(fieldName2);
					//element2.toggle();
					//var element1 = $(fieldName1);

                    //element1.toggle();
				    //element = $('#'+ fieldName2);
					//element.toggle();

            }

            function toggleData(id,ajaxUrl) {
                    var fieldName = id + "_data";
                    var element = $('#' + fieldName + ' td');
                    element.toggle();
                    if (! element.is(':hidden')) {
                            element.load(ajaxUrl);
                    }
            }
			
			function togglePopUp(element){
			//	if (element.is(':hidden')) {
                //            element.load(ajaxUrl);
               //     }		  	
				$('#' + element).toggle();
				}	
			//function handleSpamForm(
$(document).ready(function() {

$("form").submit(function(e) {
alert("going to submit!")
e.preventDefault();
alert("action: "+$("form").attr("action")+"\nquerystr: "+$("form").serializeArray())
$.get(
     $("form").attr("action"), 
     $("form").serializeArray(), 
     function(data) { alert("ok good, the data :" + data);$("#results").html( data ); }
);

})

})

      </script>
    <link rel="stylesheet" type="text/css" href="/lib/yui2/build/button/assets/skins/sam/button.css" />
    <script type="text/javascript" src="/lib/yui2/build/yuiloader/yuiloader-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/dom/dom-min.js"></script>

    <script type="text/javascript" src="/lib/yui2/build/event/event-min.js"></script>

    <script type="text/javascript" src="/lib/yui2/build/json/json-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/element/element-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/swf/swf-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/charts/charts-min.js"></script>
    <script type="text/javascript" src="/lib/yui2/build/button/button-min.js"></script>


    <script type="text/javascript" src="/js/sorttable.js"></script>

      <style type="text/css">
            .yuichart {
                    width: 100%;
                    height: 250px;
            }

            .chart_title {
                    display: block;
                    font-size: 1.2em;
                    font-weight: bold;
                    margin-bottom: 0.4em;
            }
    </style>
</head>

<body class="yui-skin-sam">

      <div id="container-base" align="center">
       <div id="container-inner" align="left">

        <div id="banner">
         <div id="menu-main">
          <div class="menu-main-tab-selected"><a href="seo_domain.php?page=domains&sub=manage">Website Manager</a></div>
          <div class="menu-main-tab"><a href="sem_page.php?page=articles&sub=manage">SEO | SEM</a></div>
          <div class="menu-main-tab"><a href="seo_clientmanager.php?page=cmanager&sub=customers">Client Manager</a></div>
          <div class="menu-main-tab"><a href="seo_report.php?page=reports&sub=index">Report Center</a></div>
          <div class="menu-main-tab"><a href="seo_cpanel.php?page=control&sub=index">Settings</a></div>

         </div>
         <div id="logo">GOTEQ</div>
        </div>

      <div id="menu-sub-row">   <div class="menu-sub-tab"><a href="seo_domain.php?page=domains&subClass=domain&sub=manage">Domains</a></div>
   <div class="menu-sub-tab"><a href="seo_market.php?page=markets&subClass=group&sub=groups">Groups</a></div>
   <div class="menu-sub-tab"><a href="seo_market.php?page=markets&subClass=market&sub=markets&subClass=markets">Markets</a></div>

   <div class="menu-sub-tab"><a href="seo_metro.php?page=metros&sub=manage">Metros</a></div>
   <div class="menu-sub-tab"><a href="seo_addresses.php?page=metros&sub=addresses">Addresses</a></div>
   <div class="menu-sub-tab"><a href="sem_page.php?page=textpools&sub=manage">Text Pools</a></div>
   <div class="menu-sub-tab-selected"><a href="sem_page.php?page=leads&sub=manage">Leads</a></div>
         <div id="logoff"><a href="index.php?logout=1">hardik</a></div></div><div id="content-out"><div id="content-in"><div id="content-buttonheader"><a href="sem_page.php?page=leads&sub=manage"><div class="newButton-selected">Statistics</div></a><a href="sem_page.php?page=leads&sub=integration"><div class="newButton">Integration</div></a><a href="sem_page.php?page=leads&sub=integration&action=edit"><div class="newButton">Add Integration</div></a><br /><br /><br /></div>    <FORM method="POST" id="mainForm">

<div id="content-filterheader" style="width: 100%; text-align: center;">
    <table cellspacing="10" align="center">
    <tr>
       <td align="left">
       <b>Market: </b>
       <select name="ddMarket">
        <option value="">- Market -</option>
       <option value="fh38d" >Locksmith</option>       </td>

       <td align="left">
       <span>Group: </span>
       <select name="ddGroup">
        <option value="">-</option>
         <option value="1" >1</option>
         <option value="2" >2</option>
         <option value="3" >3</option>

         <option value="4" >4</option>
         <option value="5" >5</option>
         <option value="6" >6</option>
         <option value="7" >7</option>
         <option value="8" >8</option>
         <option value="9" >9</option>

       </select>
       </td>

       <td align="left">
           Nationwide<input type="checkbox" name="chkNationwide"  />
       </td>

       <td align="left">
              <span>Days: </span>

           <input type="text" size="3" name="numDays" value="30" />
       </td>

       <td>
        <input type="submit" name="btnFilter" value="Apply Filter" class="newButton-red"/>
       </td>
        <td>
        <input type="reset" name="btnClearFilter" value="Clear Filter" class="newButton-red"/>
        </td>

    </tr>
    </table>
    </div>
    </FORM>
<div id="contentFrame">
    <table class="managerTable" style="width: 100%; background-color: white;">
        <tr>
            <th>Domain Name</th>
            <th>Market/Group</th>

            <th>Requests</th>
        </tr>
        <tr bgcolor="#DEDEDE" onClick="javascript:toggleGraph('oixrs', 'getLeadsGraph.php?domainId=oixrs&d=30');" style="cursor: hand; cursor: pointer;" class="lead_row">
            <td>name</td>
            <td>market (7)</td>
            <td>1</td>

Open in new window

0
 

Author Comment

by:Nura111
ID: 36601701
nothing (when the form is sumbit right?)
0
 

Author Comment

by:Nura111
ID: 36601710
im still handeling the form from before maybe because of that:
I attched the form code:
<form id = "popup_form_{$row['id']}" method ="post" style="background-color:white; border:2px solid blue;padding:4px; width:250px; display :none; position:absolute">

			<input type="hidden" name="id" value ="{$row['id']}">

			<input type="hidden" name ="email" value ="{$row['email_address']}">

			<input type="submit" value="SpamIt" name="spamIt" style="margin-right:15px"; onclick"  >

			<input type="button" value="Close" onclick="closePopup()"/>

			

			</form>

Open in new window

0
 

Author Comment

by:Nura111
ID: 36601738
I tried before to add  window.onload = function(){ alert("welcome"); } to the same area in the code and its doesnt do anything also..
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36601751
Ok, maybe there's a javascript error somewhere
Could you provide a link to your page ?
0
 

Author Comment

by:Nura111
ID: 36601764
No I cant  its a web application on a secure server...
there is other javascript that is currently working on the page such as the function you can see before the new one I added
0
 

Author Comment

by:Nura111
ID: 36602414
the javascript is working I tried adding instead of the code:

$(document).ready(function() {
   
     alert("Hello world!");
 });


and its work ok
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602440
ok good, and what about the following (click on the spamIt submit button)?

$(document).ready(function() {
    $("form").submit(function() {
          alert("Hello world!");
    })
 });

look strange at the end :
<input type="submit" value="SpamIt" name="spamIt" style="margin-right:15px"; onclick"  >
0
 

Author Comment

by:Nura111
ID: 36602469
I erased it(the onclick")      
and no its dont show the alert maybe its because I already implement the cheking  for the sumbit in the form in main.php or its not suppose to override that?

<form id = "popup_form_{$row['id']}" method ="post" style="background-color:white; border:2px solid blue;padding:4px; width:250px; display :none; position:absolute">

			<input type="hidden" name="id" value ="{$row['id']}">

			<input type="hidden" name ="email" value ="{$row['email_address']}">

			<input type="submit" value="SpamIt" name="spamIt" style="margin-right:15px";>

			<input type="button" value="Close" onclick="closePopup()"/>

			

			</form>

Open in new window

//check if mark email as spam  //added nura 09202011
	if (isset($_POST['spamIt'])){
		//echo "try";
		 $id = $_POST['id'];
		 $email = $_POST['email'];

		 $sql= BaseModel::getSqlObject();
		
		 $query = "SELECT * FROM BlackList WHERE email_address = '$email'";	
	     
		if (($result=$sql->Query($query)) === FALSE)
           die(ShowError("Server Query Error"));
		$num = $result->num_rows;
	   
	//check if email is not already exist in BlackList
	    if ($result->num_rows == 0){
   			 $insert_query = "INSERT INTO BlackList(email_address) VALUES ('$email')";
			 
			 if (($result=$sql->Query($insert_query)) === FALSE)
           	die(ShowError("Server Insert Query Error"));
		}
		
		$insert_query =	"UPDATE ServiceRequests SET spam = 1 WHERE id = '$id'";
		if (($result=$sql->Query($insert_query)) === FALSE)
           	die(ShowError("Server Insert Query Error service"));
         
	
		
 
		
		}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602479
display :none; ?

how can you click on the sublit button in that case?
0
 

Author Comment

by:Nura111
ID: 36602484
its in a page that doing million other different things that im toggling it using togglePopUp()
I attached the whole thing  so you can see
<td style="color: red; display:none; cursor: pointer; padding: 0px 10px;"

			id="spam_{$row['id']}_body"

			onclick = "javascript:togglePopUp('popup_form_{$row['id']}');"

			>

			Mark as spam 

         

	  		 <form id = "popup_form_{$row['id']}" method ="post" style="background-color:white; border:2px solid blue;padding:4px; width:250px; display :none; position:absolute">

			<input type="hidden" name="id" value ="{$row['id']}">

			<input type="hidden" name ="email" value ="{$row['email_address']}">

			<input type="submit" value="SpamIt" name="spamIt" style="margin-right:15px";>

			<input type="button" value="Close" onclick="closePopup()"/>

			

			</form>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602498
you still have a semi colon in your submit button

how many form do you have in the page? I saw only one
0
 

Author Comment

by:Nura111
ID: 36602525
I believe just this one. but again this page is doing different things some of them im not even sure about
so can we add something more specific to the function  $("form")


 
are you talking about name="spamIt" style="margin-right:15px";>

I changed it to <input type="submit" value="SpamIt" name="spamIt" style="margin-right:15px;">

its still not doing anything when I submit (just following the initials action as I attched in 36602469 (so its refresh the page)
no alert
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602537
do you add/create the form dynamically?
0
 

Author Comment

by:Nura111
ID: 36602540
yes
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602546
you need to run the code after, once you add it (or each time you add it)
$("form").submit(function() {
          alert("Hello world!");
    })

Open in new window

0
 

Author Comment

by:Nura111
ID: 36602550
in the source code I attached if you look for  <tr bgcolor="#DEDEDE" onClick="javascript:toggleGraph('oixrs', 'getLeadsGraph.php?domainId=oixrs&d=30');" style="cursor: hand; cursor: pointer;" class="lead_row">

so by clicking the text the toggle Graph will fire up.
the form code is actually in 'getLeadsGraph.php
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602555
so in toggleGraph, at the end of the function (or if you have ajax inside, at the end of the callback function) run the code :
$("form").submit(function() {
          alert("Hello world!");
    })

Open in new window

0
 

Author Comment

by:Nura111
ID: 36602579
ok you can see toggleGrapg in the source code I attached. and its going to fire up around 200 times for this page and I need the form sumbition  to fire up only when I clicked on the specific one  (popup_form_{$row['id']}")

I will post the result in a second,
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602590
ID:36602546
<< you need to run the code after, once you add it (or each time you add it) >>

if you click 200 times or more on this link to create a form dynamically you MUST call the code each time
0
 

Author Comment

by:Nura111
ID: 36602596
its not doing anything still I attached the change
function toggleGraph(id,ajaxUrl) {
                    var fieldName = "d_" + id + "_graph"; // prefix with d_ to avoid errors when domain_id begins with a number.
                    var element = $('#' + fieldName + ' #rank_graph');
                    if (element.is(':hidden')) {
                            element.load(ajaxUrl);
                    }
                    element.toggle();
			$("form").submit(function() {
          alert("Hello world!");
 		   })
							
            }

Open in new window

0
 

Author Comment

by:Nura111
ID: 36602603
""<< you need to run the code after, once you add it (or each time you add it) >>

if you click 200 times or more on this link to create a form dynamically you MUST call the code each time"

yes I understand that but I added what you told me and its not working

how about to add something to the SPAMIT form that will fire up a function HandleForm()
using onsumbit or onclick or something like that?


0
 
LVL 82

Expert Comment

by:leakim971
ID: 36602617
if you can open/create a link to see your page I can do more, for now, I can do more. I apologize.
0
 

Author Comment

by:Nura111
ID: 36604342
oh why? :( isnt the source code enough for that??

what about what I wrote :
how about to add something to the SPAMIT form that will fire up a function HandleForm()
using onsumbit or onclick or something like that?
0
 

Author Comment

by:Nura111
ID: 36612421
ok I found where I need to put it in and its worked!!
(just the alert part for now)
Can we please continue?

thank yuo
function toggleLeadBody(id) {
					var fieldName1 = "#spam_"+ id + "_body";
                    var fieldName2 = "#sr_" + id + "_body";
					
					var element = $(fieldName1 +  ', ' + fieldName2);
                    element.toggle();   
						$(element).submit(function() {
                          alert("Hello world!");
 		  })

Open in new window

0
 

Author Comment

by:Nura111
ID: 36637821
ok so I changed the form:
now on submit its not reloading the page  only stay on the same page and perform the jquery function

alerting the string hello world when submitting the form.

I'm still stuck though in the place of implement the other issues that I need to update the the db using the form information (id and email) and change something in the screen so it will see it change (or send it again to getLeadGrafh with parameter and put the result in the    id="sr_{$row['id']}_body" element
and I know I need to use the jquery ajax but I dont know how to do it I will continue trying if you have any idea
I would be happy to hear it.

Thank you for all the help!
<form id = "popup_form_{$row['id']}" action ="" method ="post" style="background-color:white; border:2px solid blue;padding:4px; width:250px; display :none; position:absolute"  onsubmit = "return false;">

			<input type="hidden" name="id" value ="{$row['id']}">

			<input type="hidden" name ="email" value ="{$row['email_address']}">

			<input type="submit" value="SpamIt" name="spamIt" style="margin-right:15px;">

			<input type="button" value="Close" onclick="closePopup()"/>

Open in new window

0
 

Author Closing Comment

by:Nura111
ID: 36719249
Its helped get the idea I still can make it work
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now