homepage Welcome to WebmasterWorld Guest from 54.167.144.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Jquery Form plugin : dynamic target/multiple forms
enotalone

10+ Year Member



 
Msg#: 4613666 posted 11:41 pm on Sep 29, 2013 (gmt 0)

Hello, I am using the form plugin from [malsup.com...]

I am trying to set the target div to be updated dynamically. At the moment this is what the code looks like but instead I want to pas a different value for target through a hidden form field, so the #target2 can be dynamically changed to #target20, #target40 etc. Thanks.


<script type="text/javascript">
$(document).ready(function() {

$('.htmlForm').ajaxForm({
target: '#target2',

success: function() {
$('#target2').fadeIn('slow');
}
});
});
</script>


Thank you.

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4613666 posted 12:26 am on Sep 30, 2013 (gmt 0)


$(document).ready(function() {
var target = $('#target').val();

$('.htmlForm').ajaxForm({
target: target,

success: function() {
$(target).fadeIn('slow');
}
});
});

Then in your html, just give your hidden input the id specified in the code above:

<input id="target" value="target2">

enotalone

10+ Year Member



 
Msg#: 4613666 posted 12:37 am on Sep 30, 2013 (gmt 0)

Thank you Fotiman, I updated the code to


<script type="text/javascript">
$(document).ready(function() {
var target = $('#target').val();

$('.htmlForm').ajaxForm({
target: target,

success: function() {
$(target).fadeIn('slow');
}
});
});
</script>


<form class="htmlForm" action="ajax-data.php" method="post">
<input type="hidden" id="target" value="target2">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>


<div id="target2">div id=target2</div>



But when the form is submitted the div with target2 id does not update. What did I do wrong? thanks.

enotalone

10+ Year Member



 
Msg#: 4613666 posted 9:31 pm on Oct 1, 2013 (gmt 0)

Could anyone take a look into this please?

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4613666 posted 1:53 pm on Oct 2, 2013 (gmt 0)


But when the form is submitted the div with target2 id does not update.

Do you see the target div fade in when you submit the form? Because that's all it looks like you're attempting to do.

enotalone

10+ Year Member



 
Msg#: 4613666 posted 9:51 pm on Oct 2, 2013 (gmt 0)

Thanks, not trying to just to fade out/in a div. I am trying to load the html ajax-data.php echos. With the code above nothing happens at all when the forms gets submitted.

enotalone

10+ Year Member



 
Msg#: 4613666 posted 9:57 pm on Oct 2, 2013 (gmt 0)

This code will do submit the form and refresh the div with the html from ajax-data.php into div with id=target. however I want to load the data into a div id that is indicated into thte form's hidden field (target) which in the code bellow is set to z22.


<script type="text/javascript">
$(document).ready(function() {

$('.htmlForm').ajaxForm({
target: target,
delegation: true,

success: function() {
$(target).fadeIn('slow');
}

});
});
</script>


</head><body>

<form class="htmlForm" action="ajax-data.php" method="post">
<input type="hidden" name="target" value="z22" />
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>

<div id="target">div id=target</div>

<div id="z22">div id=z22</div>

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4613666 posted 5:12 pm on Oct 3, 2013 (gmt 0)

The problem was that the value of your target element did not start with '#', so the code just needs a slight modification to make sure it's a valid id selector. Here's a working example:


$(document).ready(function() {
var target = $('#target').val();
// Make sure target is a valid id selector (starts with #)
target = (target.indexOf('#') === 0? target : '#' + target);

$('.htmlForm').ajaxForm({
target: target,

success: function() {
$(target).fadeIn('slow');
}
});
});

enotalone

10+ Year Member



 
Msg#: 4613666 posted 5:27 pm on Oct 3, 2013 (gmt 0)

Perfect! works great, many thanks Fotiman. I appreciate your help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved