Creating multiple custom dialogs having different forms using Alterifyjs library - javascript

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.

Related

HTML/ Javascript: How to submit input and have it fill in a textarea with a submit/add more button

So I am creating a pre-fill resume builder for a class and I want to have only one input area for career experience/ job info but I want a button that can be clicked over and over to submit each jobs information. Ideally the results would show in a textbox below it so they can see and keep track of what they have submitted. I included the code I used on the HTML side:
**note: The entire page is basically one form with a submit at the bottom. This is a separate button.
Edited: So the idea is kind of just how submitting a StackOverflow Question works...as you type in the box, the results are shown below. And then there is a form submit button.
Screenshot of the HTML page so far:
<div>
<fieldset>
<legend>Work Experience</legend>
<p>
<label for="occupation">Job Title</label><br>
<input type="text" id="occupation" name="occupation"><br>
<label for="company">Company Name:</label><br>
<input type="text" id="company" name="company"><br>
<label for="duties">Duties and Skills Attained:</label><br>
<input type="text" id="duties" name="duties"><br>
<button type="button" id="generate">Add Work Eperience</button>
</p>
</fieldset>
</div>
Not sure I understand completely, but input names support arrays as well. So what you could do is something like this (assuming you want to have a submit for each entry).
<input type="text" id="occupation" name="experience[][occupation]" value="some-previous-occupation">
<input type="text" id="company" name="experience[][company]" value="some-previous-company">
You could then add hidden inputs to keep track of the ones that were already submitted (you could use a loop and replace 0 with the index of the loop)
<input type="hidden" id="occupation" name="experience[0][occupation]">
<input type="hidden" id="company" name="experience[0][company]">
This would then be submitted to your back-end like this:
[
0 => ['occupation' => 'some-previous-occupation', 'company' => 'some-previous-company']
1 => ['occupation' => 'developer', 'company' => 'stackoverflow']
]

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>

want my form's values to show in another div after clicking submit

I have a ticket form and when they click buy, I would like it to be saved and shown in another div as "user's ticket information" plus they are also able to buy a new ticket and add to the old one after. It doesn't have to be saved in a database or anything, for example when you click refresh all info would go away and you can start from fresh. Another example of how I do it is when I sign up, the user information will go to my memory class. Any javascript/jquery/html will help. Bellow is a start of what im working at. Thanks ^^
<html>
<body>
<form id="buyTicket" action="" method="POST">
<div id="ticketHeader">Buy Your ticket here</div><br></br>
<div>Number of persons :<input type="number" required id="numberOP" value="" placeholder="number of persons"/></div>
<div>Flight Destination:<input type="text" required id="destination" value="" placeholder="hawaii/thailand/spain"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" value="" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" value="" placeholder="enter return date"/></div>
<div><button type="submit" class="button" id="buttonTicket">Buy Ticket</button></div>
</form>
</body>
</html>
Like ben said use .val() http://api.jquery.com/val/ to get the values. Here is a working example http://jsfiddle.net/YNez9/
You will have the div, which shows the selected values floating to the right
<div id="result" style="float:right;">
</div>
and on submit you want to add the values entered\ or have a placeholder that you can set its value then make it visible
$('#buyTicket').submit(function() {
$('#result').append('<div>Number of persons :'+$('#numberOP').val()+'</div>');
//.....
//return false;
});​
You can use the val() function to get the values from the form once the button is clicked. Api documentation available here: http://api.jquery.com/val/. Perhaps in something a bit like this:
$('#buttonTicket').click(function() {
$('#ticketinfoheader').text($('#numberOfPersons').val());
});

Force click event on input file or open choose file window

I have a form in my HTML with field.
I'd like to show the file selection window when the user clicks somewhere else (for example, an image on other part of the screen). The reason I want to do this is that I have a form with many fields, posting to some action "x", and the file selection form on other part of screen, submiting to action "y"
<form action="x">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<img src="select_file.png" onclick="//triggers file selection on other form">
<input type="text" name="field4">
<input type="text" name="field5">
</form>
<form action="y">
<input type="file" name="myfile">
</form>
Is there any other way to do this?
$("img").click(function(){
$("input[name=myfile]").trigger('click');
});
Demo. Click on the envelope image.
Edit: Giving ID's on the each of input fields will make the code more readable and "good."

Jquery submit form error

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

Categories