Check for duplicates and submit

#1
rekted

Posted 04 December 2010 - 12:03 AM

Newbie

Members
3 posts

So I'm new to web developement and programming in general and I've been playing around with PHP and started developing a little website and i want to make it easier for users to submit.

I have 9 radio buttons (oh and I'm using code igniter)


<?php

        echo form_radio('name1', '3')." 3 ";

        echo form_radio('name1', '2')." 2 ";

        echo form_radio('name1', '1')." 1 ";

        echo form_radio('name2', '3')." 3 ";

        echo form_radio('name2', '2')." 2 ";

        echo form_radio('name2', '1')." 1 ";

        echo form_radio('name3', '3')." 3 ";

        echo form_radio('name3', '2')." 2 ";

        echo form_radio('name3', '1')." 1 ";

    ?>

So i want something to check for duplicates and display an error (preferable a div) without reloading the page and i would also like the form to submit without the submit button (for example hotornot.com but with 3 sets of radio buttons).

I understand this needs jQuery and possibly AJAX (?) and i'm completely clueless with them both.

#2
Vladimir

Posted 04 December 2010 - 04:43 AM

Learning Programmer

Members
79 posts

I could help you with this if you provide some meaningful HTML, because I don't know CI and names like "name1, name2, name3" do not provide enough context. You can start with this code to perform validation (note that I did not test the code, because you did not provide HTML code):

var $name1 = $('form #input[name='name1']:checked'); // get currently checked radio with name="name1"
var name1Val = $('#name1').val(); // get value of that radio (e.g. 1, 2, 3)

// do the same for name2 and name3

if (name1Val === name2Val || name2Val === name3Val || name1Val === name3Val) {
    $('<div class="error">Duplications!</div>').appendTo('form');
}

To submit form with ajax you can use above code to test if user selected all radios and jQuery plugin: jQuery Form Plugin

#3
rekted

Posted 04 December 2010 - 02:15 PM

Newbie

Members
3 posts


<form method="post" action="vote" />

    <input type="radio" value="1" name="name1" />1

    <input type="radio" value="2" name="name1" />2

    <input type="radio" value="3" name="name1" />3

    <br/>

    <input type="radio" value="1" name="name2" />1

    <input type="radio" value="2" name="name2" />2

    <input type="radio" value="3" name="name2" />3

    <br/>

    <input type="radio" value="1" name="name3" />1

    <input type="radio" value="2" name="name3" />2

    <input type="radio" value="3" name="name3" />3

    <br/>

    <input type="submit" />

</form>

Here's what the thing looks like in html, i'll start reading up on that plugin.

#4
Vladimir

Posted 05 December 2010 - 12:46 AM

Learning Programmer

Members
79 posts

I added comments to the code, but feel free to ask questions if you don't understand anything:


<html>


<body>


<form method="post" action="" />

    <input type="radio" value="1" name="name1" />1

    <input type="radio" value="2" name="name1" />2

    <input type="radio" value="3" name="name1" />3

    <br/>

    <input type="radio" value="1" name="name2" />1

    <input type="radio" value="2" name="name2" />2

    <input type="radio" value="3" name="name2" />3

    <br/>

    <input type="radio" value="1" name="name3" />1

    <input type="radio" value="2" name="name3" />2

    <input type="radio" value="3" name="name3" />3

    <br/>

    <input type="submit" />

</form>


<!-- Load jQuery from Google CDN -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>

$(function() { // execute function when DOM is ready

  var validateData = function() {

	$('.error').remove(); // remove all errors


    // get form values

	var name1 = $('form input[name="name1"]:checked').val(),

	    name2 = $('form input[name="name2"]:checked').val(),

	    name3 = $('form input[name="name3"]:checked').val();


	var readyToSubmit = true,

	    isValid = true,

	    error = '',

	    values = {},

	    names = {name1: name1, name2: name2, name3: name3};


    // start validation 

	$.each(names, function(k, v) {

		if (!v) { // user did not cheched radio

			readyToSubmit = false;

		} else if (v in values) { // value is not unique

			error = values[v] + ' and ' + k + ' have the same value';

			isValid = false;

		} else { // add value to the dict

			values[v] = k;

		}

	});


	if (readyToSubmit) { // form is ready is submit (user checked all radios)

		if (isValid) { // all values are unique

			alert('Form can be submit now'); // replace this with ajax submit

		} else { // display error the user

			$('<div class="error">' + error + '</div>').appendTo($('form'));

		}

	}

  }


  // validate data whenever user check radio

  $('form input[name="name1"]').change(validateData);

  $('form input[name="name2"]').change(validateData);

  $('form input[name="name3"]').change(validateData);

});

</script>


</html>


</html>

#5
rekted

Posted 06 December 2010 - 04:51 AM

Newbie

Members
3 posts

This works flawlessly, thanks a bunch.

It took me a while to get it working because apparently i couldn't have the sets of radios in different divs, no wonder why my other solutions weren't working :mad: