We Keep Coding

How to separate the content of a button into another HTML file?

I'm working on an HTML file that acts as its own page in an Electron App. In this file, I have a button, which shows a pop-up form upon clicking.
Here's the relevant code for the button and the content that pops up:
<button class="open-button" id="openConfig">Change Configuration</button>
<div class="modal-content" id="networkConfig">
<div class="modal-header">
<h2>Configuration Settings</h2>
</div>
<div class="modal-body">
<p>To get started, enter some initial information about the network you want to configure.</p>
<p>Leave the number of nodes as zero if you would like to start from scratch.</p>
<br />
<p>Number of nodes:</p>
<input type="number" id="nodeNumber" value="0" min="0" max="30">
<br /><br />
<p>Preference:</p>
<div>
<input type="radio" id="prefsecure" name="option" value="Secure" checked>
<label for="prefsecure">Secure (Recommended)</label>
</div>
<div>
<input type="radio" id="prefefficient" name="option" value="Efficient">
<label for="prefefficient">Efficient</label>
</div>
<br />
</div>
<div class="modal-footer">
<button type="submit" class="btn">Start Configuration</button>
<button type="button" class="btn cancel" id="closeConfig">Cancel</button>
<br /><br />
</div>
</div>
Also, here are the relevant javascript functions that allow me to open/close this pop-up:
function openForm() {
document.getElementById("networkConfig").style.display = "block";
}
function closeForm() {
document.getElementById("networkConfig").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('openConfig')
.addEventListener('click', openForm);
});
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('closeConfig')
.addEventListener('click', closeForm);
});
What I would like to do is take that content that pops up when the button is clicked (the button's id="openConfig") and put that into a separate HTML file (the id of the content I want in a separate file is "networkConfig"). This is to help compartmentalize my code. How can I make the button refer to this other file? Anyone has any leads? I would greatly appreciate any help at all!
Also, I apologize if I've made any mistake while posting this. It's my first post to stackoverflow, and I haven't been able to find what I'm looking for these past few days. Thank you for reading!

If i got it right, the way for you to do that is to either POST the content you want to reuse somewhere, initializing an empty variable, adding the markdown and thus being able to prompt it elsewhere, or save a temporary file containing the markup (insecure).

Lightbox_me.js change place of dynamically careated input controls

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>

html link onclick pop up a form

i'd like to pop up a form when click a link.
<a title='%s' onclick='return popupform()' href='#'> ABC </a>
the form is like:
<form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
<input type="hidden" name="submitted" id="submitted" value="1">
<label for="chinese">Chinese: </label><br>
<input type="text" name="cs" id="cs" value="" maxlength="50"><br>
<label for="english">English:</label><br>
<input type="text" name="en" id="en" value="" maxlength="50"><br>
<input type="submit" name="Save" value="Save">
<input type="submit" name="Delete" value="Delete">
<input type="submit" name="Add" value="Add">
<input type="submit" name="Close" value="Close">
</form>
how to achieve it?

Wrap your form in a div:
<a title="%s" class="show_form" href="#"> ABC </a>
<div id="form_wrapper">
<form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
... truncated for brevity
</form>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
And some CSS:
​#form_wrapper {
display:none;
}​
And then some JavaScript using jQuery:
$('a.show_form').on('click', function() {
$('#form_wrapper').show();
});​​​​​
And if you really mean a popup window, or commonly called a "modal" window, look here: http://jqueryui.com/demos/dialog/#modal-form

Pop-ups are simple div elements on the page that would be initially hidden and then revealed when some event takes place, like a mouse click. You then need to adjust the look of that div so it appears as a pop-up to the user, i.e. center the div on the page, raise its z-index so it layers above all, adjust the opacity to give the dimming effect, and so on. Obviously it is a lot of work if you decide to roll your own. Otherwise, if you are OK with using jquery, you can take advantage of the jqueryui dialog element

Getting data from generated form in jquery

I have the following code setup:
http://jsfiddle.net/bABHU/2/
Had to change it a little bit to get it all on jsfiddle but the problem i'm having is the data from the first from gets put into the query string to send off to the ajax call, but the form elements generated after that (which comes from a JSON call) don't get submitted when clicking the next button again.
So when you get to the second question how can I submit the 'answer' input that was generated. - see the console for the outputs.
Hope that makes sense.
Any help is appreciated.
Thanks.

This is happening because you are replacing your entire <form> element with the new HTML content from question 2. Replace $('.FinderOptionsInner').html with $('#formStep').html
See http://jsfiddle.net/M3eZp/1/

When you replace the markup for findOptionsInner, you obliterate the form itself. Hence it not serializing. Also, you have no close tag for your form.
<form action="" method="post" name="formStep" id="formStep">
<div class="FinderOptionsInner">
<p>
<label class="label_check">
<input type="radio" name="answer" value="1" id="answer_0" />
Answer 1</label>
<br />
<label class="label_check">
<input type="radio" name="answer" value="2" id="answer_1" />
Answer 2</label>
<br />
</p>
</div>
</form>
<div class="nextButton-step1 nextButton">Next
</div>
Works just fine (notice that I've also fixed the close tags for form and the div at the bottom).

how to set default focus on the submit button in a popup window

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>