how to solve this particular case in jquery?
I 开发者_开发知识库am not a Javascript Guru. But I found myself in a very tricky situation while writing a Jquery for one of Application. Situation:
I have a form with different field. One of the field containing multiple values, say phone numbers. I am filling those numbers in a pop up - lightbox. Now, the problem I am facing is that I want to click the form button to submit my form but My numbers are coming from popup box. Ok let me try to describe the whole flow in points:-
- Form has mutiple fields. For One field - number, I am showing the popup box.
- I click a button on the popup box which sends me to the form. But I am not able to find those numbers in the form.
- Final click is on the form button which sends all the information to the server side.
But I am not getting those value of numbers here on the form. So, Can any one suggest me the best way to resolve this issue?
Note: - I tried my best to put my question in a clear way. But If you guys could not find my words very clear, Sorry!
I'm not entirely sure I understand but I'll take a stab:
Option 1) Write all the values from the lightbox from back to the first form using $(selector).val();
Option 2) Copy the entire lightbox form into a hidden div inside the first form.
The popup box element is probably being added outside your form, so any input elements in the popup won't be submitted when you submit the form. To check this use a DOM Inspector (i.e. firebug in firefox or the dev tools in ie8 or chrome) to see where the element containing the lightbox is (it's usually at the end of the page).
To solve this you might be able to configure the lightbox to add it's div within the form, or else just use a bit of javascript to grab the value of the input element on the popup and populate a hidden input that's actually within the form before submitting.
Hi does this help . It creates a popup there you can edit data then populate back into the main page which is referenced by opener just before closing the popup.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
<!--
function fn() {
var popupwin = window.open("","","width=500,height=300");
popupwin.document.open();
popupwin.document.write("<html><head><script>function onOk(){opener.parent.document.getElementById('txtnumberfield').value=document.getElementById('txtpopup').value; window.close();}</script></head><body>Here are some popup values <input type='text' value='value from popup' name=txtpopup id=txtpopup />"+
"<input type=button onclick='onOk()' value='Done editing' /></body></html>");
popupwin.document.close();
}
//-->
</script>
<BODY>
<form action="#">
Number <input type="text" id="txtnumberfield" /> <input type="button" value="open popup" onclick="fn();" /><br/>
<input type="submit" />
</form>
</BODY>
</HTML>
If I understand your question correctly, one solution would be to set the control that closes your popup/lightbox to first populate some hidden fields on the underlying form. Grab the values from the form elements within the lightbox window:
$('#the_lightbox').find('.multiple_phone_fields')
.each( function(i,e){ // for each field
$('<input name=' + $(this).attr('name') + 'type="hidden"/>') // new, hidden
.val(this.value) // set hidden field value from this field
.appendTo('#the_main_form'); // and add to the underlying form
});
When you then submit #the_main_form, those hidden fields and values will come along. Obviously, you'll need to adjust the selectors for the specifics of your popup window or lightbox.
加载中,请稍侯......
精彩评论