PHP/JavaScript How to show modal after submitting a form - javascript

I have a form with information about some people. Information is coming from a database, and next to each row is a button. When I press the button, modal should open and show only the information about that person. So if I have 5 people, there are also 5 buttons and each buttons should open a modal with information about that person.
My code is almost working. I don't know how to show a modal after pressing the button, because when I press the button the page reloads and the modal will start to show but it won't fully show becuase th page reload will prevent it. My code is working and the modal is showing the correct information, but the problem is that my page reloads after pressing the button,so it doesn't show my modal.
As far as I know I need to implement Ajax to my code but I am not sure how.
Here is my code:
https://github.com/luka3ska/Form

You should try:
<button name="test" type="button" onclick="onClick()">Click</button>
default value of type is submit. And this triggers a refresh.
So the type must be "button"

I think you have a problem about the event, you must stop the default behavior of the button.
You can do that with event.preventDefault().
In Javascript :
document.getElementById("buttonId").addEventListener("click", function(event){
event.preventDefault()
// Ajax request here ...
});
In JQuery :
$("buttonId").click(function(event){
event.preventDefault();
// Ajax request here ...
});

To extend on #Dumhuzy 's anwser and help you understand what's going on. Whenever you have a <button> within <form> that button will submit the form regardless of if it has the attribute type="submit" or not. Submitting a form will cause the page to reload.
<form action="">
<button>Will reload the page</button>
<button id="prevent">Will prevent reload</button>
</form>
To prevent the form from submitting you must prevent the default action with javascript.
document.getElementById("prevent").addEventListener("click", function(event){
event.preventDefault()
});

Related

How to stop SAPUI5 Button from submitting the form

I have a simple mytable.view.xml with a table and a button. This table is just one among others in a form and all the tables are handled through different view.xml.
<mvc:view>
<l:VerticalLayout>
//Code for table headers and table
</l:VerticalLayout>
<Button id="myButton" text="test" visible="true" press="onMyButtonClicked"/>
</mvc:view>
Controller:
onMyButtonClicked: function(){
window.location.href = "http://example.com/;
}
onMyButtonClicked is getting invoked when I click on button, but that is being overridden by form submit. Since there is no logic to handle this submit, the page is just reloading instead of navigating to http://example.com/. In developer tools of browser I noticed that the navigate to example.com is being triggered and is cancelled.
One thing I tried and worked was inspecting this button on browser and adding a onclick="return false;" in the button tag. But from sap.m.button I cannot do this.
Tried event.PreventDefault(). This didn't work either.
Is there any other way to stop this button from behaving like a submit button?
A button won't trigger anything if the press event is not bound. For your case why not just remove the press event binding to a callback? Am I missing something? UI5 buttons don't behave like HTML button of type "submit" inside a form.

Physical mouse click vs simulated button click?

Hello Stackoverflow!
I am experimenting with getting a chrome extensions cript to click a page button to trigger an AJAX request, however it would seem that physically clicking said button is not the same as using the following:
document.getElementsByTagName('input')[10].click();
the results of the getElements line is this:
<input type="submit" value="Continue ...">
Using document.forms sort of works, but unfortunately reloads the page, which is not what happens when the Ajaxrequest is fired by the click event.
document.forms[1].submit();
Calling the form returns the following:
<form
action="/battle.php" method="post" name="2913" id="2913" onsubmit="get('/battle.php', '', this);
disableSubmitButton(this);
return false;">…</form>
Doesn't seem obvious to a beginner programmer like me, why using the .click(); in F12 console (chrome) would be any different from the physical click. Also i have verified (sorf of) that the button on the screen is in fact the one i'm calling with the getElementsByTagName('input').
The page reloads because the type of the button is "submit". You could attach an event handler to the "click" button that can submit the form without reloading the page. Your code will look something like this:
Using JQuery:
$('#submitButton').on('click', function(e){
e.preventDefault(); // stops default submit
$('#2913').submit(); // or the ID of your form
});
And your HTML will be :
<input type="button" value="Continue ..." id="submitButton">

Calling JavaScript function on hitting enter key in input box

Although I am able to call Javascript function on hitting the enter key. I am calling a function shortIt() when user hits the enter key, shortIt() takes the text from input box and makes a request to Google URL Shortener API which returns a short URL, but the generated response is visible for only some seconds.
I am showing the response in a div.
Seems to be very weird problem, code is here https://s3-ap-southeast-1.amazonaws.com/s3freebucket/URLShortner/url-shortner.html
But when I click on shortIt button to short the url. It works fine and the response text stays in the div.
This is because on pressing the enter key, the form gets submitted. When this happens you will notice the page reloading. This is a default behaviour and is the consequence of using <form>. On form submission, the page in the forms action attribute is loaded. In this case the action attribute of the <form> is not set and so the page you are on is just reloaded, thus the script stops running and the page reloads.
Two straight forward options for fixing this:
(Simplest) Remove the form tag - it is not used to submit anything so removing it should leave things still working
Prevent the default action when the form submit event is fired.
With JQuery:
$('#myForm').on('submit', function (evt) {
evt.preventDefault(); // prevents form submission
});
Where myForm is the ID of your form tag. You will need add an id attribute to your existing html form tag: <form id="myForm" class="form-horizontal">

Cannot prevent default actions for form Buttons appended on Jquery UI dialog

I am loading form thorough Ajax to a jquery dialog window but I can't prevent default submission of the Form when I attach a click event on the submit button ie. I want the form not to submit when the user clicks the appended form submit button and the dialog does not close. The problem am having is , that, I can't select this button using jquery but the script functions when i run it in firebug and the dialog is already opened.
The form is daynamincally created in the admin.php from a class
NB: the form is loaded correctly in the Dialog window so ajax is fine but i cant select and attach click event to the form summit button and i dont want to use the dialog buttons. I want the form to function as expected. Then, I can prevent the submit button action if the form is on normal webpage but not in the dialog
Please assist me am new in programming
This is the code in the admin.php which is loaded via Jquery ajax when a link clicked
<form action="process.php" method="post" id="edit_form">
<input type="submit" name="event_submit" value="Create" />
cancel
</fieldset>
</form>
I cant also prevent the default action of the cancel link when it is clicked.
THis is the jquery code to load the admin.php
This is the code to prevent the default action of form submit button from functioning
$("#edit_form input[type=submit]").on("click",function(event){
event.preventDefault();
alert('You clicked a button');
});
You need to use event delegation to make sure the button event is bound when it is created dynamically by jQuery UI:
$(document).on("click","#edit_form input[type=submit]", function(event){
event.preventDefault();
alert('You clicked a button');
});
Take a look at the documentation for .on which explains the concept in great detail.
Try this:
$(document).on("click", "#edit_form input[type=submit]",function(event){
event.preventDefault();
alert('You clicked a button');
});
Try delegate
Appended DOM objects will also have events.
$(body).delegate("#edit_form input[type=submit]","click",function(event)
{
event.preventDefault();
alert('You clicked a button');
});

when form submit ,the order of click function and submit

about click and submit
example below:
<form action="url" method="post">
<input type="text" id="input1"/>
<input type="submit" value="submit" onclick="testFun()"/>
</form>
if it is possible that function testFun run after the form's submit when we click the button to submit
if the answser is no.
why? how does the browser work when click the submit button?? the order is click function-> submit ? is right??
No you cannot execute a function after the form has been submitted - the order of which things are executed is as follows :
User clicks the submit button
The onclick function is executed
The browser submits the page to the url specified in the action of the form
You can prevent the browser submitting the page by returning false from the onclick handler :
function myfunc() {
// do some stuff
return false;
}
the submit button should then be modified like this :
<input type="submit" onclick="return myfunc()"/>
If you do wish to execute a function after the form has been submitted you need to submit the form using AJAX - this doesnt cause the browser to navigate away from the page and a JavaScript function can be executed after the form has been submitted
This is not possible because the form's action would redirect the browser to that URL.
1 option would be to run testFun() on your action url page, but this might not be possible depending on what the function does.
If you are to post more information about what you are actually trying to do here, then it might help.
No, but testFun might (in turn) call another, asynchronous, function that wouldn't run until the form had submitted (at which point it wouldn't run at all since the browser would have left the page).
No it is not possible, after submit you are out of the scope from the current page. But if you are using an iframe for your form submit and call the function on the parent page, then I thought it will work.
The anwswer is "It is not possible"
Why
Because once the browser triggers the submit event all user interaction with page is stopped. After the submit event is triggered the communication is between your browser and the webserver. This is how broswers are designed.
In your case Form submission happens because you have a form in your page and in that form you have an input of type=button. If you dont want to submit the page you can change the type of the input to button.
Check this fiddle http://jsfiddle.net/kiranvj/MBxNs/1/

Categories