submit button with no form filling - javascript

Hi i want a button to be shown on all my pages.
that code should be in such a way that no form filling is needed
the text on button will be "Problem? Click Here"
when click on button, it will be pressed and the person who has clicked cannot click again unless reload the page.
After the button is clicked the mail should be sent to admin with the exact link of page where button was clicked.
there should be no form to fill.
As for example facebook like button like the content meanwhile its pressed.
What should be the code for this? Any suggestion please?
Thank you

You can use an HTML button element with an onclick javascript function linked to it.
Since you don't want the button to work again until you have reloaded the page, you will need to do this through AJAX. This means you will have to send a request to the server, where, for instance, a PHP script will retrieve the page name from a GET variable and send the email to the administrator. The javascript part can keep track of the button being clicked once or not.
That should give you some pointers on where to start with your code. However, as stated in direct comments to your question, this site is not meant for asking for coding work to be done for you. Perhaps next time, try to think of a possible solution and ask for advice on your solution (improvements, coding conventions, etc)

Related

Dynamically created input element not shown after user hit Back button

I create dynamic input elements with this code:
<div id="add">Add row</div>
<script>
$(document).on('click', '#add', function() {
var number = $('div[id^="row_"]').length + 1;
$('#add').before('<div id="row_'+number+'"><label for="answer_'+number+'">Question #'+number+'</label> <input id="answer_'+number+'" name="answer_'+number+'" type="text"></div>');
});
</script>
If I send the form and hit the BACK button all other input elements show the text of the user, except the dynamically created input fields. The fields itself don't show up.
I tried to put the user's text into a hidden field via jQuery but it is also disappeared after the BACK button.
How can I show the previous state of the whole form to the user after they hit the BACK button?
SOLUTION:
If I put the user's text into a type="text" element with style="display:none", I have the text after the BACK button and I can recreate the dynamic fields with the user's text.
Thanks everyone for the suggestions, hopefully this will help others who come across this problem.
Upon POSTing the form, the browser navigates to the location (url) of your <form>'s action. When you then go back, it will reload your page and the state of all scripts is reset because the page reloaded.
If you want to keep that state, you need to send the form via AJAX. You can do that with jQuery as well (see here). Then you'll not even need to hit the back button.
I think maybe I fully understand your problem now after chatting, I hope, anyway! --
Browser Code Cache
When you download a page in Chrome or your browser, it is stored in your local browser cache. But it stores the commands, not the state, of the page. So, when you go back, the HTML is rerendered per the HTML and CSS commands, and the JS is re-executed. I found some information from v8.com, the official dev blog for Chrome...
When the JS file is requested a second time (i.e. a warm run), Chrome takes the file from the browser cache and once again gives it to V8 to compile. This time, however, the compiled code is serialized, and is attached to the cached script file as metadata.
So, you see, it recompiles and reruns the JavaScript when you hit the back button, but it does not restore the previous elements generated from the last JavaScript running, or the events that the user committed to triggered that state.
Source: V8.com: Code caching for JavaScript developers
Back-Forward Cache (BFCache)/Browser Form Cache
Don't mix this up with cached form data, which is completely different. Chrome will cache your old form data with the back button automatically, but that is not part of the code caching feature. Check out this similar question for that problem: Clear all fields in a form upon going back with browser back button
Google 2019, Feb Update: This appears to be something that should be fixed at some time within the near future. Source: Exploring a back/forward cache for Chrome.
Here is a solution:
I tried to put the user's text into a type="hidden" element via jQuery, and it has been lost, after the BACK button, however if I put the answer into a type="text" element with style="display:none", I have the user's text after the BACK button and I can recreate the dynamic fields with the user's text.
Thanks everyone for the suggestions, hopefully this will help others who come across this problem.

Multiple Forms on One Page, How to Handle Back Button Behavior?

So I have 3 forms all on one page, and I have buttons on all those forms to go show or hide previous/next forms. However the back button just takes you to the previous page entirely. Is there a way to have the back button to check if there is a previously completed form and go to that form?
Sorry for the open ended question but I'm at a loss.
Using a database to save your previous walk, will be better trying to,manipulate hiding button using styles and JavaScript will get you in cache mess someday ,,
Please paste your code here for we can see wat u have done,,

Making get/post requests to bootstrap modals. How?

I am having a really difficult time trying to make a request and communicate with modals from other websites. For regular html you can see the hyperlink when hovering over the link or find out all about the element when inspecting, but with modals it seems like all the code is hidden on their website somewhere, making me unable to send http get/post requests correctly.
For ex when theres a button called "View containers" it opens up a modal and then theres a textarea field and a submit button. I know the ID of the text field, but there is like zero information on the submit button or where the submit button can lead to. I want to make a script that automatically sends a request , enter in the container # and clicks submit. But I dont know how to make the script click/send submit button
First, you'd want to change the input value
You can click buttons using the DOM click method after selecting it, probably using IDs
Additionally, I'd ensure the modal was put into the DOM before trying to insert values, or press submit...modals may not be inserted to the DOM until they are triggered/loaded.

Selecting the correct element to trigger form submit from within a function

I have several forms on a page. The forms are actually PayPal "add to cart" buttons. When a user clicks on a button, an alert box asks for their zip code. If the zip code in in the array of okZips, I want to programmatically follow the link through the submit button to the cart, but I just can't quite get the correct element to attach .submit() to.
$(this).add("div.check-zip").add("form:first").submit();//this submits the first form on the page
$(this).add("div.check-zip").add("form").submit();//this submits the last form on the page
$(event.target).add("form").submit();//this doesn't submit anything
$(myEvent).add("form").submit();//this submits the last form where myEvent is a global variable
The pen can be found here:
http://codepen.io/enielsen0001/pen/KwEbzz
How do I select the correct element to apply the .submit()? Am I going about this all the wrong way?
You are not going all the wrong way but it is definitely the baddest and dirtiest way. It seems like you don't know what you are doing. Your classes are messed up, you are mixing jQuery and plain js, you are using while and for. It seems like you have deliberately copy pasted code with no idea what it is. Please have atleast beginner's js/jQuery knowledge before posting questions.
However, here is the updated pen http://codepen.io/anon/pen/NPJJwJ.
You would need the actual form object for submit to work.
// myEvent is event itself not element
$(myEvent.target).parent("form").submit();
I have refactored stuffs involving while and for loops you used. Compare your code with updated code. Hope it helps:

Switch to POST from GET, need to submit a form to two different locations

[I did see the similar problems solved with AJAX/jQuery, so please read on].
I have a form that a user can fill out - but one of the options on the form allows selection of an image, and when the user goes to do that they are brought to a new page.
This was originally done via get, but my problem is... I need to save all of the information on the form to the session so that I can restore it when the user selects an image and goes back to the first page that had the form.
A HTTP GET may not hold enough data for all the information on my form, so I need to switch to post.
So, here's my problem... I need the form to POST to one page when I click "Select Image" and another when I click "Submit". How can I get the form to POST to a different page depending on which button was clicked?
PS: I'd prefer to just use standard javascript/html here. I plan on learning AJAX and moving over to jQuery after a while, but I'm not there yet :)
onclick, let each button call different functions. Within these functions, change the action attribute of the form dynamically.
document.forms['yourform'].action = 'your intended page';
Then submit the form.
document.forms['yourform'].submit();

Categories