Let's say I'm doing a POST form, so I set my method and action like this:
<form method="post" action="page.php">
<textarea name="content"></textarea>
<input type="submit" value="Submit">
</form>
My data is successfully transferred and everything is great. Now let's say I want to open a new window upon submission. Typically you'd do something like this:
<form method="post" action="page.php" onSubmit="window.open('page.php', 'Submission', 'width=600,height=400,status=yes,resizable=no,scrollbars=no'>
<textarea name="content"></textarea>
<input type="submit" value="Submit">
</form>
But here is the conundrum: when you click submit, the pop-up window opens AND the form submits in the original window.
Question: does this window.open JS method work with the the POST action? Is my syntax wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<textarea id="text" name="content"></textarea>
<input type="submit" onclick="submit()" value="Submit">
<script>
function submit()
{
var text = document.getElementById("text").value;
$.ajax({
type: "POST",
url: "post.php?text="+text,
success: function(html){ alert('POST OK'); window.open('http://www.google.com'); }
});
}
</script>
With return false, the form won't submit.
<form method="post" action="page.php" onSubmit="window.open('page.php', 'Submission', 'width=600,height=400,status=yes,resizable=no,scrollbars=no'); return false;">
<textarea name="content"></textarea>
<input type="submit" value="Submit">
</form>
Related
I have to post data to php but when I do, the page reloads. I have tried fixing this using answers given in similar questions but none of them yield proper results. Thanks for your help.
<!--HTML-->
<form method="post" action="index.php" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
Another way that I was recommended was by using ajax:
<form id="form" >
<input style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">
<input type="submit" href="#" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" onclick =" sendForm(event);" value="Enter">
</form>
<script>
$('#form').on('click', function(e){
e.preventDefault();
var name = $(#code).val(),
$.ajax({
type: 'post',
url: 'header_php.php',
});
});
</script>
Try to add onclick = "sendForm(event);" in button instead of form
you could change onsubmit instead of onclick in the form
function sendForm(e) {
e.preventDefault();
}
<form method="post" action="index.php" onsubmit="sendForm(event);"><!--changes-->
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
Change button type="submit" to button Type="button" and
Use jquery ajax
$("#btnid").click(function(){
$.ajax({
method: "POST",
url: "some.php",
data: { name: $('#code').val()}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
})
Also remove action from form
Add onsubmit="return false;" to your form. In you js function e is clickEvent not is SubmitEvent, submitEvent make page reload.
<!--HTML-->
<form method="post" action="index.php" onsubmit="return false;" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
I am trying to code a post form which sends the form to another window and then reloads the window in which the form was submitted in.
page2 is not on the same domain as page1 and i can't access the code of page2.
My current form on page1 looks like this:
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit" onclick="function1();window.location.refresh()">
</form>
The form is being send successfully and the function is being executed but the tab won't refresh.
Try this..
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit"onclick="window.location.reload();">
</form>
While your use case is not obvious at the moment, this might be useful.
Handle submit using script, prevent the default action, post the form and then reload the page.
<form id="myForm" target="_blank">
<input type="submit" value="Submit" onclick="wait(event);" >
</form>
script
function wait(e)
{
e.preventDefault();
document.getElementById('myForm').submit();
console.log('done!')
window.location.reload();
}
try this code this will refresh you page 1.
function function_one(){
$.ajax({
url: 'show.php',
type: 'POST',
data: {'value': $("#input1").val()},
success: function(data){
window.location.refresh();
}
});
}
<form target="_blank">
<input type="text" name="input1" value="input1value" id="input1">
<input type="submit" value="Submit" onclick="function_one()">
</form>
<p id="asfasf"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I have a submit event that use native POST (non-ajax).
<form method="post">
<button type="submit" value="submit"></button>
</form>
How can I prompt the user when the user clicked on the submit button? if the user clicked confirm, then only it will continue.. I know I can do this with ajax, but is it possible to do it with the native post too?
You can add a confirm() to the submit event of the form, and return its value to the anonymous function as follows (using jQuery):
$('form').on('submit', function() {
return confirm('Are you sure?');
});
jsFiddle Demo
Just do it
<form onsubmit="return confirm('Are you sure?')" />
Although this is not the recommended way but it will do what you want
<form method="post" onsubmit="return confirm('Do you really want to submit');">
<button type="submit" value="submit">Submit</button>
</form>
function submitForm() {
var r = confirm("Do you want to submit the form?");
if (r == true) {
document.getElementById("mainForm").submit();
} else {
return false;
}
}
<html>
<body>
<form id="mainForm" method="post" onsubmit="submitForm()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Yes, it's possible.
<form id="f" action="demo_form.asp" onsubmit="return false">
Enter name: <input type="text" name="fname">
<input type="submit" onclick="t()" value="Submit">
</form>
<script>
function t() {
if(confirm("Yo")){
var form = document.getElementById("f")
form.submit()
}
}
</script>
I want to create a form for my blog visitors like this:
<form name="myform" id="test">
<input type="text" name="url"/>
<input type="submit" value="submit"/>
</form>
If someone enters a URL: https://demo.website.com/page/blablabla.html
It will generate a URL: https://newwebsite.com/page/blablabla.html
So the point is: just change demo.website be newwebsite
Is this possible with javascript or jQuery?
Try this approach:
$("input[name='url']").on('change', function(e){
$(this).val($(this).val().replace("demo.website.","newwebsite."));
})
Working code would be somewhat like this
<form name="myform" id="test">
<input type="text" name="url" onblur="func(this)" />
<input type="submit" value="submit"/>
</form>
<script>
function func(elem){
var _url = elem.value;
var finUrl = _url.replace('demo.website','newwebsite');
console.log(finUrl);
}
</script>
Here is one form example. It is working good without any issue.
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>
Now I have to create the same form but a little modification needed. I have my markup like this
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
<button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
</form>
To submit the form I have used this jQuery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('button[type=submit]').click(function() {
var Id = jQuery(this).attr('data-value');
var Name = jQuery(this).attr('data-name');
alert(Name);
})
});
</script>
But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?
Update
Yes I can change my markup if you think so.
First of all, your HTML is not correct. Move the inputs inside of the form:
<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
</form>
You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.
$(document).ready(function () {
$("form").on("submit", function () {
$.ajax({
type: "POST",
url: formUrl,
data: $(this).serializeArray(),
success: function (data) {
/* handle success */
},
error: function (data) {
/* handle error */
},
dataType: "json" // remove this if the server doesn't send json data
});
return false; // prevent default browser behavior
});
});
Note $(this).serializeArray() - this returns an array like this:
[{
name: "some-input-name",
value: "some-input-value"
}, ...
Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?