I am trying to send a form by using a click event to trigger the form submission. For some reason however, this does not seem to work.
Code:
<form id="send_intake">
<div class="input_line">Voornaam: <input type="text" name="firstname" id="send_intake_firstname"></div>
<div class="input_line">Achternaam: <input type="text" name="lastname" id="send_intake_lastname"></div>
<div class="input_line">E-mailadres: <input type="email" name="email" id="send_intake_email"></div>
<input type="submit" class="form_submit" value="Stuur">
</form>
<script>
//Send form
$(document).ready(function(){
$(".function_header").on( "click", "#submit_send_intake", function() {
alert ("click event fired.");
$("#send_intake").submit(function() {
$.post("pages/forms_intake/functions/send_intake_form.php", $("#send_intake").serialize());
});
});
});
</script>
Hope you guys can see what's going wrong here :(
UPDATE:
Sorry for not providing you with all the information.
Actually this form is part of a web app. The form is inside a .php file that is loaded into a dashboard with .load().
The situation is as follows:
In the dashboard file, there is a specific DIV in which forms are dynamically loaded upon user's request. But for UI reasons I want the users to be able to submit the form with the same button every time. So when the form is loaded, the ID #submit_send_intake is assigned to that button. I'm using Jquery event delegation to bind the click event to the dynamically added ID by specifying the buttons' parent element, which is .function_header.
To summarize: .function_header and #submit_send_intake are elements that exist in the parent document (dashboard) of this form document.
I cannot see element with class function_header and element with ID submit_send_intake. Probably you didn't copy that part of markup (but please check).
If you leave action empty in your form tag, your page will be refreshed by submit. So you should specify action.
Related
I need to have an HTML document that can contain multiple input fields.
Starting with one field, a submit should create another input field as a copy of itself.
So I declared it with HTML code and wrote a function to append a copy of it to my div.
For testing purposes, I made a button to call my js function, too.
Now I'm confused as clicking the button will create a new field and pushing enter inside a field will initialize my HTML document, deleting previously created fields.
Can anybody figure out why?
Kind regards, Tommy
<button onclick="createRow()">New row</button>
<div id="criteriaTableBody">
<div class="tr" id="criteriaRow">
<div class="td">
<form onsubmit="createRow()">
<input type="text" name="text" value="">
</form>
</div>
</div>
</div>
<script>
function createRow() {
var row = document.getElementById("criteriaRow");
var newRow = row.cloneNode(true);
document.getElementById("criteriaTableBody").appendChild(newRow);
}
</script>
That's because your form submits. Forms are used to submit data to another page, so the entered data can be processed. You don't want this, instead you want to prevent the form from submitting using Event.preventDefault().
function createRow(event) { // Mind "event" here
// Prevent form from submitting (reloading the page and deleting your "progress")
event.preventDefault();
var row = document.getElementById("criteriaRow");
var newRow = row.cloneNode(true);
document.getElementById("criteriaTableBody").appendChild(newRow);
}
<button onclick="createRow(event)">New row</button> <!-- Pass event here! -->
<div id="criteriaTableBody">
<div class="tr" id="criteriaRow">
<div class="td">
<form onsubmit="createRow(event)"> <!-- Pass event here! -->
<input type="text" name="text" value="">
</form>
</div>
</div>
</div>
I also recommend avoiding HTML attributes like onclick, onsubmit, etc. Use an EventListener instead.
Pressing enter will submit the form.
The submit event handler will run, then the contents of the form will be sent to the URL specified by the action (the current URL since there isn't an action).
This loads a new page.
Since there is no action, the new page is a brand new, unmodified by JS, copy of the current page.
Avoid intrinsic event attributes like onsubmit. Use JavaScript event binding instead. Learn about the Event object and its preventDefault method.
I am developing a plugin based on another pro plugins in WordPress.
I would like to stop an ajax form submission which is written in another plugin. I can't change ajax code in another plugin.
Current Scenario
When I submit a form, it will take me to the new page but with that it also running an ajax request. I want to stop that ajax request. Simply, I just want to submit my form normally with new page.
HTML
<form id="redirect_form" class="abc-form" method="post" name="New Form" action="http://example.com/form-redirect">
<label for="form-field-field_1" class="abc-field-label">Test</label>
<input type="text" name="form_fields[field_1]" id="form-field-field_1" placeholder="Enter a location" autocomplete="off">
<button type="submit" class="form_redirect_to">Submit</button>
</form>
jQuery
jQuery(document).ready(function($){
jQuery('#redirect_form').on('submit',function(e){
e.preventDefault();
e.stopPropagation();
$(this).off("submit");
this.submit();
return false;
});
});
As you mentioned it by comment, the default Jquery event is bind using the class of the form.
By changing the default class, the event won't be triggered anymore in the default Jquery function.
Change:
<form id="redirect_form" class="abc-form">
By:
<form id="redirect_form" class="another-class">
I would like to know in what way passing data from a form to a php file is best?
I have used ajax to retrieve a page and load into a div tag on the "master page", now there is a form on this sub page that needs to upload a file. So far i have got it to upload and the form posts to a new .php file where the data is handled.
When the data is handled and the page then navigates back to the master page, i noticed upon form submission when it is directed to the new php page, it shows blank white while the code executed and then redirects to the master page, my question is:
In order to eliminate the white page while code is being executed, is there a better way to go about this or is this sufficient and what can i do to not show the white page?
Thanks in advance.
Warren
Why not simply use jQuery. See how they interupt the submit and you may put validations etc. then process then do whatever you need: http://api.jquery.com/submit/
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
You could use ajax to upload the files without submitting the form, for example by using a script like this :
http://www.a2zwebhelp.com/multiple-file-upload
I want to scrap a website that changes content after modifying a <select> that has an attribute onchange="this.form.submit()". So I need to know how form.submit() works so I can simulate it.
All it does is submit the parent form as would normally happen if you clicked a <input type="submit" /> button.
I have a jQuery auto-complete field that selects clients email adddress's. Next to that is a button that allows the user to create a new client. To avoid the clients being taken away from their already half filled form I am opening the form within a lightbox.
Enter jQuery Fancybox.
The new client add form is located within a jQuery FancyBox (so it is actually an external page in an iframe).
Once the user submits the form they are redirected to a page page with parent.$.fancybox.close(); script which then closes the fancybox
I doubt this is a great way to close the lightbox. Ideally I would like the action to be fired from the submit button but then I have to take into consideration what happens if the form fails server end validation... Anyway, Moving onto my main problem.
Assuming the user was added successfully, I now would like their name and email address to be automatically inserted into the original auto-complete field back on the parent page.
This would involve some sort of interaction between frames, something I have no idea about and something Google hasn't been able to help me with either.
Is this possible? If this is could you please give me an example or point me in the right direction.
Here is some code to give you a rough idea of the parent page that calls the fancybox lightbox and ultimately needs the email and name of the newly created user passed back to it.
<tr id="client-add">
<td>Billing Client:</td>
<td><input type="hidden" value="" name="client_id" /><input type="text" id="addClient" name="client_name" value="" style="width: 200px;" /><red>*</red> <a class="iframe" href="/clients/add_lightbox"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
</td>
Thankyou.
Tim
I'd use fancybox with inline mode instead of iframe. So basically you should put your 'create client' form in a hidden div, in the same page where you have the rest of your client selector GUI. Once you take that approach, you can easily interact with the main page's DOM from your fancybox form, as they are essentially part of the same DOM structure. Also, you can bind an autocomplete refresh action to the fancybox's onClosed event.
Modifying your original code, something like this should do the trick (untested):
<tr id="client-add">
<td>Billing Client:</td>
<td>
<input type="hidden" value="" name="client_id" />
<input type="text" id="add_client" name="client_name" value="" style="width: 200px;" /><red>*</red>
<a id="add_client" href="#create_client_div"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
</td>
</tr>
... and then somewhere in your page:
<div id="create_client_div" style="display: none;">
<form name="new_client" ...>
</form>
</div>
And you just bind your fancybox the usual way, as you would with an iframe-type box:
$("a#add_client").fancybox({ ... });
This way you can freely interact between the create client form and the rest of your page.