• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 402
  • Last Modified:

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?

0
Nura111
Asked:
Nura111
  • 38
  • 32
  • +1
1 Solution
 
leakim971PluritechnicianCommented:
which method? get ? post?
0
 
Nura111Author Commented:
which eer is better for this case
0
 
leakim971PluritechnicianCommented:
>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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
<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
 
Nura111Author Commented:
where in this code is the form $post or Get is submitted to process.php ?
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
check line 5 of ID:36590059
0
 
leakim971PluritechnicianCommented:
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
yes,
the right place is in the head section
0
 
Nura111Author Commented:
but still where is where in this code is the form $post or Get is submitted to process.php ?
0
 
leakim971PluritechnicianCommented:
the first parameter of $.get or $.post is the url
check line 10 :      $("form").attr("action"),
0
 
Nura111Author Commented:
ok and please explain:
 function(data) { $("#results").html( data ); }
0
 
leakim971PluritechnicianCommented:
put the result inside the element with the ID "result"
0
 
Nura111Author Commented:
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
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
$("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
 
Nura111Author Commented:
Im sorry I dont understand. thank you for the try
0
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
>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
 
maeltarCommented:
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
 
Nura111Author Commented:
---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
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
...without any other modification of your pages.
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
>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
 
Nura111Author Commented:
ok how do we proceed from here?
0
 
leakim971PluritechnicianCommented:
ID:36590438
ID:36601176
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
don't modify anything, you only need to add

ID:36601046
ID:36601084
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
<< put the code provided in the head section >>

you did not understand that?
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
the script don't worry about your form id, name...
0
 
Nura111Author Commented:
ok its there its not doing anything
0
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:

<!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
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:
nothing (when the form is sumbit right?)
0
 
Nura111Author Commented:
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
 
Nura111Author Commented:
I tried before to add  window.onload = function(){ alert("welcome"); } to the same area in the code and its doesnt do anything also..
0
 
leakim971PluritechnicianCommented:
Ok, maybe there's a javascript error somewhere
Could you provide a link to your page ?
0
 
Nura111Author Commented:
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
 
Nura111Author Commented:
the javascript is working I tried adding instead of the code:

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


and its work ok
0
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
display :none; ?

how can you click on the sublit button in that case?
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
you still have a semi colon in your submit button

how many form do you have in the page? I saw only one
0
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
do you add/create the form dynamically?
0
 
Nura111Author Commented:
yes
0
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Nura111Author Commented:
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
 
Nura111Author Commented:
""<< 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
 
leakim971PluritechnicianCommented:
if you can open/create a link to see your page I can do more, for now, I can do more. I apologize.
0
 
Nura111Author Commented:
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
 
Nura111Author Commented:
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
 
Nura111Author Commented:
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
 
Nura111Author Commented:
Its helped get the idea I still can make it work
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 38
  • 32
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now