I have this problem regarding about when I pushed the button it adds another element plus the name of the element also increments well in array, kind of hard to explain but I'll provide some screenshots.
I searched through this site saw a bunch of solutions and whatnots, unfortunately I can't seem to apply it on my problem.
Here are the screenshots of what is my desire output.
If I press the Add button, another fieldset would show up above it
The result would be
So if I press the "Add" button again, it would show up another never ending cycle of fieldset with corresponding incremented input type names.
Code:
Layout of the Fielset
<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;" id="fieldset_fblikeus">
<div class="condition">
<div class="clear"></div>
<div>Label</div>
<div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div>
<div class="clear" style="padding-top:5px;"></div>
<div>URL to Like</div>
<div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div>
<div class="clear" style="padding-top:5px;"></div>
</div>
</fieldset>
Code to initiate the function
<a onclick="fb_likeus_add();">Add</a>
function fb_likeus_add() {
var fieldset_data = '<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;"><div class="condition"><div class="clear"></div><div>Label</div><div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div><div class="clear" style="padding-top:5px;"></div><div>URL to Like</div><div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div><div class="clear" style="padding-top:5px;"></div></div></fieldset>';
$("#fb_likeus_td").prepend(fieldset_data);
}
The main problem is on when I press the add button how to increment the names of an input element while prepending the data to the div, I have no idea on where/what to start with. But I've thought of something what it should look like.
Array = [
div1 ['name_1', 'url_1'],
div2 ['name_2', 'url_2'],
div3 ['name_3', 'url_3'],
div4 ['name_4', 'url_4'],
div5 ['name_5', 'url_5']
and so on, it increments when you click the add button.
];
It's kind of hard to explain, still hope you guys understand my problem.
Would be glad if you guys help me, it means a lot. Thanks in advance.
One solution to this is to have a hidden 'template' div somewhere on the page that contains the markup that you want to insert. In this specific case the markup is relatively simple, so you could get away with just storing the template markup as a JavaScript string, but that's generally less maintainable over time than using a hidden div on the page.
In any case, once you have your template markup, you just need to add a small amount of JavaScript code to keep track of how many times you've added a new fieldset to the page. With that, you can update your fb_likeus_add() function to perform a simple string-replacement on the template markup, inserting the correct sequence numbers before you prepend it to the div.
That may sound a bit involved but it really takes very little code:
//initialize this when the page loads
var numAdded = 0;
function fb_likeus_add() {
//increment the counter
numAdded++;
//grab the template html
var templateHtml = $("#template").html();
//write the new count into the template html
templateHtml = templateHtml.replace(/label_/g, "label_" + numAdded)
.replace(/url_/g, "url_" + numAdded);
//prepend the updated HTML to the document
$("#container").prepend(templateHtml);
};
Here's an example: http://jsfiddle.net/Dw8e7/1/
Related
I apologize if this question has been poorly worded. The reason I'm asking here is because I didn't know how to Google it properly.
Basically, I want the client to be able to specify a number (they could type the number in a textbox or there could be a series of numbers in a drop-down box or even radio buttons, i'm very flexible with this) that determines how many set of questions the form will display.
To put it into context to make it hopefully easier to understand:
-The form is for booking tickets
-If the client chose '1' at the start, it would mean one ticket so only one set of questions would be visible
-If the client chooses 2 then they want to book 2 tickets etc etc.
I'm looking for a method to implement this using html, css and/or jquery/javascript if needed.
Many thanks in advance!
you can use sheepit plugin - sheepit for form cloning
go through it. it can help you a lot.
when user chooses number of seats, make a loop for each seat and repeat questions as needed. all in same form.
using php
for ($question = 0 ; $question < $_POST['SeatNumbers'] ; $question ++) { ... }
You then have to cycle thru the total number set of questions, I'm guessing you probably will use a SeatNumber input, in the above code you'll get a $SeatNumber0, $SeatNumber1 and so on.
Check to see if $SeatNumber exists, and process if it does.
Using JS, I define a max number for the options. and when user changes seat number, I show/hide each question with css "display:none"/"display:inline"
If you want to handle html content dynamically, you'll need to use Javascript.
You can hear event from your text field or your selector used for provide the number of ticket.
Try this with jQuery :
$('your_field_selector').on('change') or this $('your_field_selector').on('keyup')
If the event is triggered, you can get the value of the field with the jQuery method called "val()" :
$('your_field_selector').val()
Next insert your new html content in function of the value.
Here, There's also many jQuery method for do that like "append()","insertBefore()","insertAfter()"... etc
I think this is the sort of thing your after.
The amount of sections within the form is generated by the number selected on the slider with each dynamically generated form element having a unique id depending on which ticket its for ie: ticket 3 has a name id of name3 ticket 14 would have a name id of name14 and so on to allow proper usage of each input through your server side post functionality.
here is a working jsfiddle http://jsfiddle.net/fd78gkf3/
Excuse the generic form field names :)
<script>function showValue(newValue)
{
document.getElementById("tAmount").value = newValue;
document.getElementById("tAmountDisplay").innerHTML = newValue;
}
</script>
<script>
$(document).on("click", '#select', function() {
var formTimes = document.getElementById("tAmount").value;
$('#forms').append('<form id="ticketForm">');
for(var i = 1; i < formTimes; i++) {
$('#forms').append(i);
$('#forms').append('<div id="formPanel">');
$('#forms').append('<label>Name</label><input id="name' + i +'" type="text"/>'+'<br/>');
$('#forms').append('<label>Age</label><input id="age' + i +'"type="text"/>'+'<br/>');
$('#forms').append('<label>Gender</label><input id="gender' + i +'" type="text"/>'+'<br/>');
$('#forms').append('</div>');
}
$('#forms').append('<input type="button" id="submit" value="Submit"/>'+'</form>')
});
</script>
<span id="tAmountDisplay">0</span> Tickets
<form action="" method="post">
<input type="range" min="1" max="20" value="1" step="1" width="100px" oninput="showValue(this.value)" />
<input type="hidden" id="tAmount" name="tAmount" value=""/>
<input type="button" id="select" value="Select" />
<div id="forms">
</div>
</form>
The title might be a little misleading but it's quite a difficult one to put into words.
I've been trying all day and failed even with attempts from stackoverflow, so I must ask once again for help.
I am retrieving a list of article information from MySQL and displaying them in a table. Once displayed these table rows are clickable by using jQuery .click function, when clicked ckeditor (which is with a display:none;) opens from a <section></section> and hides the whole table.
The issue that I am having is when I click on a row, it should display the data from those specific articles inside the ckeditor, but no matter what the first row data always shows up even if I click on a different row, I can point out that it is due to not having an id so the .click function cannot distinguish which section it is trying to show, but I cannot figure out how to connect the table with the section information.
This is how I am retrieving the data and displaying it in a table, using foreach.
<?php
$getInfo = $articleClass->get_all_article_info();
foreach($getInfo as $data)
{
$article_title = $data['article_title'];
$article_content = substr(htmlentities($data['article_content']),0,50).'...';
$article_content_full = $data['article_content'];
$article_uid = $data['article_uid'];
echo '
<tr id="tr_id" class="'.$article_uid.'">
<td class="marker">
<i class="fa fa-align-left"></i>
</td>
<td class="title">
'.$article_title.'
</td>
<td class="content">
'.$article_content.'
</td>
</tr>
<section id="post_info_id" style="display:none;">
<textarea id="editor1">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>
';
}
?>
And this is the click function; jQuery.
<script type="text/javascript">
$(document).on('click', '#tr_id', function ()
{
$("#post_info_id").css("display", "block");
$("#table_id").hide();
});
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
I know that the problem is that when I click on the tr, it cannot distinguish the #post_info_id, because it just retrieves about 20 rows of information but the $post_info_id has no specific id to match with the #tr_id, but I have no idea how I could even accomplish this.. I have retrieved the article_uid which is an incremented number when the articles are inserted into the database, and could use that to mark both the #tr_id and #post_info_id but with jQuery I have no idea how to accomplish after what I tried.
I don't want to make this a long question, considering the more I write the less likely I will get an answer but here is what I have tried.
I tried setting the article_uid as the id, but I cannot retrieve the id's of the articles as they're in random, and there's nothing specific that I was able to connect both the post_info_id and tr_id by using .attr('id').
This can be achieved by using the Jquery next() function.
You could change your onclick method to this:
$(document).on('click', '#tr_id', function ()
{
$(this).next('section').css("display", "block");
$("#table_id").hide();
});
And all elements should always have unique ids so here's a way to achieve that:
'<section id="post_info_id"'.$counter.' style="display:none;">
<textarea id="editor'.$counter.'">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>'
Then declare a variable to keep count outside your loop:
$counter = 0;
Finally, increment the counter at the end of the loop:
$counter++;
i have a form with 100s question in it..and checkbox or radio button as a option to answer the questions..
<b style="font-weight:bold">1.How long have you been working in field of Programming?</b><br/>
<input type="radio" name="1" value="Less than 2 years" style="cursor:pointer">
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">Less than 2 years</span>
<input type="radio" name="1" value="3-5 years" style="cursor:pointer">
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">3-5 years</span>
<input type="radio" name="1" value="6-10 years" style="cursor:pointer">
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">6-10 years</span>
<input type="radio" name="1" value="11-15 years" style="cursor:pointer">
<span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">11-15 years</span>
the above html is my first question out of 100 questions....so for this i have decided..to create a next and previous button for 10 questions at a time on a screen?
any suggestion or help would be a great help?.. thanks in advance..
Here is the most simple approach I could get.
HTML:
Add div's for pages (1st page has an extra active class)
<div class="page active">
<!-- A set of questions go here -->
</div>
<div class="page">
<!-- Another set of questions go here -->
</div>
...
CSS:
.page { display: none; }
.active { display: inherit; }
jQuery:
$("#prev").on("click", function(){
if($(".page.active").index() > 0)
$(".page.active").removeClass("active").prev().addClass("active");
});
$("#next").on("click", function(){
if($(".page.active").index() < $(".page").length-1)
$(".page.active").removeClass("active").next().addClass("active");
});
And its done!
Fiddle with this example here: http://jsfiddle.net/V8LCL/
I'll try my best given your small sample, but it seems to me you are very far away from being able to generalize the code to a page approach. I'll explain why
Brute approach
If you don't want to change anything I would say for you to write your 100 questions on the DOM like you have in your sample and create a section for each block of 10:
<section class="section-1" ... > </section>
Then in your javascript code you can have the current active page, let's say you start with 1:
var visiblePageIndex = 1
A next button would increment the page by 1 and a back button would decrement the visible page by 1, obviously taking into account the limits, 1 <= page <= 10.
Now for the show and hide, you need to make the display setting of the section to be lets say inline-block for the visible page index, and none for the all the others. You can do this in two ways:
In the same event where you process the next and back you can use jQuery to query all sections that contain the number of the visible index (http://james.padolsey.com/javascript/regex-selector-for-jquery/).
Having a css selector with the same functionality (http://css-tricks.com/attribute-selectors/)
I would prefer the second. This should do the trick but obviously this is maintenance heavy, and it doesn't adjust automatically.
A more dynamic approach
I will try to illustrate the key points of this approach, the code will have to written by you, or if you get me a sample, I can help you get there.
You will need to store your questions and possible answers in a data structure, hopefully in a JSON or XML (bah) file, or if you can't be bothered simply inline in your JS block.
This will allow you to iterate over that structure with javascript and append to the DOM the number of questions you want to see each time. A click on next or prev will just change the index from where you start and draw the respective group.
You can save the answers in the same structure so when the user navigates back he will see his/her selections.
The pros of this option are:
Dynamically adjusts for the size of questions
You can customise how many questions are shown with a simple variable change
it's more lightweight, since you don't have to load a massive DOM.
You practice your JS a bit.
I hope this helps, there are a ton of possible solutions for this. This is just a couple of them, but I would definitely try to go number 2 or anything similar instead of hacking it (option 1).
I am looking for a way to move just a closing form tag using jQuery.
Currently the HTML looks something like this:
<form class="myform">
<input class="text_field" id="profile_nickname" name="profile[nickname]" size="30" type="text" value="" data-validate="true">
</form>
<div class="form-action">
<submit class="x">
</div>
Because the submit tag is outside of the form, the submit button doesn't work.
I want to say something like:
$(".myform").remove('</form>')
$('</form>').appendTo($('.form-action'))
This of course does not work. Any Ideas would be appreciated.
.append() does not work like string concatenation where you can chop one slice and paste it somewhere else... you need to move the dom elements
$('.form-action').appendTo('.myform')
you can use click event to sent out the form
$(".form-action").click(submitForm);
function submitForm(){
$(".myform").submit();
}
you can clone the old object,append the new one to "form",and hide the old one.
var $new = $('.form-action').clone();
$('.form-action').hide();
$new.show();
$new.appendTo('.myform');
This feels really wrong, but I know what its like to work under bad conditions with a hateful content management system... So here it goes...
If there is really no other way around it you can reset the HTML content with .html() like so:
Working Example
$('body').html(
'<form class="myform">' +
'<input class="text_field" id="profile_nickname" name="profile[nickname]" size="30" type="text" value="" data-validate="true">' +
'<div class="form-action">' +
' <submit class="x">' +
'</div></form>');
This is an ugly way to do it, but if you're backed into a corner it will work.
MY HTML is something like this:
<div id="paj_container" class="container">
<div class="three_paj_els">
<div id="1" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever.png" />
</div>
<div id="2" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever2.png" />
</div>
<div id="3" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever3.png" />
</div>
</div>
</div>
To spare you flipping through more code, pretend each of the .a_paj_element divs is a separate page in my JQuery pagination.
To decrease page load time my plan is to shove the images on the pagination into those hidden input types' values. When the page is visible, JQuery will grab those values and use the replace with function to replace them with tags so the images load as you flip through the pagination pages instead of all at once. Here's what I've been trying to do to achieve this:
var currentPage = $('.three_paj_els:visible');
currentPage.children('.listed_hidden_img').each(function() {
var the_image_SRC = $(this).val();
$('.listed_hidden_img').replaceWith('<img src="'+the_image_SRC+'" />');
});
Basically I'm trying to get the .listed_hidden_imgs replaced only in the current visible .three_paj_els
I've done this with before with lightboxes/modals to decrease load time on pages with high resolution pictures it works well on that so I figured that this would work in this application too.
Thanks a bunch for reading this far and thanks in advance to anyone who can help correct my code.
-Mike
var the_image_SRC = $(this).attr('src');