Solved

jquery UI issue with form submission

Posted on 2012-12-25
4
250 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
  • 2
4 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 38720338
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 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38720622
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
ID: 38720703
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 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38720731
well yes, it is working but when what is wrong with my function, whay it is troubling me then

Thanks
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

803 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