[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

jquery UI issue with form submission

Posted on 2012-12-25
4
Medium Priority
?
255 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
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 2000 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)

656 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