I want to create a pop-up or Javascript item that allows users to accept the terms of completing an offer for me. Once they have accepted the terms, I would like that offer that they agreed to do to go under the account in a section or tabled labeled "Offers".
Please advise on how to code this.
You can use javascripts confirm. It will create a dialogue which will allow a user to press "Ok" or "Cancel". You can implement the following:
<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Do you agree to the terms of Service?")
if (answer){
window.location = "http://yoursite.com/offers.html";
}
else{
alert("You must agree to continue")
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Continue">
</form>
</body>
</html>
If you want this dialogue to appear when the page loads you can put onLoad="confirmation()" in the body tag. And alternative to a javascript confirmation box would be something along the lines of the following, I know some people really don't like popups and confirmations:
<input type="button" onclick="window.location='http://yoursite.com/offers.html';" value="Agree">
<input type="button" onclick="alert('You must agree to the terms of service');" value="Disagree">
Instead of an intrusive pop-up, why not have a checkbox that the user has to check in order to continue? If the checkbox isn't checked, then the form either won't submit or an error message could appear, telling the user (s)he didn't accept the terms.
Unless there's a specific reason you need to use JavaScript, I would try to stay away from JavaScript for functionality like this, especially considering that users can just turn JavaScript off.
For example (using JavaScript to prevent the form from submitting):
<form name="offerForm" action="/offer" method="post" onsubmit="return this.elements['agreeTerms'].checked;">
<!-- the rest of your form goes here -->
<input type="checkbox" name="agreeTerms" id="agreeTerms" value="1" /> <label for="agreeTerms">I agree to the terms.</label><br />
<input type="submit" value="Submit Offer Form" />
</form>
On the server side, I'm assuming you have a relational database behind everything. Let's say you have a users table, an offers table, and a users_offers bridge table to denote which users have accepted which offers.
Using the example above, you would only add a new record to the users_offers bridge table if agreeTerms came back with a value of "1". If the checkbox isn't checked, then agreeTerms won't have a value.
If you could edit your question with specifics concerning your situation (server-side language you use, basic database table information, etc.), I'll be able to fill in some more details.
Related
greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>
The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.
Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.
I am trying to repair an existing web form that submits a text area's contents to an external site's shopping cart service. The textarea is named "adtext" and upon submission it runs a few different scripts to calculate pricing, etc. It ultimately re-writes the ad content into a value named op31 (which is recognized by the shopping cart). The cart system recently got updated and it broke our script to convert line breaks in this text area into something that would be retained in that other site. I've tried looking at other sites, but it's over my head. I'm not particularly good at this stuff. I'm sure this isn't, and likely wasn't the best way to do it. I've seen CSS suggestions but don't understand it enough to actually implement them.
I've stripped out as much code as I comfortably could to clean it up, but still retain the issue. I'm wondering if someone could assist me with updating this function into something that would convert the "adtext" textarea's line breaks into something usable when written to "op31".
<script language="JavaScript" type="text/JavaScript">
function ConvertCarriageReturns(textarea, strReplace){
document.form.op31.value = escape(textarea.value)
for(i=0;i<document.form.op31.value.length;i++){
if(document.form.op31.value.indexOf("%0D%0A") > -1 ){
document.form.op31.value = document.form.op31.value.replace("%0D%0A",strReplace)
}
}
document.form.op31.value = unescape(document.form.op31.value)}
</script>
<form
action="https://(cart's url)/addtocart.aspx"
method="post"
name="form">
<textarea name="adtext" rows="12"></textarea>
<input alt="Add To Cart" name="add"
onclick="ConvertCarriageReturns(this.form.adtext,'<br>');
return checkwords(this)" src="https://....Add-To-Cart.gif"
type="image" />
<input name="item" type="hidden" value="(misc cart parameters" />
<input name="op31" readonly="readonly" type="hidden" />
</form>
You can use this native PHP function called nl2br
Like this:
$text = nl2br(this.form.adtext);
I try to make my checkout page more friendly and how to do this:
I have guest form`s and save button after them. And after guest info is saved (instead payment option) are show send my order button - this is from one module Cash on delivery, but instead to choice only this i move button to be showed directly.
BUT: Many clients are confused from this "save" button. I want to marge this two buttons in one.
How to do this? What is the best solution: to add some js when for save button or adding new button instead these 2?
You can see the problem page in my live shop here: http://bijutaniki.com/porychka (do not forget to add product like: http://bijutaniki.com/prysteni/8-prysten-na-nastroenieto.html - and shop is on bulgarian)
Now process looks like that:
What i want to do:
I try two times to add new button with js instead these to but without success. May be if use "save" button and add js to click on other "send order" button will be more easy because when "save" been clicked check fields above and if fields are valid show message.
What are you think, how to combine this buttons.
Thanks!
EDIT:
Save button and message:
{$HOOK_CREATE_ACCOUNT_FORM}
<p class="submit">
<input type="submit" class="exclusive button" name="submitGuestAccount" id="submitGuestAccount" value="{l s='Save'}" />
</p>
<p style="display: none;" id="opc_account_saved">
{l s='Account information saved successfully'}
</p>
<p class="required opc-required" style="clear: both;">
</p>
Send order button (with smile):
<div class="cod_cofirm">
<form action="{$link->getModuleLink('cashondelivery', 'validation', [], true)|escape:'html'}" method="post">
<input type="hidden" name="confirm" value="1" />
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="{l s='Send order' mod='cashondelivery'}" class="extraorderbutton" />
</p>
</form>
</div>
Because prestashop have controllers may be need to show code from some controller?
I guess there is no valid answer without showing us code, I'll try it anyway:
$('NEW_Send_Order_btn').click(function(e){
e.preventDefault();
$('Save_btn').trigger('click');
if($('Save_btn').hasClass('well_done')){
$('Send_my_order').trigger('click');
}
});
I'm trying to essentially have the submit button of search.htm be able to create a pop up with a text area which the users are required to enter a comment describing their actions and click the submit button in the pop up to effectively submit both forms to the same processing page. Both the forms in search.htm and frm_comment.htm will submit both sets of data back to search.htm which calls cfinclude on the server processing logic (server.htm).
In the below code I'm having the the "createPeriod" button submit everything that is in the "srch" form. It is also creating a pop up window which has a html textarea that allows the user to enter a comment. There is a reason that I need to split up the main form from the comment form (frm_comment.htm) but it's very specific to the task I'm trying to accomplish.
search.htm is structured roughly as such:
//include the template here to process the forms
<cfinclude template="../server.htm">
<cfform method = "post" action = "search.htm" name="srch" format="html">
<table>
//bunch of form fields here
.
.
.
.
//bunch of form fields here
<cfinput type="submit" name="createPeriod" value="Create"
onClick="ColdFusion.Window.create('comment', 'CommentBox',
'frm_comment.htm', {center:true,modal:true})">
</table>
</cfform>
I've tried to change the submit button in search.htm to just a cfinput type="button" because keeping it as a submit will make it so that the comment box will appear for a brief moment while the page reloads and disappear as soon as the page reloads. However, I was unable to preserve the form data from search.htm when changing the submit button to a regular button.
I've also tried to have my comment form's submit button's onClick function call a javascript function to submit both forms (to no avail) like so:
submitForms = function(){
document.forms["srch"].submit();
document.forms["srch1"].submit();
}
<cfinput type="button" name="submitComment" value="Submit" onClick="submitForms()"/>
Please advise on the best way to accomplish this task, sorry about the messy code.
This a very basic example, on how to have your 2 forms in one. The JavaScript will just show the comment form when the user clicks on "Search".
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button" value="Search" onclick="document.getElementById('hiddenStuff').style.display='block';">
<div id="hiddenStuff">
// comment form stuff here
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
I also made a fiddle, if you want to see the result in action.
Sorry I'm not familiar with ColdFusion, but it shouldn't be too hard for you to translate :)
I have an asp.net page with a <input type="submit"> for a button and vb codebehind.
<input runat="server" id="review" clientidmode="Static"
type="submit" value="review" name="submit" />
What code do I add so that I get create a required log-in prompt pop-up box asking for a username and password. I also want to make sure that when the user types the password that the password field will not show the specific characters.
If you are using ASP.NET I think you may be after the <asp:Login /> component. Personally I prefer to avoid using ASP.NET components due to all the gratuitous HTML they generate and prefer to code all this manually but for a beginner it may be the quickest choice to get you setup.
See the first example in this page:
<form id="form1" runat="server">
<asp:Login id="Login1" runat="server"
UserNameLabelText="E-mail address:"
OnLoggingIn="OnLoggingIn"
OnLoginError="OnLoginError" >
</asp:Login>
</form>
Your code-behind text will look as follows:
Sub OnLoggingIn(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.LoginCancelEventArgs)
If Not IsValidUser(Login1.UserName, Login1.Password) Then
Login1.InstructionText = "Authentication Failed."
e.Cancel = True
Else
Login1.InstructionText = String.Empty
End If
End Sub
And on the main page you can create a popup box using window.open() as follows:
<a href="javascript:;"
onclick="window.open('myloginpage.aspx', 'login', 'width=600,height=400,scrollbars=no')"/>
Alternatively if you want to use an input button for this the code is the same but using INPUT instead of an A tag.
<input runat="server" id="review" clientidmode="Static"
type="button" value="review" name="submit"
OnClientClick="window.open('myloginpage.aspx', 'login', 'width=600,height=400,scrollbars=no')" />
Bear in mind most browsers nowadays include popup blockers that might make it difficult for your users to actually reach the login page.
I think that your design (collecting the login details on submit) creates several significant hurdles for you to overcome:
How do you cancel the login prompt if the user name and password fails?
How do you collect and pass the the entered user name and password back to the original page?
If the user forgets their credentials and needs to reset them or needs to register for the first time, how does the information get back to the submit flow correctly?
It might be much easier to protect entry to your site through a user name and password than to try and collect this information during the submit process.
Microsoft has an excellent walkthrough on the exact steps that you need to implement this process in this MSDN article: How to: Implement Simple Forms Authentication.
However, if this is not appropriate for your situation, then I would suggest something along the lines of this jQuery Login Dialog.