I have a JavaScript that changes the attribute of the input button to "disabled", so the user don't submit the page twice.
// Disables multiple submit
function disableSubmit (btn, submitForm) {
// Sets button as disabled, changes class and cursor
$(btn).attr("disabled", true);
$(btn).toggleClass("disabled alt2");
$(btn).css('cursor', 'initial');
$(btn).attr("value", "Sender...");
// Submits form
$(submitForm).submit();
}
// Disables submit for order form
$("#send-order").click(function () {
return disableSubmit(this, "#order");
});
The problem is that I need to track the name of the button submitting the page so I can handle it in my Django view.py file.
HTML
<input value="Send bestilling" id="foo" name="send-order" type="submit" class="button alt2">
View.py
request.POST.get("send-order", False)
But if I use my script to submit the page, I can't get the name of the input submitting the page. Is there any way to set a name for the button submitting the page in my script?
I tried this but didn't work:
$(submitForm).submit().attr("name", "send-order");
Solution
I had to change the code inside views.py in order to make this work.
you can use preventdefault or return false
$("#send-order").click(function (event) {
event.preventDefault();
return disableSubmit(this, "#order");
});
Or
<input id="send-order" value="Send" type="submit" onclick="disableSubmit(this, '#order');return false" />
One way you can do this is by creating a hidden input on your form, with a name of its own. Something like below.
<input type="hidden" name="buttonName" id="buttonName" />
Then, in your disableSubmit function, make it set the value of that input before submitting.
$(submitForm)
.find("input[name=buttonName]")
.attr("value",
$(btn).attr("name")
);
From there, you can just retrieve the "buttonName" value in your View.py.
Related
I have a button (<input type="submit">). When it is clicked the page reloads. Since I have some jQuery hide() functions that are called on page load, this causes these elements to be hidden again. How do I make the button do nothing, so I can still add some action that occurs when the button is clicked but not reload the page.
There is no need to use JS or jQuery.
to stop the page to reload, just specify the button type as 'button'.
If you don't specify the button type, the browser will automatically set it to 'reset' or 'submit' which causes the page to reload.
<button type='button'>submit</button>
Use either the <button> element or use an <input type="button"/>.
In HTML:
<form onsubmit="return false">
</form>
in order to avoid refresh at all "buttons", even with onclick assigned.
You could add a click handler on the button with jQuery and do return false.
$("input[type='submit']").click(function() { return false; });
or
$("form").submit(function() { return false; });
In HTML:
<input type="submit" onclick="return false">
With jQuery, some similar variant, already mentioned.
You can use a form that includes a submit button. Then use jQuery to prevent the default behavior of a form:
$(document).ready(function($) {
$(document).on('submit', '#submit-form', function(event) {
event.preventDefault();
alert('page did not reload');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
<button type='submit'>submit</button>
</form>
You could also use JavaScript for that:
let input = document.querySelector("input");
input.addEventListener("submit", (event) => {
event.preventDefault();
})
As stated in one of the comments (burried) above, this can be fixed by not placing the button tag inside the form tag. When the button is outside the form, the page does not refresh itself.
I can't comment yet, so I'm posting this as an answer.
Best way to avoid reload is how #user2868288 said: using the onsubmit on the form tag.
From all the other possibilities mentioned here, it's the only way which allows the new HTML5 browser data input validation to be triggered (<button> won't do it nor the jQuery/JS handlers) and allows your jQuery/AJAX dynamic info to be appended on the page.
For example:
<form id="frmData" onsubmit="return false">
<input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
<input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
<input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function() {
var tel = $("#txtTel").val();
var email = $("#txtEmail").val();
$.post("scripts/contact.php", {
tel1: tel,
email1: email
})
.done(function(data) {
$('#lblEstatus').append(data); // Appends status
if (data == "Received") {
$("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
}
})
.fail(function(xhr, textStatus, errorThrown) {
$('#lblEstatus').append("Error. Try later.");
});
});
});
</script>
Use event.preventDefault() in the first line of your event function.
Buttons must be of the type button and contain type="submit" in the button html.
Can we run a js function on a submit button and php on the same button. I have a submit button that sends form data to a database using php, but I want a second action (JavaScript function) to take place once the button is clicked as well. Is that possible?
You can add onclick() event to submit button. it will execute before submitting the form.
var buttonClick = () => {
alert("Do what you want to do!"); // Add your second work here
}
<form action="yourfile.php">
<input type="submit" onclick="buttonClick();">
</form>
The correct method is to call the javascript function on the onsubmit attribute in the form with a return state. Thus the form will wait until the JavaScript returns true before proceeding with submit.
The HTML
<form action="something.php" onsubmit="return someJsFunction()">
<!-- form elements -->
<input type="submit" value="submit">
</form>
The JavaScript
function someJsFunction(){
//your validations or code
if(condition == false){
return false; // This will prevent the Form from submitting and lets
// you show error message or do some actions
}else{
return true; // this will submit the form and handle the control to php.
}
}
You can do this with the jQuery submit callback for this
$("form").submit(function(){
alert("Submitted");
});
see. https://www.w3schools.com/jquery/event_submit.asp
I have a simple form, where I have a form element with one input type and button.
When I am click button, I am trying to get form data using
var fData = $("#test").serializeArray();
However for some reason, I am not able to get any values of form.
What could be the reason for this?
JSFiddle Demo
There are several issues. Firstly, the input has no name attribute, so it cannot be serialized. Secondly, you create the variable called fData, but log fdata - JS is case sensitive. Finally the form is being submit in the usual method when the button is clicked which means processing will be prevented after the first alert. To prevent this you can change the button to be a standard type, instead of a submit button:
<form id="test" method="POST">
<p>
<input id="val" name="foo" />
</p>
<button class="k-button" id="rset" type="button">submit</button>
</form>
Example fiddle
Or alternatively you can set the code to run under the submit event of the form, and use preventDefault to stop the standard form submission:
$("#test").submit(function (e) {
e.preventDefault();
alert('ok');
var fData = $(this).serializeArray();
alert('rData ' + fData);
});
Example fiddle
I have made a system that when you enter a specific value, it'll fade in values based on the selection.
I have this code here which is the main form where you can input the specific model numbers into the form and then press enter.
<form>
<input type="text" name="ModNum" id="ModelNumber" pattern="^PIV13RT[23]?$"
title="Your Model Number." placeholder="Please Input a Model number" size="35" maxlength="8">
<center><span class="egsmall"><strong>Eg: PIV13RT, PIV13RT2, Ect.</strong></span></center>
<center><div class="btnwrap"><input name="proceed" type="submit" class="submitsup" id="forward" /></div></center>
</form>
The problem is that when you press enter, because it's inside of a form, it reloads the page, which means that the fade in won't load because it's reloading the page.
$("#forward").click(function(){
$.ajax({
}).done(function() {
$('.optionbk').fadeIn('slow');
});
});
I realise that this can also be done with Javascript, but that wouldn't allow me to use a Form.
$("#forward").click(function(){
var text = $("#ModelNumber").val();
var comparingText = "PIV13RT";
var comparingText2 = "PIV13RT2";
var comparingText3 = "PIV13RT3";
if (text == comparingText) {
$('.optionbk').fadeIn('slow');
}
if (text == comparingText2) {
$('.optionbk').fadeIn('slow');
}
if (text == comparingText3) {
$('.optionbk').fadeIn('slow');
}
});
Is there anyway that I can do it inside of a form, but make it so that the page doesn't reload itself so that the fade works instead of reloading. The form is needed because it is following that specific pattern. Please note that the form isn't linking to an external PHP file.
The quickest solution is to add onsubmit="return false" into your opening <form> tag.
You should bind your callback function to the submit event that the form dispatches and make it return false to cancel the actual submission.
$('form').bind('submit', function(){
$.ajax();
return false;
});
I have a simple form with one hidden input field, and a submit button. When the user clicks the submit button, I want it first to run a JavaScript function with a confirm() function. Depending on whether the user hits 'Ok' or 'Cancel', I want the form to submit, or to not submit.
How do I successfully assign an on-click function to a submit button, and have it work as described above?
function confirmDelete() {
var del = confirm("Are you sure you wish to delete this post?");
if (del)
//continue and submit the form
else
//the form should not be submitted
}
Here is the form:
<form action="/delete/" method="post">
<input type="hidden" name="path" value="'.$path.'" />
</form>
I realize that I could scrap the form altogether and just pass the hidden variable as a GET variable to the /delete/ page, however I would prefer to use a POST variable for security reasons.
This would suffice:
<input type="submit" value="Delete" onClick="return confirm('Are you sure?');" />