JavaScript - Toggle A Form Value W/ Jquery?

This toggle form action not working

Code:

<script language="JavaScript">
function OnSubmitForm()
{
  if(document.pressed == 'SubmitPage1')
  {
   document.myForm.action ="Page1.php";
  }
  if(document.pressed == 'SubmitPage2')
  {
   document.myForm.action ="Page2.php";
  }
  if(document.pressed == 'SubmitPage3')
  {
    document.myForm.action ="Page3.php";
  }
  return true;
}
</script>

</head>
<form name="myForm" method='post'>

<button  type='submit' onSubmit='document.pressed=this.value' value='SubmitPage1' >
<button  type='submit' onSubmit='document.pressed=this.value' value='SubmitPage2' >
<button  type='submit' onSubmit='document.pressed=this.value' value='SubmitPage3' >
</form>

Hello

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
http://www.watphotos.com/introductio...otography.html

And here is the code in question:

Code:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

I have two questions...

Question 1
How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2
The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

Thanks in advance!

I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is.

Here is the code.

Code:

// BEGIN JAVASCRIPT
$(function(){
	
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'your email',
			'yourmessage'  :  'I would like to inquire about'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
	$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });

    //form validation
    $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
    $('#submit').click(function(){
        //remove classes
        $('#sendamessage input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error'); // css class
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid'); // css class
            }
        });     
        
        if(!error) {
        	// this is where I get confused. How do I make this send the form?
        	alert('Data sent');
    		});
        } 						
    }); 	
});
// END JAVASCRIPT


        <form method="post" action="" onsubmit="return validateForm()" >
			<input type="hidden" name="ccf_customhtml" value="1" />
			<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
			<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
            <input type="hidden" name="required_fields" value="" />

            	<label for="name">Name</label>
            		<input type="text" name="name" id="name" value="your name" /> 
            
            	<label for="email">Email</label>
            		<input type="text" name="email" id="email" value="your email" /> 
            
            	<label for="yourmessage">Your Message</label>
            		<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>

            		<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
        </form>

I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent.

Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page.

Cheers!
-Dave

I'm using the jquery plugin found here. I love the look but I have a form that uses functions like this:

Code:

function cascadeCountry(value) {
   if (document.getElementById("srchlookstate_province") != null) {
      http.open('get', 'cascade_search.php?a=country&v=' + value );
      document.getElementById('srchlookstate_province').innerHTML="  "+loadingTag;
      http.onreadystatechange = handleResponse;
      http.send(null);
   }
}

So, when you select a country and it retrieves the state/province text input, the jquery css is not applied to it. Is there something I need to add to the code above or to the jquery initialization code he

Code:

$(function() {
	$("form.jqtransform").jqTransform();
});

Basically I can't get it to work. I'm following this tutorial and I'm not able to hide the error messages, or just get the form to submit.

I could really use some direction.

Here is the page I am working on: http://www.mustlovepink.com/public_html/contact.php

I have created a php script that POSTs to another page sendmail.php which then redirects to a thanks/successful page.

Is it possible to have the form submit and return a thank you message on the same page.

basically submit the form without reloading.

I am trying to perform an AJAX lookup during form validation onsubmit. It is important that it takes place during submit, but it seems to always return true and allow the form to post even when it should not. I have tried putting the AJAX portion in its own function and having it return true or false to the validation function but also does not seem to work. Here is what the code looks like...
Code:

$("#companyform").submit(function() {
			$.ajaxSetup({ cache: false });
			$.post("ajax_v2Functions.cfm", { coNum: $("#companyNumber").val() }, 			
				function(response) { 
					if(response != "") {
						alert("That company number is already in use by " + response);
						$("#companyNumber").focus();
						return false;
					}
				return false;
			} , "html");
			if($("#companyname").val() == "") {
				alert("The company name cannot be left blank.");
				$("#companyname").focus();
				return false;
			}
			if($("#companyNumber").val() == "") {
				alert("The company number cannot be left blank.");
				$("#companyNumber").focus();
				return false;
			}
	});

Hi,

Having worked out how to send one input data using ajax, I then needed to send a form with multiple inputs. I believe I can't do this with AJAX so have tried to implement it using JQuery.

The problems I am having is that my page is refreshing when I click on submit and the data is not being sent.

I am more than happy to look at other ways to do this if JQuery is not the answer. All I want is a page that doesn't refresh or redirect but does submit a form.

My form is:
Code:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".submit.contents").click(function(){
var para1 = $('#para1').val();
var para2 = $('#para2').val();
var para3 = $('#para3').val();
var para4 = $('#para4').val();
var para5 = $('#para5').val();
var para6 = $('#para6').val();

var dataString = ('para1='+ para1)+('para2='+ para2)+('para3='+ para3)+('para4='+ para4)+('para5='+ para5)+('para6='+ para6);
var data = 'datastring='+encodeURI(document.getElementById('datastring').value);

$.ajax ('insertcontents.php',data,function(data){
	$('.result').html(data);}
});
});
</script>
</head>
<body>
<form action="" name="contents" id="contents" method="post"/>
		<div class="standard">
		<div class="scroll">
			<textarea rows="6" cols="60" class="input" name="para1" id="para1"  >
Insert Paragraph 1
			</textarea>
		</div>
	<br />
	<br />

		<div class="scroll">
			<textarea rows="6" cols="60" class="input" name="para2" id="para2"  >
Insert Paragraph 2
			</textarea>
		</div>
	<br />
	<br />

		<div class="scroll">
			<textarea rows="6" cols="60" class="input" name="para3" id="para3" >
Insert Paragraph 3
			</textarea>
		</div>
	<br />
	<br />
		<div class="scroll">
			<textarea rows="6" cols="60" class="input" name="para4" id="para4" >
Insert Paragraph 4
			</textarea>
		</div>
	<br />
	<br />

		<div class="scroll">
			<textarea rows="6" cols="60" class="input" name="para5" id="para5" >
Insert Paragraph 5
			</textarea>
		</div>
	<br />
	<br />

		<div class="scroll">
			<textarea rows="6" cols="60" class="input" name="para6" id="para6" >
Insert Paragraph 6
			</textarea>
	<br />
		</div>
	<br />
	</div>
	<br />
	<br />
		<input type="submit" value="Submit" id="contents" name="contents" />
	</form>

My insertcontents.php is:
PHP Code:
<?php
$con = mysql_connect("localhost","user","password");
if (!$con)
    {
    die('Could not connect ' . mysql_error());
    }

mysql_select_db("mydb", $con);

//mysql_real_escape

$sql="INSERT INTO content (PId,para1,para2,para3,para4,para5,para6,date)
VALUES
('{$_SESSION['Id']}','{$_POST['para1']}','{$_POST['para2']}','{$_POST['para3']}','{$_POST['para4']}','{$_POST['para5']}','{$_POST['para6']}',NOW())";

    $result=mysql_query($sql) or die('Error: ' . mysql_error());
    
echo "Thank you for your post";

mysql_close($con);
?>

Greetings,

I am trying to make a form that collects "Number of Children" a parent has. If they select "4" from the select input, then I want to slidetoggle out the appropriate divs, one for each child.

Code:

<select id="NumberofChildren" name="NumberofChildren">
        <option value="0">0</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>
</select>

The div IDs to display are 1child, 2child, 3child, 4child, 5child.

I have been able to use slidetoggle in the past when attached to a button, but this one has me lost. Anyone know how to accomplish this? Your help is greatly appreciated! Thank you!

All,
I currently have a form on my page and I found this on the jQuery website:
Code:

$.post("test.php", $("#testform").serialize());

However, I want to do something after the results are posted so I think I need a hybrid of the one above and this one:
Code:

$.post("test.php", function(data) {
   alert("Data Loaded: " + data);
 });

Any help would be greatly appreciated. My form id is saveCrop, not sure if that makes a difference or not. Thanks in advance!

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance