I made a form somewhere on an HTML page, but made its visibility hidden so that it wouldn't appear immediately. I wanted to activate it through a button click, but then appear at where the button was clicked, so I set the "innerHTML" of the button div to that of the hidden form. The form appears, but it won't allow me to enter any data into the fields (I'm assuming due to it being hidden somewhere else) so I'm wondering if there is a way around this? Or a better alternative?
Thanks
Replace the button with the form altogether. With jQuery, you could use replaceWith():
$('#button').replaceWith($('#form').show());
Related
I have one question.
I tried to find the solution on Google, but couldn't find the best solution.
For example, one page(first) has one button, another page(second) has button and text.
at the initial status, in the second page, when i click the button, the text will be shown and hidden.
at the first, text was hidden.
and when i click the button at the first page, it goes to the second page.
in this case, i'd like to open the text when i click the button at the first page.
For this, i need to change the css property of second text element (show) using jquery.
How can i implement this?
please give me any suggestions.
Thanks.
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.
The following function to change the text of an input box works perfectly. but when I try and fire it again with a different parameter, it does not change.
function changeForm(name)
{
$("#the-input-box").val(name);
}
This also happens when I try change the selectedIndex on a select tag.
Also, the form is located on a modal box using Twitter's bootstrap, could that be the issue?
Any suggestions?
I think it's the way you are using the modal box. I've experienced the exact same thing before.
The thing about the id attribute is that there can only be ONE at any given time within the HTML DOM.
You may want to check whether you are 'destroying' your modal box after closing it. The first time you open the modal box, calling the function works without any problems. There could be a chance that after opening the modal box again, the function doesn't work anymore. This is because you are spawning multiple instances of the modal box and this causes multiple instances of #the-input-box to appear in the DOM.
Give that a try and let me know. The key is to DESTROY the modal box when it is closed (maybe closing it is fine, but I prefer the more drastic approach of destroying).
I want to allow the user to click the 'fb:login-button' (which I'm using for registration as well) only if they've entered valid input in a text box on my page.
Is there a way to do this?
One simple way would be to position a div directly on top of the button. If the div is transparent, the user will see the button but not be able to click on it; if the div is the color of the background, it will make the button "hidden"; or you could even have a semi-opaque div to give the button a "dimmed" effect. In each case just move the div or set display:none to return the button to normal operation.
Why not use the registration plugin and do validation of your custom field yourself?
So given a layout like so:
How can I include the value of ComboBox in the submission of the form.
Things that have occurred to me:
Include the combo box as part of the form in terms of markup and position it absolutely. I'm don't get how this would work if the page needs to resize and the combo should remain where it it is in this title bar.
On submission use JS to grab the value and insert it in a hidden field as part of the form submission. This would clearly break without JS but the page is client facing and we are willing to stipulate that JS is required.
I believe I have stated all the restrictions so given that is there another approach? If not how should I choose between the above options?
You obviously could use a a giant form tag.
OR
Two forms, changing the combo and submitting does a full post and adds a hidden to the main form. Then sexy it up with JavaScript (prevent the full post back, and remove the submit button on the combo form)
OR
CSS Positioning as you suggest.
With out seeing some HTML its hard to determine the layout you have. But my first thought would be to use Absolute positioning with CSS.
The other option would be to incorporate the entire page as a part of the form, but this may not be possible due to other functionality on the page that may be necessary
I would say use javascript.
have a hidden input field in the form.
on page load, that input is populated with the ComboBox value.
update the value if the ComboBox select is changed.