Redirecting after form submission in Javascript - javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/

The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

Related

How to prevent a form from opening action url and only print when submitted?

i am building a form and when i submit it it opens the action url. I want to submit the form on click button which should not open the target url but submit the request. as well as i want to print a message after submit and form should be cleared after submit.
<form id="contact" action="https://control.msg91.com/api/sendhttp.php" method="post">
<h3>Send SMS</h3>
<h4>Build in Process</h4>
<fieldset>
<input name="authkey" type="hidden" value="auth key as required"/>
<input name="mobiles" placeholder="Mobile Number" type="text" tabindex="1" maxlength="10" required >
</fieldset>
<fieldset>
<textarea name="message" placeholder="Type your message here...." tabindex="2" maxlength="320" required></textarea>
</fieldset>
<input name="sender" type="hidden" value="FAKEin" />
<input name="route" type="hidden" value="4" />
<input name="country" type="hidden" value="0" />
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
any help how can i do this?
also can i add a hidden text in message tab that should add to the message tab in post/get as + instead of &
eg. actionurl.php?authkey=custommade&mobiles=9999999999&message=orginal+message+hidden+message&sender=FAKEin&route=4&country=0&submit=
You can also check the source code of page https://www.tricksbygoogle.com/sms/sms.php
Basically You can't .
The only solution here I see , is using ajax query and use javascript to clear form.
This example I provide is no redirections at all. What means you page will not be reloaded.
Maybe little jquery will help.
var result_func = function(response){
if(response.allOk){
$this.reset();
}
}
$('#contact').submit(function(e){
e.preventDefault()l
var $this = $(this);
var data = $this.serialize();
$.post($this.attr('action'),data,result_func.bind($this));
});
Header location will work , but user still will be redirected.
Based on your question, and the comments it looks like you're going to have to do a little bit of research. Here are some tips though.
If you would like to include the functions from a page without actually visiting the page, than you can use what is called an include statement. This will keep the browser from visiting that page while still executing it. - http://php.net/manual/en/function.include.php
To display a message you're going to need to hide and show the element with javascript. I would suggest viewing this question - Hide div after a few seconds
Basically on submit, you're going to want to check for the variables from your form. You would run a php if statement.
Then, if those variables exist you are going to want to include your action page.
In the same if statement, you're going to want to echo a <div> with a class that has some javascript attached to it to hide it after a few seconds.
The form will automatically clear on submit.
if($variable != null){
include '/action.php' // --- you can add some GET variables to the end of this if you would like to.
echo '<div id="message">Message sent</div>'
}

Formspree (HTML) and JavaScript not working simultaneously. (Toastr library)

I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.
You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.
The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

javascript clear php post return in modal window

I have a small form inside of a modal window. The window pops up when a link is clicked.
The form has 2 buttons, submit and close.
After something is submitted, the form posts to php. Php returns a thank you message. When I click the close button, it clears the info from the form, but it doesn't clear the thank you message, that remains.
How can I accomplish this? Here is my code. Thank you in advance.
The form
<div class="panel3">
<form id="form1" onsubmit="return submitForm2();">
<input type="text" name="url" size="34" />
<textarea placeholder="Please tell us why this should be reviewed." style="resize:none" name="flag" cols="25" rows="5"></textarea>
<br>
<input type="submit" name="submit" value="Submit" />
<input type="button" onclick="formReset()" value="Close" class="trigger3" />
<div class="form_result2"></div>
</form>
</div>
and the script
<script>
function formReset(){
document.getElementById("form1").reset();
}
</script>
Thanks!
Where is the "Thank you" message displaying? If it is inside the "form_result2", the reset() function won't clear the message. That function only clears the form elements. You have to clear the "form_result2" div separately.
You can use
document.getElementsByClassName("form_result2").item(0).innerHTML="";

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.

Categories

Resources