I am trying to use the Polymer element Iron-Form to submit information into the $_POST array. However my submit button (a paper-button) - which should run the script to submit the form - does not seem to submit the form when pressed.
I'm new to Polymer and to PHP, so I'm not sure what is going wrong.
Form script
<form is="iron-form" method="post" id="insert-project-form" action="/form/handler">
<paper-input label="Project Title" name="title"></paper-input>
<paper-input label="Client ID" name="clientid"></paper-input>
<paper-input label="Working Hours" name="workhours"></paper-input>
<paper-button raised onclick="submitForm()">Submit</paper-button>
<script>
function submitForm() {
document.getElementById('insert-project-form').submit();
}
</script>
</form>
I have been having the same problem, and have been doing it the same way you do it. According to the Documentation it should work. But I have found a work around for this problem
Add a normal button for the submission and style its visibility to hidden
<button type="submit" id="SubmitButton" name="submit" style="visibility:hidden;"></button>
And in your javascript code change the submitForm function to this
function submitForm(){
document.getElementById('SubmitButton').click();
console.log("Submitted!")
}
And keep the paper button line the way it is.
<paper-button raised onclick="submitForm()">Submit</paper-button>
What it does is when the paper button is clicked, it triggers a click event on the normal submit. I'm pretty sure there are more efficient ways than this, but I will be using this for now.
<form is="iron-form" method="post" id="insert-project-form" action="/form/handler">
the attribute at the very end "action" needs to pass it to your php file. Assuming your php file is in a folder called "php". the solution to this would be
<form is="iron-form" method="post" id="insert-project-form" action="php/yourphpfile.php">
and your logic would be contained in the php file that submits it to a database if needed.
Related
I was doing an application form and the form is not working. When I click the submit button it doesn't even run the if statement to POST the variables.
My form tag looks like this:
<form method="post" enctype="multipart/form-data">
My submit button looks like this:
<button name="submeter" type="submit" class="btn btn-gfort">Submeter</button>
And the if statement in my form looks like this:
if(isset($_POST['submeter'])) {
I even tried to run a JS alert just to see if it actually enters the if statement but it doesn't. No console errors as well.Any help is appreciated
Have you added method="post" to the <form>-tag?
Well your codes looks fine. it seems you are submitting the form using post method on some php file. Please share the complete form element and the codes of the target file that you have defined in the action attribute of form tag.
the submit button sends the data to server and there you can process the data using any server side scripting language. your codes must look something like
<form action="process.php" method = "post">
<!-- your form controls -->`
<button name="submeter" type="submit" class="btn btn-gfort">Submeter</button>
</form>
then create another file on same location where html/php file containing this form is saved with name process.php, in which you can use following codes.
if(isset($_POST['submeter'])) {
// php codes
}
in case you want to subimt the form on the same page. make sure your file is php use action="#" in form tag and place the file of your webserver as you can not run php files directly from your filesystem but you need to run it through your webserver
i am very beginner to php,html and web development.Now iam learning php.
And i have a doubt which is exactly same as how to check if input type button is pressed in php?
but i couldn't find any appropriate answers there.Please see the above link...
Actually form submission is done by using Java script, that's why he have something like this in button's onclick="send(this.form)" ...And this button type is not 'submit'but it is 'button' itself and i tried one of the answer that i found there
Using print_r($_POST) to print all Submitted values..But i couldn't find my button there..
My html code
<Form action="user_register.php" method="post">
<input type="text" id="txtEmail" name="textEmail"/>
<input type="button onclick=runjava() Name="Button"/>
</Form>
My Javascript
function runjava()
{
---
----Codes for validation and some animation
document.forms.item(0).submit();
}
please help me regarding this
Yes, you can use jQuery/javascript to do this.
Generally, you should assign either an ID or a class to your input element to easily identify exactly which control fired the event.
Suppose you have this input button:
<input type="button" id="mybutt" value="Click Me">
To alert when button is clicked:
$(document).ready(function() {
$('#mybutt').click(function() {
alert('it was pressed');
});
});
The $(document).ready(function() { bit makes sure that the page (DOM) has loaded all elements first, before it allows the code to bind events to them, etc. This is important.
NOTE THAT before you use jQuery commands, you must first ensure the jQuery library has been referenced/loaded on your page. Most times we do this in the <head> tags, like so:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
but it can be loaded any time before the jQuery code.
So I have this simple form:
<form action="includes/process.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<button onclick="dofunction(); return false;">Do it!</button>
<input type="file" id="upload_file" name="filename" style="float:left;width:70%;" size="42"/>
</form>
So what happens really when the button is clicked ?
Is it that the php file is called ? does it not ? the javascript is called before ?
Anyone can shed some light on this ?
Thanks !
Well, when you hit the button the following events occurs:
You send a REQUEST to the server
The php codes evaluates the request and runs some codes
Finally it returns back a RESPONSE which you see as a web page
Javascript is a client-side script which means that whenever you make an action on the page, the code runs. For instance, when you click the button, before sending the request javascript will work. You may, for instance, place a function that will be triggered when you hit the button which checks the form and either approves the form or shows the error messages
EDIT
As far as your comment is concerned:
Yes, javascript runs first when you hit the submit button. Php runs only when you submit the form and make a request to the server.
Consider this example: (I am better at explaining things with examples:)
<form action="somepage.php" onsubmit="return checkMe()" method="POST">
<input name="firstname" id="fn" value="" type="text" />
<input type="submit" value="Submit" />
<script type="text/javascript">
function checkMe(){
var tb = document.getElementById("fn")
if(tb.value == "Alex") return true;
else return false;
}
</script>
</form>
So basically, when you hit the button and try to submit the form, the javascript will first check whether the name provided in the textbox is Alex or not, if it is not then it will not submit the form. If it is Alex then it will submit the form and then the form will redirect the user to somepage.php. Finally, the php codes will work in somepage.php and the page will be rendered again.
What happens is that only doFunction() javascript function is invoked and nothing more.
However, it might be possible that this javascript function invokes "submit" event on the form and the request is sent (what you described as "php file is called").
Your code just trigger javascript event and your function. To submit a form you need an
<input type="submit" value="Submit" />
or a button, which default type is submit (thx davin)
<button value="Submit" />
However as far as you return false in your javascript code your form won't be submitted even with the submit button.
I try to create an upload progress bar with PHP and jQuery. However, I have a problem when I bring it to the form data. The code is similar like this:
<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
Suburb:<input type="text" name="txtSuburb" id="txtSuburb">
Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>
<input type="submit" name="DataSubmit" value="Submit Data"/>
</form>
As you can see, I got 2 submit buttons. If I keep the form like this then the form can't submit data to server. It just submits the file to iFrame. If I change the action and target of the form then the upload progress function will not work.
Could anyone please help me to find the solution for this?
I want the user can click on upload button to upload their file. Then they can take the rest to fill the form. When everything is done, they can click on another submit data button to submit their data (included the file) to the server.
Make sure that you have only one input element of type submit within your form.
If you want the first button to trigger some Javascript, use a regular input element or even a styled link and attach a Javascript event to it's onclick event, then prevent it's default behavior, e.g. by returning false.
Like this only the second button will actually submit your form which should do what you're describing.
In general I'd second #Treffynnon's suggestion to use a existing library for this purpose. These hacks have a tendency to get pretty nasty, especially when it comes to crossbrowser compatibility.
I am using an image instead of a submit button for search option and use onclick events to load the results using ajax in php.Now I need to load results by hit enter also.Is their any ways to update my application without changing the image.
Thanks
Sure, add <input type="submit" style="display:none;" /> to the end of your form, should trick the browsers into allowing the Enter key to submit your form.
As far as getting the same functionality as your AJAX onclick event: You should be tying your ajax function to the <form>'s submit event instead of the <input>'s click event.
jsfiddle demonstration (uses jQuery for ajax ease, but your event doesn't have to)
I don't know what javascript library you're using, but I'll use jQuery in my example.
<script>
$(document).ready(function() {
$("form#interesting").bind("submit",function() {
$.get("target_page.php".function() {
// Callback functionality goes here.
});
});
});
</script>
<form id="interesting">
Enter your input: <input type="text" name="interesting_input" />
<!-- input type="image" is a way of using an image as a submit button -->
<input type="image" src="submit_button_image.gif" />
</form>
Hmm, There are several things I can think about.
fitst one - someone mentioned that you can style submit button as an image. Good idea and it's easy. this tutorial was posted as an answer some time ago http://www.ampsoft.net/webdesign-l/image-button.html .
Another problem is, you bind your submit event to onclick, but the natural submit for form is onsubmit. So if you hit enter on form input the form receives onsubmit event. You have to bind your JS to it.
It works genrally as in answer from #phleet when you use jquery, when you don't use any library, you can do something like
<form onsubmit="YOUR_JS_HERE">.....</form>
like in onclick. I also recommend using jQuery, though.