ASP.NET 4 Form inside a webform page - javascript

I am new to programming but attempting to learn. Im running visual studio 2010 with an asp.net webform project using C#. I am trying to implement paypals buy now buttons on one of the pages and the code that is generated is in form tags also. No matter which button it is, the first button on the page never works and there is a solid blue line underneath it. All the other buttons work fine. even if i remove it, the next button becomes the first on the page and then it too doesnt work....i am learning that since all the pages are forms and the code generated is also a form, i cannot have a form inside a form. Is this correct?
Is there any way around this...all i really know is a lil HTML and a lil CSS, i am trying to learn JavaScript, C#, XML, CSS, ASP.NET, as well as Visual Studio itself. Any help would be greatly appreciated. If anyone wants to see what im talking about go to www.curbappealfordummies.net/Packages.aspx That is the site im working on and webmaster of...Thank you guys for your help.

This is a wide-reaching question, but one possible answer is to generate a second form which has the needed PayPal code in it.
This is a simplified example; usually there is logic needed to lead up to this point. For example, if the buttons need to be contained within the ASP.Net default form, there will need to be server and/or client code to connect them to this second form and to make sure that it contains the correct hidden values.
In Your WebForm
<form id="form1" runat="server">
<!-- Contents of your server form -->
</form>
<%=base.GetMarkupOutsideDefaultForm() %>
In Your CodeBehind
public string GetMarkupOutsideDefaultForm()
{
//
// Return the markup needed for a PayPal form,
// including javascript needed to automatically submit it.
// AppSettings can be any configuration object that contains
// the needed URL (or you can hardcode it)
StringBuilder sb = new StringBuilder();
sb.Append( "<form action=\"" + AppSettings.PayPalUrl + "\" method=\"post\" id=\"frmPayPal\" target=\"_blank\">" );
// add hidden PayPal fields
sb.Append( "</form>" );
sb.Append( "<script type=\"text/javascript\">document.forms[\"frmPayPal\"].submit();</script>" );
return sb.ToString();
}
If the logic is complex, the second block of code should really be contained in a helper class.
Hope this puts someone on the right path.

Maybe you need to start with a tutorial designed to help you get enough of the basics under your belt so that you can make better sense out of the things you really want to do... check out the video at http://www.asp.net/general/videos/build-your-first-asp-net-application-with-asp-net-web-forms and there are lots of resources there too. It's not that hard if you are motivated to learn, which it sounds like you are.

I know what you mean. Try adding an extra
<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='paypal'></form>
At the top.
Example:
<form id="form1" runat="server">
<div>
<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='paypal'>
</form>
</div>
<div>
<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='paypal'>
<input type='hidden' name='add' value='1'>
<input type='hidden' name='cmd' value='_cart'>
<input type='hidden' name='business' value='<%# DataBinder.Eval(Container.DataItem, "business_email") %>'>
<input type='hidden' name='no_shipping' value='0'>
<input type='button' name='submit' value='Add To Cart' title='Add to Cart Button'>
</form>
</div>
</form>
Simple, but it works.
Or, if you don't like that idea, try this post:
"Add to cart" button and ASP .NET are not working together

Related

Saving a response with the submit button (html)

2 weeks ago I taught myself html, css and javascript in my spare time. I know the basics of all three of these languages. I just need a little help with the submit button and server side programming.
Here's my problem:
I made a website (html & css) that randomly generates two things to rate (for example, girls). Under these, there is a radio button for left or right. Then under that there is a submit button. When you enter left or right and hit submit, there is no rating algorithm, so it just goes to the next file (which repeats this). I want to know how to put in a rating algorithm to keep score (like elo or a rating/10). How should I approach this? I thought of a couple of ways, but I don't know if I can pull it off in JS or I'll have to learn php.
For JS, the only idea I have is maybe making and if/else if. For example:
If girl1 and girl2 are available and girl1 is chosen:
Run this algorithm.
Else if girl1 and girl2 are available and girl2 is chosen:
Run this algorithm.
If I do this, will the variables change and be saved when anybody uses the site, or are there limits?
I will also be using a web hosting service, I don't have my own server.
Thanks a ton!
This is the form that you would use for selection. Lets say a file named abc.php
Write a bit of html in abc.php
<form method="POST">
<input type="radio" name="person" value="1" />
<input type="radio" name="person" value="2" />
<input type="submit" name="submit" />
</form>
This is the server side scripting
And a bit of php in abc.php
<?php
if(isset($_POST['submit']))
{
$person = $_POST['person'];
echo $person;
}
?>
This $person has now the value either 1 or 2. Since you have gotten the value now you can use it. for instance
<?php
if(isset($_POST['submit']))
{
$person = $_POST['person'];
echo $person;
ratePerson($person);
}
function ratePerson($person)
{
//some logic of your algorithm
}
?>

Including imagegrabscreen php function to a button onclick without refreshing the page

I'm trying to create a button with an onclick function that activates the imggrabscreen php function. Problem is, I've done several codes and so far the only function that I was able to use was a submit input type in which this refreshes the page. I tried using button as an input type but unfortunately, it does not save any screenshots upon clicking the button. Here's the code that I'm using so far.
if(isset($_POST['btnscreen']))
{
$im = imagegrabscreen();
imagepng($im, "screenshot.png");
}
ob_end_flush();
?>
<form method="post" action="" enctype="multipart/form-data">
<br>
<input type="submit" value="Click to Screenshot" id="btnscreen" name="btnscreen"></center>
<br><br>
</form>
php is parsed and executed server side (pre-processing) so you cannot call any php functions after the page has been sent to the browser. The only way to do this is to make a new request to the server (ajax).
I can't quite grasp what your function does (php cannot make a screenshot of what your browser is displaying as it has no information of how it has been rendered - please note different browsers may display the page differently).
I would try reading up on html5 canvas element which can achieve that (e.g. https://html2canvas.hertzen.com/).
Hope this helps

Javascript function inside ui:repeat to show/hide contact formular not working

I have a facelet that shall dynamically list teachers loaded from database with name, profile picture etc. etc. Every listed teacher has its own contact formular, which gets hidden after pageload, and a button "get in touch" which, onclick, shall open the contact formular below and hide the button "get in touch". The formular has some text fields and a submit button "send request". After clicking "send request" I want to call a backing bean method which saves the request in the database, and, with javascript, hides again the contact formular and shows the "get in touch" button instead.
Here is the page listing the teachers:
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<script type="text/javascript">
$(document).ready(function () {
$(".request_form").hide();
});
</script>
<ui:repeat id="teachers" var="teacher" value="#{teachersController.teachers}" varStatus="it">
profile picture, infos, etc.
<p:button id="btn_open_request_form"
value="get in touch"
onclick="$('#teachers:#{it.index}:request_form').show(300); $(this).hide(); return false;"/>
<h:form class="request_form" id="request_form" prependId="false">
Text inputs for email, message...
<p:button value="#{msg['cancel']}"
onclick="$('#teachers:#{it.index}:request_form').hide(300); $('#teachers:#{it.index}:btn_open_request_form').show(); return false;"/>
<p:commandButton value="send request"
process="#form"
update="#form"
action="#{teachersController.sendRequest(teacher.id)}"
oncomplete="$('#teachers:#{it.index}:request_form').hide(300); $('#btn_open_request_form_#{it.index}').show();"
/>
</h:form>
<h:messages></h:messages>
<br/>
</ui:repeat>
</ui:define>
</ui:composition>
In a first attempt I was using c:forEach instead of ui:repeat to iterate over the teachers. The showing/hiding of the contact formular and buttons with jQuery was working perfectly, but the action method of p:commandButton could not be called and no request was sent, so I switched to ui:repeat.
Now, the requests are saved to the database, but the hiding/showing with Javascript doesn't work anymore. The formulars get hidden by pageload as expected. But then, when clicking on "get in touch", the button itself gets hidden, as I want, but no formular is shown.
It took me a while to figure out how jsf generates all the id's but I got it right in the end by checking the generated html. Here is the generated html of the button:
<button id="teachers:1:btn_open_request_form"
name="teachers:1:btn_open_request_form"
type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
onclick="$('#teachers:1:request_form').show(300); $(this).hide(); return false;;window.open('/lehrerverzeichnis/faces/requests/teachers.xhtml','_self')">
here the one of the form:
<form id="teachers:1:request_form"
name="teachers:1:request_form"
method="post"
class="request_form" ...>
What am I getting wrong? Before, when using c:forEach, it worked well (with different id's of course). But the selector in jQuery function matches the form id, why isn't it shown after clicking the button? The button itself gets hidden by the command afterwards, so the onclick function gets called for sure.
It seems to me that combining Javascript and JSF is not a good idea. What else could I do instead?
Thank you very much in advance..
SOLVED It was just a stupid mistake. The semicolon in the jQuery Selector needs to be escaped. In the created html source, $('#some:id') would need to be $('#some\:id'). To have two backslashes remaining they must be escaped as well in the facelet. So in the .xhtml file there must be written $('#some\\\:id'), so 4 backslashes before the colon are necessary that 2 survive in the created html.
Thats why I prefer Java, it would at least have told me where the problem is.. :D

How to pass variables from javascript to form?

In my application I get json with place details from google maps API using autocomplete
var place = autocomplete.getPlace();
I can get a name of the place with place.name
On the same page I have a form where I get another details from user. The question is how do I pass the place.name to my rails controller when the form gets submitted? In js I tried to change HTML of the form
<form...>
<div id="hidden_fields"></div>
</form>
using
$("#hidden_fields").append("<input name='name' type='hidden' value='"+place.name+"' />");
But apparently it doesn't works.
Should I learn AJAX to do such things or there another ways?
Thanks in advance for any hint.
Please ensure you are creating the hidden fields after the autocomplete finished. check the viewsource if the hidden variables has appended before submitting. As long as the control available with in the form tag before submit, your controller able to get it.
Thank you all! The problem has been solved. The important things I learned were
View/Source doesn't show dynamically added content, but Firebug does.
Rails modify forms field names: It turns
<%=form_for #place do |f| ...
<%= f.password_field :password , :class =>"form-field", :id =>"passwordField"
into
<input class="form-field" id="passwordField" name="place[password]" type="password" />
which means that I have to pass values from js in the same manner:
$text.append('<input name="place[name]" type="hidden" value="'+place.name+'"/>');
Hope it will help to someone else.

jsp in javascript

I've created a jsp page. In that when i select 1 check-box or both check-box or none, the corresponding text-boxes and list-box must be displayed in the same page.
For that i tried of calling a javascipt function when i click the checkbox. The javascript function contain code to display the textboxes. But it didn't work.
Since I'm doing this project in struts, I don't know how to get check-box value. And calling of JavaScript function works. But didn't enter into jsp code in JavaScript function.
My code is
<tr>
<td>SEJ:</td>
<td>SEJ 1:<html:checkbox property="sej1" value="on" onclick="checkbox_trial()"></html:checkbox></td>
<td>SEJ 2:<html:checkbox property="sej2" value="on" onclick="checkbox_trial()"></html:checkbox></td>
</tr>
<script type="text/javascript">
function checkbox_trial()
{
<% if(request.getParameter("sej1")=="on"){
%>
<tr><td>SEJ1 Age<html:text property="sej1_age"></html:text></td></tr>
<tr><td>SEJ1 DOI<html:text property="sej1_doi"></html:text></td></tr>
<%}
else if(request.getParameter("sej2")=="on"){%>
<tr><td>SEJ2 Age<html:text property="sej2_age"></html:text></td></tr>
<tr><td>SEJ2 DOI<html:text property="sej2_doi"></html:text></td></tr>
<%}
else if((request.getParameter("sej1")=="on")&&(request.getParameter("sej2")=="on")){%>
<tr><td>SEJ1 Age<html:text property="sej1_age"></html:text></td></tr>
<tr><td>SEJ1 DOI<html:text property="sej1_doi"></html:text></td></tr>
<tr><td>SEJ2 Age<html:text property="sej2_age"></html:text></td></tr>
<tr><td>SEJ2 DOI<html:text property="sej2_doi"></html:text></td></tr>
<%}
else{%>
NOTHING <% } %>
}
This is how it works: Java/JSP runs at webserver, produces HTML/CSS/JS, webserver sends it to webbrowser, webbrowser runs HTML/CSS/JS. Not Java/JSP. Rightclick the page in webbrowser and choose View Source. If Java/JSP has done its job right, you shouldn't see any line of it in there.
If you want to invoke Java/JSP code using JavaScript, you've got to invoke another HTTP request to the webserver so that it can execute the Java/JSP code based on the specific request. You can do that by either submitting the form or firing an asynchronous (ajaxical) request.
Given the skills shown as far and the fact that you're using Struts, I think ajax is going to be a bit too complex. I'd suggest to just submit the form on click of the checkbox
<input type="checkbox" name="show" value="true" onclick="submit()" />
and then let JSP conditionally display the input fields (just a JSTL example since I don't do Struts)
<c:if test="${param.show == 'true'}">
<input type="text" />
<select />
</c:if>
Update: you've by the way another major problem in the code. You can't compare string values by == in Java code (you can do so in EL only). In Java code you need to use equals() method. Otherwise they will be compared by reference instead of by value. I'd suggest to learn basic Java as well.

Categories