Solved

jquery UI issue with form submission

Posted on 2012-12-25
4
249 Views
Last Modified: 2012-12-26
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
0
Comment
Question by:myselfrandhawa
  • 2
4 Comments
 
LVL 30

Expert Comment

by:Steggs
Comment Utility
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

0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
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
0
 
LVL 15

Accepted Solution

by:
StealthyDev earned 500 total points
Comment Utility
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

0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
well yes, it is working but when what is wrong with my function, whay it is troubling me then

Thanks
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now