Link to home
Start Free TrialLog in
Avatar of Nura111
Nura111

asked on

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


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?

Avatar of leakim971
leakim971
Flag of Guadeloupe image

which method? get ? post?
Avatar of Nura111
Nura111

ASKER

which eer is better for this case
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
<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

Avatar of Nura111

ASKER

where in this code is the form $post or Get is submitted to process.php ?
Avatar of Nura111

ASKER

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
Avatar of Nura111

ASKER

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?
check line 5 of ID:36590059
Avatar of Nura111

ASKER

so the way is work is when sumbitting the form its will just go there? where should i put this code in the page?
yes,
the right place is in the head section
Avatar of Nura111

ASKER

but still where is where in this code is the form $post or Get is submitted to process.php ?
the first parameter of $.get or $.post is the url
check line 10 :      $("form").attr("action"),
Avatar of Nura111

ASKER

ok and please explain:
 function(data) { $("#results").html( data ); }
put the result inside the element with the ID "result"
Avatar of Nura111

ASKER

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?
Avatar of Nura111

ASKER

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:
https://www.experts-exchange.com/questions/27323168/a-form-submit-action-and-handle-in-php.html?anchorAnswerId=36588633#a36588633

do you think its solving it? im having a hard time to understand how to implement it
Avatar of Nura111

ASKER

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??
$("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/

Avatar of Nura111

ASKER

Im sorry I dont understand. thank you for the try
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.
Avatar of Nura111

ASKER

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
https://www.experts-exchange.com/questions/27323168/a-form-submit-action-and-handle-in-php.html?anchorAnswerId=36588633#a36588633
>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
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

Avatar of Nura111

ASKER

---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)
 



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
...without any other modification of your pages.
Avatar of Nura111

ASKER

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
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
Avatar of Nura111

ASKER

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  
>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) >>
Avatar of Nura111

ASKER

ok how do we proceed from here?
ID:36590438
ID:36601176
Avatar of Nura111

ASKER

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.
don't modify anything, you only need to add

ID:36601046
ID:36601084
Avatar of Nura111

ASKER

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
<< put the code provided in the head section >>

you did not understand that?
Avatar of Nura111

ASKER

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']}
the script don't worry about your form id, name...
Avatar of Nura111

ASKER

ok its there its not doing anything
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)
Avatar of Nura111

ASKER


<!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

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

Avatar of Nura111

ASKER

nothing (when the form is sumbit right?)
Avatar of Nura111

ASKER

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

Avatar of Nura111

ASKER

I tried before to add  window.onload = function(){ alert("welcome"); } to the same area in the code and its doesnt do anything also..
Ok, maybe there's a javascript error somewhere
Could you provide a link to your page ?
Avatar of Nura111

ASKER

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
Avatar of Nura111

ASKER

the javascript is working I tried adding instead of the code:

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


and its work ok
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"  >
Avatar of Nura111

ASKER

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

display :none; ?

how can you click on the sublit button in that case?
Avatar of Nura111

ASKER

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

you still have a semi colon in your submit button

how many form do you have in the page? I saw only one
Avatar of Nura111

ASKER

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
do you add/create the form dynamically?
Avatar of Nura111

ASKER

yes
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

Avatar of Nura111

ASKER

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
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

Avatar of Nura111

ASKER

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,
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
Avatar of Nura111

ASKER

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

Avatar of Nura111

ASKER

""<< 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?


if you can open/create a link to see your page I can do more, for now, I can do more. I apologize.
Avatar of Nura111

ASKER

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?
Avatar of Nura111

ASKER

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

Avatar of Nura111

ASKER

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

Avatar of Nura111

ASKER

Its helped get the idea I still can make it work