jquery UI issue with form submission

Gurpreet Singh Randhawa
Gurpreet Singh Randhawa used Ask the Experts™
on
I have the following form inside the jquery UI and when i try to submit it, my alert is coming as empty

please guide why

my Form Page:

 <form id="formcountry" class="icountry" name="formcountry">
        <label>Country Name</label>
        <input type="text" id="Country" class="input-block-level" name="Country" placeholder="Country Name">
        <span class="help-block">Type Country Name as [USA, India, Canada].</span>
        <label>Country Code</label>
        <input type="text" id="countrycode" class="input-large" name="countrycode" placeholder="Country Code">
        <label>Status</label>
        <select name="status" id="status">
          <option value="Yes">Visible</option>
          <option value="No">Hidden</option>
        </select>
        <br>
        <input type="button" class="btn submitcountry" name="submit" id="submit" value="Submit">
        <input type="hidden" name="ID" value="1" id="ID" />
        <input type="hidden" name="old_Country" value="" id="old_Country" />
      </form>

Open in new window


my jquery UI Code

$('#ui-tabs-3').on('click','.submitcountry',function() {
        var dataString = $("form").serialize();
        alert(dataString);
        $.ajax({
            type:"POST",
            url:"save.cfm?mode=countryadd",
            cache:false,
            data:dataString,
            success:function(result) {
            var i = $("#AddCountry").html(result);
           alert(i);
         }
     });
 });

Open in new window


i have the jquery ui is the 3rd tab, when i click submit. it is just showing me empty alert rather than a form values, please guide why it is wrong

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Mark StegglesWeb Developer
Top Expert 2006

Commented:
Hey there,

var i = $("#AddCountry").html(result);

Open in new window


Seems like you are attaching a jquery command to a variable. Doesn't seem like that should work. Any js errors? Maybe you just want to do:

var i = result;

Open in new window

Gurpreet Singh RandhawaCEO

Author

Commented:
thanks fotr the Tip,

But the Issue is with the above ones as it does seems to serialize the form values, i am using the form in the jquery UI

The tip u game me is good, but even what i was working it is working

Cheers
Top Expert 2010
Commented:
Hi,

Serialize works just fine. I think, there must be some issues with tab click event.
Can you add a button like how I've added below and check whether serialize is fine?

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script>
	function submitTest() {
		var dataString = $("form").serialize();
		alert(dataString);
	}
</script>

<form id="formcountry" class="icountry" name="formcountry">
	<label>Country Name</label> <input type="text" id="Country"
		class="input-block-level" name="Country" placeholder="Country Name">
	<span class="help-block">Type Country Name as [USA, India,
		Canada].</span> <label>Country Code</label> <input type="text"
		id="countrycode" class="input-large" name="countrycode"
		placeholder="Country Code"> <label>x</label> <select
		name="status" id="status">
		<option value="Yes">Visible</option>
		<option value="No">Hidden</option>
	</select> <br> <input type="button" class="btn submitcountry" name="submit"
		id="submit" value="Submit"> <input type="hidden" name="ID"
		value="1" id="ID" /> <input type="hidden" name="old_Country" value=""
		id="old_Country" />
</form>
<button onclick="javascript: submitTest();">Test</button>

Open in new window

Gurpreet Singh RandhawaCEO

Author

Commented:
well yes, it is working but when what is wrong with my function, whay it is troubling me then

Thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial