Select & Submit images Form / java-script - javascript

I have been researching ways to submit a form with the images selected by users. I will give the users a set of Images , they can choose multiple.
Method 1
If image is selected, add input via onclick() with the selected Value. [Possible?]
Method 2
For each Img , load hidden input , let users delete that they don't want. [Weird]
Any advice / example i can look at?

I would use invisible checkboxes with the img tag inside the label for it. That way, a click on the image should in theory trigger the checkbox.

Add an extra class with the img tag's class attribute. What you can do is create a click function for those images and their ID's via JQuery. Let's make an img tag and see how it can work
In JQuery, do the following
var imgIDs = "";
$('.multImg').click(function(){
imgIDs += $(this).attr('id')+",";
});
You'd most probably want to keep the record of the images user has clicked on and send it to the server. But before you do, do not forget to remove the trailing ",". You can achieve that by
imgIDs = imgIDs.substring(0, imgIDs.length - 1);
On server end, you can simple use explode and have all the IDs in an array. Those are the IDs of the images user has selected. You can do whatever you want with the array now.

Related

With AMP HTML, is it possible to get ID or other properties from clicked element, append them and create URL for an anchor tag?

I have a set of check input. Each one contains a unique ID. On checking box (on click) I want to get this ID and create a string of type '/some/path/?myids=checkOne,checkTwo (where checkOne and checkTwo are IDs of two different check input that have been clicked.
I understand that I can use state management - but my issue is: how can I limit how many checkboxes to create custom string for? For example, I want to have a limit of 5 comma separated IDs. Since AMP logic is limited I am not sure how to do complex logic with it.
Here are the steps:
show set of checkboxes.
user can click any of these checkboxes
as user clicks on a checkbox, an achor tag href=... needs to be updated by appending the substring ?myids=checkOne.
if user clicks on another checkbox then the href tag needs to be updated to this: ?myids=checkOne,checkTwo and so on until at the most 5 checkboxes are clicked.
Is this at all possible? Thanks
Documentation is not very clear on how to approx complex logic and not much found on searching.
One option is to use amp-selector and then limit the number of selected items when binding using .slice():
<amp-state id="selected">
<script type="application/json">[]</script>
</amp-state>
<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
<div option="1">First</div>
<div option="2">Second</div>
<div option="3">Third</div>
</amp-selector>
<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
Click me
This limits the number of selected IDs to two and displays a warning if the user selected all three.

Get link of a button and assign to other in jQuery

I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});
Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});

JQuery, Creating form inputs via button not working with form list

so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue
alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.

ajax/json/? to query a webpage and return specifc div/p values

I'm trying to find code or a way to process the following:
When you click a button a site it'll go and read specific website link and then return variables that it finds in the remote page.
1) user clicks button
2) query goes to www.whatever.com/myfile.html
3) there is a specific p tag inside a div tag called 'totalamount' = <div id=WTextWrapper><p id="Amount">2,000</p></div> That I want to grab the value of and then display it on my page below the button that I clicked in step 1
I know there is a way to do it, but I have no idea how it's done.
You need to get the source of the html and use regex to extract what you need. You can use file_get_contents() function to get the source html.

Affect only the item being clicked, and track unique identifiers?

So I will have a list of items to check off. They could have the same name/attributes but should all have a unique identifier. I want to be able to check them off of a list and have them run a function on themselves that hides them and send and update to the server with the unique id.
I'm trying to figure out where the unique ID should be stored? Should I use it as a class to easily find the item in the dom? What are my other options for tracking this user input on a particular item? The items will be sent from the server initially.
Here is a start, http://jsfiddle.net/QQPtn/1/ trying to figure out best practices for working with this kind of problem. Thanks!
If I'm not wrong there is another option. You can take help of a custom attribute. You can use custom attributes in each image element. Custom attribute can be any user defined name except existing attributes. As an example I can define my own attribute as index="n".
Example:
<img src="..." index="1" class="myimage" />
On click of the image you can read the attribute index as below
Using normal JavaScript
var index = element.getAttribute('index');
Using JQuery
$(".myimage").click(function (s) {
var imgIndex = s.currentTarget.getAttribute('index');
});

Categories

Resources