I am new to html, I would be really glad if you can help me with this.
I have a web page where there is a list and some other text inputs and buttons. This option list can be populated by clicking the "add" button in the page, this add button is to direct to another page and in that page there are some chekboxes, those which are checked are loaded back to the main page,(where I have the list) .
At the end data in the main page needs to be loaded to the database, (what is in the list and in the text inputs).
Since I'm new I just know little about php and html, I thought I should have a form within a another form(form to "add items", form to load to the database) and it is not possible in html. Can anyone suggest the best way to do this? Do I need to use javascript?
Why can't the extra inputs (the ones that would be in the second form) be part of the first form? I think the question will become clearer if you post a sample form so we can see the relationship between the two forms.
But overall, since you're ultimately only submitting one form, then maybe all the inputs belong together. If what you're calling the second form isn't supposed to be visible right away, you can still have it be part of the same form, but only reveal it when needed.
Again, some sample data would help to understand the exact context of your question.
in php if you use input name="somename[]"
for a number of input elems
you will get an array in $_POST['somename'] and access all the values.
I think what you're after - if I understand you correctly - is ajax. Ajax allows you to asynchronously send data to/from another script without leaving the current page. This is accomplished using JavaScript. In your case I think what you need to do is set an onclick event in JavaScript to a button:
<input type="button" onclick="javascriptFunction()">
You can read more about ajax here:
http://www.tizag.com/ajaxTutorial/ajaxform.php
Related
I am fairly new to using PHP so bear with me if this is a stupid question
I have a form that comprises a number of radio buttons, the action is set to redirect to the same page and the method is GET.
A click on a radio button gets data from the database. The data is used to redisplay the same page with changed content.
The page URL has PHP arguments in it like the example below
localhost/basesite/mypage.php?itemID=8&name=city&number=9
When I access the page and click on a radio button I get a page with “no arg” because the URL reads
localhost/basesite/mypage.php?number=6
Two of the arguments are missing and that the last one is incorrect.
With no change whatsoever to the code except using ”post’ instead of “get” the whole thing works flawlessly.
I have used
form action= "" method=“get”
form action= “#” method=“get”
and many other actions using $_SERVER["REQUEST_URI”], $_SERVER['QUERY_STRING'] etc and combinations thereof.
Those that worked with POST did not work with GET.
I do not need to use POST as data is not written only retrieved from the database so I have no worry about data being written more than once.
If I have to I will use POST but if the user refreshes or uses the back button then the usual warnings will be issued by the browser.
What am I missing?
you should you use $.get which is a jquery method.
First, you should share your full source code for better understanding your problem. And also you have to use post method to submit a radio button values to get some value from your database. Form data can be submitted using these two methods (get and post). Both are used for the same purpose, but stands apart under some specifications. As in GET method key values are passed in the Url while in POST, the information transfers in a hidden manner.
Sorry folks. It was a badly formed URL due to me not fully understanding how to set a hidden element.
Ok, so the weirdest thing happened here.
I have a php file with Javascript to write onto elements based on events on the webpage.
And there are 3 html forms on the page. One is a searchbox, one has all inputs hidden and gets submitted on a certain event, and one is a textbox and a button on clicking which the javascript writes the text to a certain element in the page.
Also, this third form is itself written onto the document by the javascript on clicking another button.
The problem is, while doing certain operations with this third form, i need to reference one of its inputs values (newSkillName).
So for this third form, In Chrome-
document.forms[1].newSkillName.value
works,
while in Firefox-
document.forms[2].newSkillName.value
works.
I, however, managed to fix the code. But i'm still curious. Why did Chrome and Firefox process the abnormality differently?? Any idea?
Give the form elements unique ID attributes and reference them with document.getElementById(id).
You could also use the NAME attribute and reference the form by name document.forms["name_of_form"];
The quick workaround/copout fix is to hunt down the field in the DOM a diffferent way. For example, with id='NewSkillName' use document.getElementById('NewSkillName').value.
I have a bit of a problem achieving what I'm trying to do.
I'm doing a mailbox like page and I'd like to add a "Respond" button which will fill a form with some values.
I'm generating my page message by message in php. For each message I generate an input button with its own id and when I click on the button, I'd like to open a form in a new window, with the recipient and title prefilled and not changeable by the user, with another textarea that the user can fill with his message.
For that, I have a general template for a form containing 3 values (recipient, title and message). All are (for the moment) text or textarea values.
Is it possible to use one form to send a message to anyone, or do I have to generate a form for each message with pre filled values ? The last solution seems quite horrible to do.
I tried to find something that I could do with only javascript, since I want the form to be submitted asynchronously by Ajax.
I can make an onClick event and pass the values to that function, but in that case I won't have the values of the textarea the user will have entered.
Is there a way to do, for example, an entire form in Javascript with the values I'll pass through the onClick event, get the value of the textarea from the form that would have been populated with these values, and then send everything through Ajax ?
Well, here is what I did.
For each Respond button generated, I set an onClick event passing the fields I wanted to be pre-filled in my form to a JS function RespondMessage()
I also made a form at the bottom of my page that I hid with css.
This form contains as much hidden fields as I want pre-filled datas, and as much spans as I want to show infos.
When I call the RespondMessage function, I manually set the hidden fields in my form with the arguments I called the function with.
After that I fill my spans with the infos I want to show (for example, I set the recipient's name for my message like that).
Once all of that is done, your form is ready to be displayed. So after setting the fields in the form, I just pass the form from display:none to display:block, and do a lot of css tricks to make that smooth and beautiful.
So now you have your pre-filled form, you just need another function that will make an Ajax call to avoid reloading the page after each response, and you'll call it with the onClick event of your form's submission button.
I hope that this process will help someone.
I'm not quite sure that it's the best way to do it and I find it quite dirty and exploitable so you need a bit more server side checking than usual, but it does the job.
I don't provide code because it's mostly all really specific to the application you're setting up.
Ok, I know there have been a few questions posted on this but a lot of the information are dotted around and not necessarily connected in one form that I need for my site.
Basically I want to create the style/functionality of the twitter form on their home page.
Where inside the input fields are the labels, and when you click on the input the fields the labels don NOT disappear but fade into a different colour. Its only when you type, is when it disappears.
If they don't type and press submit I want the verification signs come up ( I know how to do this but it seems to be conflicting when I put the jQuery code in)
When all fields are inputted I would like the form to fade and represent a thank you message whilst
the data gets placed into a mysql ( specifically a MAMP/PHP My Admin) database.
Very similar to this form on hbuddy.com
Would massively appreciate if this was responded in a step by step format, simply because i am at the beginning stages of learning pretty complex programming language.
Thanks!
you can try jquery ajax for form submission..
These links will help you for getting started..
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html
http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/
I'm having problems submitting my ajax form. I am used to the old fashioned way with refresh but this new stuff is beyond me for the time being. It's time to start learning new technolohies.
I have an autosuggest box that is getting my results from a database and populating the textbox just fine. When I designed this about 6 months ago, I was searching the database on the value rather than the key value. This is a problem today and needs to be fixed.
WHat the ajax has returned to my script is the key/value pair. Now that I have the id, I need to pass that into my php method so I can process it from there.
Can somone please give me a hand with this? It seems simple enough but again, javascript was never my thing so I am lost.
Here is all of the relevant code. Also, I don't think, at least from the code samples I have seen so far that I even need a form tag. Am I correct on this? Ideally, I want to submit the found ajax value with the enter button and NOT using a button.
So, just to clarify, this is what happens. The user types 2 or 3 letters. The ajax queries the db on a "LIKE" operator and returns the matches. The user chooses the one he wants and then the id goes out to my method and returns the exact record in a different window.
<form method="post" class="hdrForm" id="search" action="../../index.php?cer=2" target="_top">
<input type="text" name="string" class="hdrInput" id="string" value="Quick Search"><div id="acDiv"></div>
</form>
Note.. I need the "id" in this function to be submitted. Right now, I am getting the POST val off the form tag and that's not correct but how?
AC.chooseFunc = function(id,label)
{
document.forms.search.submit();
}
Thanks for any help that you guys can give me on this.
Take a look at jQuery. It is a javascript library. It contains functionality for doing Ajax.
jQuery Ajax documentation.
document.getElementById("search").onsubmit = function() {
// Do what you want with the form
return false; // Stops submit continuing
}
This also degrades gracefully (if your server side program is written right) in that users without javascript get the form submitted normally to the page in the action attribute, without the AJAX.
I'd suggest you use a framework such as jQuery. A basic tutorial (including AJAX) is available
You have two problems. One is that you are telling the form to submit:
document.forms.search.submit();
That is what is causing your form to submit in the standard, non-xhr way - causing a refresh. Also, because your form does not contain an input element for the id, that is not being sent to the server even with a regular form submission.
I agree with the posters that it would be a good idea to use jQuery or something to do your ajax based submission. Something like this could be used inside of your "AC.chooseFunc" function instead of the form submit.
And yes, if you go ajax entirely, you don't even need a form tag.