I am adding some dynamic input controls via Jquery, I append them in the form, its working fine.
But these input controls are part of popup which I show using LightBox_me.js and when ever I open the hidden div with lihgtbox_me.js it puts these controls at the end of body tag and out of the form. Due to which data in these input controls are not being submitted with from.
Here is the html
<div id="attach" style="display:none" class="srpopup">
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</div>
here is how i am showing the div as popup using lightbox_me.js
function showAttachment(){
$('#attach').lightbox_me({
centered: true,
onLoad: function() {
}
});
}
Your question is not clear enough. Any way I can't figure out where is your form start! Try to push your form inside the hidden div like below.
<div id="attach" style="display:none" class="srpopup">
<form>
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</form>
</div>
Related
I have 6 buttons on a page. On clicking each of the button, I need to show a dialog box, where user can fill in a small form. I'm trying to handle all the forms with just one custom dialog, by using the dialog in singleton mode since only 1 form can be opened at a time. When the user needs to open a second form, the current dialog must be closed and then he/she can open the next form. I can simply use the same dialog to show the different contents.
However, when I open a second form, the div holding the previous form is replaced by the new form. How can I save the div containing my previous form from getting removed from the page when I open another form?
I noticed that all the alterifyjs elements are kept at the bottom of the page.
Do I have to use my own logic to make sure I save the contents at a separate place before the second form gets loaded?
Html page is somewhat like:
<div id="form1" style="display: none">
<label>Field 1:</label>
<input type="text" id="f1">
<label>field 2:</label>
<input type="text" id="f2">
</div>
<div id="form2" style="display: none">
<label>Field 3:</label>
<input type="text" id="f3">
<label>field 4:</label>
<input type="text" id="f4">
</div>
<div id="form3" style="display: none">
<label>Field 5:</label>
<input type="text" id="f5">
<label>field 6:</label>
<input type="text" id="f6">
</div>
<div id="form4" style="display: none">
<label>Field 7:</label>
<input type="text" id="f7">
<label>field 8:</label>
<input type="text" id="f8">
</div>
My js is somewhat like:
alertify.dialog('customModal',function factory(){
return{
main:function(content){
this.setContent(content);
},
setup:function(){
return {
options:{
basic:false,
maximizable:false,
resizable:false,
padding:false,
closableByDimmer:false,
title:'My custom dialog'
}
};
}
};
});
//Tying up form with the buttons
$("body").on("click","#btn1",function(){
alertify.customModal($('#form1')[0]).set('title','Form 1');
$('#form1').show();
});
$("body").on("click","#btn2",function(){
alertify.customModal($('#form2')[0]).set('title','Form 2');
$('#form2').show();
});
$("body").on("click","#btn3",function(){
alertify.customModal($('#form3')[0]).set('title','Form 3');
$('#form3').show();
});
$("body").on("click","#btn4",function(){
alertify.customModal($('#form4')[0]).set('title','Form 4');
$('#form4').show();
});
Jsfiddle link:
https://jsfiddle.net/tu3mq98x/
Notice that, when we click Btn1 and then Btn2, the contents of Form1 are replaced by Form2. As a result when we again click on Btn1 (after clicking on Btn2) , we get From2 instead of Form1. How can I correct this? Please let me know if there's a better approach for this.
Since the contents gets replaced, you just need to save a reference of each form node and re-use it on next open.
Something like:
var form1
$("body").on("click","#btn1",function(){
form1 = form1 || $('#form1').show()[0]
alertify.customModal(form1).set('title','Form 1');
});
See updated fiddle.
I was trying to render form data on the same page using JavaScript.
JavaScript
function renderInput(age) {
document.getElementById('display').innerHTML += age;
}
It works when the submit button is placed outside the form element.
HTML - When it works
<form>
<label><b>Enter your age</b></label>
<input type="text" name="age" id="user_input">
</form>
<input type="submit"
onclick='renderInput(document.getElementById("user_input").value);'><br/>
<div id='display'>Your age is </div>
While it renders the the div with the id "display" just for a split second and then disappears if the submit field is placed inside the form element.
HTML - When it doesn't work
<form>
<label><b>Enter your age</b></label>
<input type="text" name="age" id="user_input">
<input type="submit"
onclick='renderInput(document.getElementById("user_input").value);'><br/>
</form>
<div id='display'>Your age is </div>
I can't seem to get my head around this. Why is this happening?
You should stop the form from submitting, by returning false with the onclick event like this:
<input type="submit" onclick='renderInput(document.getElementById("user_input").value); return false;'>
I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
How can I make it work?
Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.
If this is the case, try changing the input type to button to see the effect.
For example:
#my_id {
display: none;
}
<form>
<input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
<div id="my_id"> My text </div>
</form>
It should work.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)
Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.
The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.
please help me someone,,,,
i write some code to get the popup window using the following code.
<div id="EMAIL_CONFIRMATION_PENDING" class="popupContact" style="z-index:10003;">
<div class="popup_textarea">
<h3><h:outputLabel value="#{labelMsgs.emailPendingLabel}"/></h3>
<div class="VerifyEmailText">
<h:outputLabel value="#{labelMsgs.clickToSendEmail}"/>
<span class="FontItalic"><h:outputLabel value="#{headerBean.emailAddress}."/></span>
<br /><br />
</div>
<div class="SuspendedBoxMsg">
<h:outputLabel value="#{labelMsgs.accountSuspend}"/><br />
<h3><h:outputLabel value="#{sessionScope.DASHBOARD_EMAIL_EXP_TIME}"/></h3>
<h:outputLabel value="#{labelMsgs.unlessYouVerify}"/>
<br />
</div>
<div>
<span class="FontWeight">
<h:outputLabel value="#{labelMsgs.spamMailFolder}"/>
</span>
<a4j:commandLink id="resendLink" styleClass="violet_color_link" value="#{labelMsgs.regSuccSendMail}" onclick="javascript:resendLink(); this.onclick=null;" action="#{headerBean.resendEmail}" />
</div>
<div class="OkButton">
<div class="button_input">
<a4j:commandButton id="emailConfm" styleClass="image_button" value="#{labelMsgs.okButton}" action="#{accntDashboardBean.popupRefresh}"
reRender="frmAccountDashboardMenu:POPUP_PANEL" oncomplete="disablePopup1('EMAIL_CONFIRMATION_PENDING', 'backgroundPopup');popupCall('#{sessionScope.toShowPopupOf}');"/>
</div>
</div>
</div>
</div>
in this am using the id of the div to populate the popup,like this i have write some other popup code with different ids. for this i write the code in window.onload function to get the popup,
so, i need to set the default focus on the submit button which i mentioned in the above code.
You can set the focus to the submit button with the use of JavaScript or jQuery:
JavaScript:
document.getElementById('emailConfm').focus();
jQuery:
$('#emailConfm').focus();
you can use the following to set focus into the button
document.getElementById('emailConfm').focus();
But this may not work, to fix this I have done something like this
setTimeout(function() { document.getElementById('emailConfm').focus(); },100);
You can use HTML form tag inside your div to set focus on Submit button.
Use your input tags inside form tag, so whenever you are entering User Name or Password Submit button is always focussed on press of Enter button.
<form>
<input type="text"/>
<input type="password"/>
<input type="submit"/>
</form>
I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?
You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.
If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...
you can have a simple hyperlink outside of your form like this
click to submit and that's all you need