www.webdeveloper.com
Results 1 to 14 of 14

Thread: submit form using javascript

  1. #1
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    submit form using javascript

    Hi, I'm trying to submit update a form's field with the output of another, but they don't seem to be talking?
    This is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="calendar.js" type="text/javascript"></script>
    <script src="calendar1.js" type="text/javascript"></script>
    <link href="calendar.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
    function entry()
    {
    	document.forms["formdata"].submit();
    	document.forms[0].area.value == document.forms[1].output1.value;
    }
    </script>
    <style>
    #container	{
    	background-color:#C60;
    	color:#FFF;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	padding:15px;
    }
    #subtitle	{
    	font-style:italic;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Local Session Search</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="title">
          <h1>Marketing Session Search</h1>
          <span id="subtitle">Create a link for the nearest sessions in a specified area.
          </span>
          <br />
          Would you like to include this in an email? Click here to access the <span style="font-weight:bold;">mailer</span>.
        </div>
        <div name="form1">
        	Enter the details onto the form.
            <form id="formdata" name="formdata">
                <table style="background-color:#FC6; color:#900">
                	<tr>
                    	<td>Area</td>
                        <td>
                          <select name="area" size="5">
                            <option value="NS" selected>North Sheffield</option>
                            <option value="BA">Barnsley</option>
                            <option value="NR">North Rotherham</option>
                            <option value="DO">Doncaster</option>
                            <option value="SC">S****horpe</option>
                            <option value="GC">Grimsby/Cleethorpes</option>
                            <option value="LN">Lincoln</option>
                            <option value="SK">Skegness</option>
                            <option value="SL">Boston/Spalding</option>
                            <option value="OT">Other</option>
                          </select>
                         </td>
                       </tr>
                       <tr>
                         <td>Start Date:</td>
                         <td><input type="text" name="date" id="date" />
    						<script type="text/javascript">
                            calendar.set("date");
                            </script>
                         </td>
                       <tr>
                       <tr>
                         <td>Finish Date:</td>
                         <td><input type="text" name="fdate" id="fdate" />
    						<script type="text/javascript">
                            onfocus(fdate))	{
    							document.write("date")
    						}
                            </script>
                         </td>
                       </tr>
                       <tr>
                       	<td>Include Weekends?</td>
                        <td><input name="wknd" type="radio" value="yes" checked />Yes	
                      		<input name="wknd" type="radio" value="no" />No	
                        	<br />
                           	<input name="wknd" type="radio" value="only" />Weekends only
                         </td>
                  </table> 
                  <input type="submit" value="Submit" onclick="entry();"/>
            </form>
            <table>
            	<tr>
                	<td>Your query reads:</td>
            <td id="query">
                        	<form name="output" id="output">
                              <input name="output1" type="text" id="output1" value="fill the form" />
                        </form>
                  </td>
              </tr>
          </table>
          
      </div>
    </div>
    </body>
    </html>
    tips, pointers anyone?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    When you submit the form, you change the session (in your case you reload the page). When you change the session, you lose all the JavaScript changes, because JavaScript is a client-side language.

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    Either you are really confused or I am really confused and missing something because from what I see, all you are trying to do is use the text in a textbox in the 2nd form to be the value of a select list in the 1st form.

    To do that, I don't see why you need a submit button on the 1st form. It could be just a plain button or clickable object with the appropriate onclick function.

    You are also submitting the page to itself and I can't see why you need to do that in order to transfer the data from the second form to the first.

    What exactly are you trying to do or simulate.???

  4. #4
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78
    tirna - exactly right, although the eventual aim is for the 'output' to show a concatenation of several form entries.
    I know it's not complicated, but I can't seem to do it - any help?

  5. #5
    Join Date
    Sep 2009
    Posts
    93
    Sumiting a form by using javascript we used ajax method.

    ajax means acronomus javascript and xml

  6. #6
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    Do you need to submit the form? As in:
    Do you need to send the form-data to your server for storing, or do you simply wish to keep the data stored in the browser for usage there and then?

    If you need to store the data, you need to submit the form to the server (with or without ajax), and then pick things up from there. Then you might need to do some coding on your backend of course.

    If you have no need for storage, but simply wish to perform operations on input, you can skip the submit and simple store the values of your input-fields in an array, clear the form, and continue to let the user add results to the array.
    Then you can make a button on your page that will perform the operations on all the data in the array, whatever they look like.

    As of right now though, it's a little difficult to understand what you REALLY want.

  7. #7
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78
    Hi.
    Let me say I am mightily amused that North East Lincolnshire's favourite town has had the filtering treatment - and to think I nearly included P***stone!

    Okay, so what I am aiming for is to dynamically create a URL. This would resemble an HTML form submitted with GET, except that I need it to display on screen so that others could copy and paste it and include it on emails etc.
    As an example, the output could be:
    Code:
    www.radio.com?area=pennine&freq=1085&show=drivetime
    - you know the kind of thing.

    I may in fact not need javascript at all - effectively I'm just posting the output of a form back to the same page.

    Any further hints about how to do this would be appreciated!

  8. #8
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    ?? What happened to the cart, script and paypal??

  9. #9
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78
    eCommerce? Not here...

  10. #10
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    Drat, I must have mixed up two threads somehow.

    However, my question remains the same:
    Do you need to store the submitted data on the server?
    If so, it is probably caught by some server script that can handle the data? And if so, you have all the data in the post right there, to put into the form on the result-page or anywhere you might want it...

    If you don't need anything to go to the server, you don't have to submit it to the server in the first place....Just pick up the data from the form when a normal button is pressed and perform your operations then.

  11. #11
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78
    Hi Spinner.
    No I don't need to go the server.

    I guess what I am asking is how to rewrite my function so that the form data can be sent to another element, in this case a text input.

    This is how I have it:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="calendar.js" type="text/javascript"></script>
    <script src="calendar1.js" type="text/javascript"></script>
    <link href="calendar.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
    function entry()
    {
    	//document.forms["formdata"].submit();
    	var area = '';
    	//document.forms['formdata'].area.value = area;
    	document.elements["output1"].value = area;
    }
    </script>
    <style>
    #container	{
    	background-color:#C60;
    	color:#FFF;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	padding:15px;
    }
    #subtitle	{
    	font-style:italic;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Local Session Search</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="title">
          <h1>Marketing Session Search</h1>
          <span id="subtitle">Create a link for the nearest sessions in a specified area.
          </span>
          <br />
          Would you like to include this in an email? Click here to access the <span style="font-weight:bold;">mailer</span>.
        </div>
        <div name="form1">
        	Enter the details onto the form.
            <form id="formdata" name="formdata" action="#" onsubmit="entry(); return false">
                <table style="background-color:#FC6; color:#900">
                	<tr>
                    	<td>Area</td>
                        <td>
                          <select name="area" id="area"size="5">
                            <option value="NS" selected>North Sheffield</option>
                            <option value="BA">Barnsley</option>
                            <option value="NR">North Rotherham</option>
                            <option value="DO">Doncaster</option>
                            <option value="SC">S****horpe</option>
                            <option value="GC">Grimsby/Cleethorpes</option>
                            <option value="LN">Lincoln</option>
                            <option value="SK">Skegness</option>
                            <option value="SL">Boston/Spalding</option>
                            <option value="OT">Other</option>
                          </select>
                         </td>
                       </tr>
                       <tr>
                         <td>Start Date:</td>
                         <td><input type="text" name="date" id="date" />
    						<script type="text/javascript">
                            calendar.set("date");
                            </script>
                         </td>
                       <tr>
                       <tr>
                         <td>Finish Date:</td>
                         <td><input type="text" name="fdate" id="fdate" />
    						
                         </td>
                       </tr>
                       <tr>
                       	<td>Include Weekends?</td>
                        <td><input name="wknd" type="radio" value="yes" checked />Yes	
                      		<input name="wknd" type="radio" value="no" />No	
                        	<br />
                           	<input name="wknd" type="radio" value="only" />Weekends only
                         </td>
                  </table> 
                  <input type="submit" value="Submit"/>
            </form>
            <table>
            	<tr>
                	<td>Your query reads:</td>
            <td id="query">
                        	<form name="output" id="output">
                              <input name="output1" type="text" id="output1" value="fill the form" />
                        </form>
                  </td>
              </tr>
          </table>
          
      </div>
    </div>
    </body>
    </html>
    That's all!

  12. #12
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    1: Create the function to move the data between 2 fields
    function moveValueBetween(from,to){
    if (document.getElementById(from)){
    if (document.getElementById(to)){
    document.getElementById(to).value=document.getElementById(from).value;
    }
    }
    }


    2: Replace your submit-button with
    <input type="button" value="Click me" onclick="moveValueBetween('input_id_1','input_id_2');"/>


    A very quick fix, but I gotta go.

  13. #13
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78
    Hi, if anyone is still listening...
    So I've gone over to AJAX and it almost works, except that the returned data isn't being picked up.

    The form:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    script language="javascript" type="text/javascript" src="/js/common.min.js?1266866725">
    </script>
    <script src="calendar.js" type="text/javascript"></script>
    <script src="calendar1.js" type="text/javascript"></script>
    <link href="calendar.css" type="text/css" rel="stylesheet" />
    <style>
    #container    {
        background-color:#C60;
        color:#FFF;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        padding:15px;
    }
    #subtitle    {
        font-style:italic;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Local Session Search</title>
    </head>

    <body>
    <script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function ajaxFunction(){
        var ajaxRequest;  // The variable that makes Ajax possible!
        
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                document.output.output1.value = ajaxRequest.responseText;
            }
        }
        ajaxRequest.open("GET", "text.php", true);
        ajaxRequest.send(null); 
    }

    //-->
    </script>
    <div id="container">
        <div id="title">
          <h1>Marketing Session Search</h1>
          <span id="subtitle">Create a link for the nearest sessions in a specified area.
          </span>
          <br />
          Would you like to include this in an email? Click here to access the <span style="font-weight:bold;">mailer</span>.
        </div>
        <div name="form1">
            Enter the details onto the form.
            <form method="get" name="formdata" id="formdata" onChange="ajaxFunction();">
                <table style="background-color:#FC6; color:#900">
                    <tr>
                        <td>Area</td>
                        <td>
                          <select name="area" id="area" size="5" >
                            <option value="NS" selected>North Sheffield</option>
                            <option value="BA">Barnsley</option>
                            <option value="NR">North Rotherham</option>
                            <option value="DO">Doncaster</option>
                            <option value="SC">S****horpe</option>
                            <option value="GC">Grimsby/Cleethorpes</option>
                            <option value="LN">Lincoln</option>
                            <option value="SK">Skegness</option>
                            <option value="SL">Boston/Spalding</option>
                            <option value="OT">Other</option>
                          </select>
                         </td>
                       </tr>
                       <tr>
                         <td>Start Date:</td>
                         <td><input type="text" name="date" id="date"/>
                            <script type="text/javascript">
                            calendar.set("date");
                            </script>
                         </td>
                       <tr>
                       <tr>
                         <td>Finish Date:</td>
                         <td><input type="text" name="fdate" id="fdate"/>
                            <script type="text/javascript">
                            onfocus(fdate))    {
                                document.write("date")
                            }
                            </script>
                         </td>
                       </tr>
                       <tr>
                           <td>Include Weekends?</td>
                        <td><input name="wknd" type="radio" value="MTWHFSU" checked />Yes    
                              <input name="wknd" type="radio" value="MTWHF" />No    
                            <br />
                               <input name="wknd" type="radio" value="SU" />Weekends only
                         </td>
                  </table> 
                  
            </form>
            <table>
                 <tr>
                    <td>Your query reads:</td>
            <td id="query">
                            <form name="output" id="output">
                              <input name="output1" type="text" value="Fill in the form" size="50" />
                </form>
                  </td>
              </tr>
              <tr>
                  <td colspan="2"><a href="">See the result</a></td>
              </tr>
          </table>
          
      </div>
    </div>
    </body>
    </html> 
    ...and the back end (text.php)...

    PHP Code:
    <?php
        
    // details sent from form
                
    $area=$_GET['area'];
                
    $sdate=$_GET['date'];
                
    $fdate=$_GET['date'];
                
    $wkend=$_GET['wkend'];
        
        
    // process
                
    $area "?Location=".$area;
                
    $sdate "&AfterDate=".$sdate;
                
    $fdate "&BeforeDate=".$fdate;
                
    $wkend "&Days=".$wkend;
                    
        
    // construct text
                
    $common "http://www.b.co.uk/SessionSearcher/ShowResults.aspx";
                
    $sweep $common.$area.$sdate.$fdate.$wkend;
                echo 
    $sweep;
        
    ?>
    As you can see, the contents of the GET variables is not being included.
    Can anyone tell me why?

  14. #14
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78
    And just to amplify, the script seems to work okay if the form is submitted by a normal button, and the landing page just echo's $sweep.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles