Submitting a form without page reload [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I don't know Ajax or PHP but I want to submit this form without page refresh and also want to appear check icon beside the submit button. How can I do this?
<form id="form" action="" method="post">
<input type="text" id="email" value="e-mail address" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>

<script>
function xyz(){
var email_val=$('#email').val();
$.post("ajax.php",{"email":email_val},function(data){
if(data) {
$('#message').html('Data submit successfully');
$('#email').val('');
}
else{
$('#message').html('Failed');
}
});
}
</script>
<form id="form" action="" method="post" onsubmit="xyz()">
<input type="text" id="email" value="e-mail address" />
<input type="submit" id="submit" name="submit" value="Submit" />
<span id="message"></span>
</form>
ajax.php
if(isset($_REQUEST['email'])){
//Your code here
}

If you are not aware of AJAX and PHP but still you have to submit a form without page reload then follow this tutorial.. do some home works
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Related

Creating an HTML form to interact with REST API [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 months ago.
Improve this question
I am trying to write an HTML form to interact with a REST API.
This is what I have so far, but I'm not sure what I need to do to actually get it to interact with the REST API, how do I link them?
<!DOCTYPE html>
</html>
<head>
</head>
<body>
<form id="myForm">
<label for="name">Name</label><br>
<input type="text" id="name" name="name"><br>
<label for="password">Password</label><br>
<input type="text" id="password" name="password"><br>
</form>
</body>
You are almost there. First of all, your form needs to be submittable. You can achieve this by adding a submit input:
<!DOCTYPE html>
</html>
<head>
</head>
<body>
<form id="myForm" action="/action_page.php">
<label for="name">Name</label><br>
<input type="text" id="name" name="name"><br>
<label for="password">Password</label><br>
<input type="text" id="password" name="password"><br>
<input type="submit" value="Submit">
</form>
</body>
Now, your structure is ready to be used. On the other end, you have a RESTful API, which should handle properly the request your form is sending. You can achieve that using the action attribute of your form tag.

PHP form does not submit [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to submit the form after an if statement for example:
<?Php
if($something){
?>
<script type="text/javascript">
document.getElementById('dateForm').submit(); // SUBMIT FORM
</script>
<form id="dateForm" action="https://www.paypal.com/cgi-bin/webscr" method="POST">
<input type="hidden" name="test" value="test">
<input type="hidden" name"test2" value="Support">
</form>
<?php
}
?>
However, this doesn't work.
Put the script after the form tag. It searches dateForm id and until that no form is in the output so it does nothing. When you place that after it, it'll search the page for that id and it finds that and submits.
<?Php
if($something):?>
<form id="dateForm" action="https://www.paypal.com/cgi-bin/webscr" method="POST">
<input type="hidden" name="test" value="test">
<input type="hidden" name"test2" value="Support">
</form>
<script type="text/javascript">
document.getElementById('dateForm').submit(); // SUBMIT FORM
</script>
<?php
endif;?>

How to link another page using button? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have used a template from the web for a Login page, and I am not able to figure out how can I link this page to another when one clicks the 'Login' button. I have no knowledge of HTML and CSS or JS , so if anybody can guide me through this I'll be grateful.Its for a college project that has to be submitted tomorrow. Its not that I don't want to learn, but there was something else I was working on which didn't work out pretty well so I had to start this and I have only a day.
I was unable to paste the code here. SO here's the link : http://pastebin.com/pPS0Np8A
<input type="button" value="click" onclick="window.open("http://www.google.com/"); window.open("http://www.youtube.com/");" />
If it's just a Link when pressing the button, put an <a>-tag around your button and the LInk inside the href attribute:
<p><input type="submit" value="Sign In"></p>
using harshit's solution i added the id to restore css properties but if the css value is a class rather than an id just replace id= with class=.
<input type="button" value="click" id="myCssClassId" onclick="window.open("http://www.google.com/"); window.open("http://www.youtube.com/");" />
So you were "not able to figure out how can I link this page to another when one clicks the 'Login' button".
Simplified from the login-page you provided, you have the following code:
<form action="Default5.aspx" method="POST">
<fieldset>
<p><label for="email">E-mail address</label></p>
<p><input type="email"
id="email"
value="mail#address.com"
required="required" />
</p>
<p><label for="password">Password</label></p>
<p><input type="password"
id="password"
value="password" />
</p>
<p><input type="submit" value="Login" /></p>
</fieldset>
</form>
Now, note the <input type="submit" value="Login" />. Once you'll click that, the form will submit the data contained in it (the password and email).
When you submit a form, the form needs an address where it needs to send the data to. This is then also the page that is displayed ('redirected'). You set this simply with the form's action attribute, which is just an URL.
Just wanted to rectify this for future readers.
EDIT:
So, for example an exact image-search on google could work like:
<form method="GET"
action="http://www.google.com/search"
target="_BLANK"
onsubmit="var e = this.getElementsByTagName('input');
e[1].value= 'isz:ex,iszw:' + e[3].value
+ ',iszh:' + e[4].value;
return true;
"
><fieldset>
<input type="hidden" name="tbm" value="isch" />
<input type="hidden" id="tbs" name="tbs" />
<p>Search Image:
<input type="text" name="q" value="search" />
</p>
<p>
Width: <input type="text" value="32" /> px <br />
Height: <input type="text" value="32" /> px <br />
<input type="submit" value="Search" />
</p>
</fieldset>
</form>
Example jsFiddle here
Here the method is changed from POST to GET. That way the values entered in the form are appended to the URL (so anyone can read them).
To close with a final example of how to open a new blank page I added the target-attribute, and pointed it to _BLANK.
The example's are intentionally kept simple, style and expand on them as you wish.

make the form pause after a submit? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to design a Login form let's say something like this:
<form action="target.php" method="POST">
Username: <input type="text" name="user" id="user" /><br /><br />
Password: <input type="password" name="pass" id="pass" /><br /><br />
<input type="submit" value="submit" id="submit" />
</from>
what I'm trying to do is to make the form show some pic.gif for 3 seconds when user hits submit and then continue I don't want it to start the next process directly.
Have your image initially with style "display:none" and modify your form declaration to hanlde "onsubmit" event:
<form action="target.php" method="POST" onsubmit = "mySubmit(this)">
and then define function:
function mySubmit(frm) {
document.getElementById("myImg").style.display = 'block';
setTimeout(function() {frm.submit()}, 3000);
return false;
}
It will display your image and cancel original submit request. But after 3 seconds it will submit form from code.
It sounds like you can just use the setTimeout() function.
<input type="submit" value="submit" id="submit" onclick="window.setTimeout(doStuffAfter, 30000)">
You call it in whatever way you want with func being the called after the delay. So you can open the image and then navigate away once the delay is done.
window.setTimeout(func, delay, [param1, param2, ...]);
https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout
Try
$('form').submit(function () {
if (showPic()) {
return true;
} else {
return false;
}
}
From a UX perspective I recommend giving them a prompt in your pic.

how to check html5 form validity with vanilla javascript? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
HTML:
<form id="myform" method="post">
<input name="email" type="email" required=""/>
<input name="fname" type="text" required="" />
<input name="zip" type="text" />
<input type="button" value="button" />
</form>
Here I want to just check email by applying javascript function for html5 can we do that?
Edit
It has been unclear/misunderstood before. My question is do we have boolean valid check like form.email.valid() so that we can do check for email only with using javascript?
You should change your button input. A HTML5 submit button needs to look like the following:
<button type="submit">Submit</button>
Also, giving your e-mail a placeholder would be nice:
<input name="email" type="email" placeholder="me#example.com" required=""/>
Example jsFiddle.

Categories

Resources