JavaScript:
function CreateMsg() {
var MsgDOM = document.getElementById("MSG");
MsgDOM.innerHTML = "Hello, " + document.forms[0].FNAME.value + " " + document.forms[0].LNAME.value + ". You're sex is " + document.forms[0].GENDER.value;
}
HTML:
<FORM NAME="DUH">
<INPUT TYPE=TEXT NAME=FNAME>
<INPUT TYPE=TEXT NAME=LNAME>
<SELECT NAME="GENDER">
<OPTION VALUE="Male">Male</OPTION>
<OPTION VALUE="Female">Female</OPTION>
</SELECT>
<BR><BR>
<input type="button" value="Search" onclick="javascript:CreateMsg();"/>
<BR><BR>
<SPAN ID="MSG"> </SPAN>
</FORM>
Please update the JavaScript method like this -
function CreateMsg() {
var MsgDOM = document.getElementById("MSG");
var duhForm = document.forms[0];
MsgDOM.innerHTML = "Hello, " + duhForm.FNAME.value + " " + duhForm.LNAME.value + ". You're sex is " + duhForm.GENDER.value;
duhForm.target="_self"; // or _top or _parent or _blank
duhForm.action="PleaseAskTheQuestion.do";
duhForm.submit();
}
mu is too short has already submitted the form on the same page, but server is too busy; no donuts for you. :-)
Related
My goal is to print:
hi,
RED pill selected
-- if red pill was selected
my code here outputs:
Hi, undefined
RED pill selected.
I think the problem with my code lies within my form onsubmit , I am having trouble how do I put 2 functions on the onsubmit of form
here is my code:
<html>
<head>
<script>
function clickRed(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerHTML = "Hi, " + txtName + "!"
document.getElementById("msg2").innerHTML = "RED pill selected!"
return false;
}
function clickBlue(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerText = "Hi, " + txtName + "!"
document.getElementById("msg2").innerText = "BLUE pill selected."
return false;
}
</script>
</head>
<body>
<form name='loginForm' onSubmit="" method='POST'></form>
<div>
<label for='username'>Name</label>
</div>
<div>
<input type="text" name="txtName" id="idName">
</div>
<br/>
<input type="submit" onclick= "clickRed()" value="RED">
<span id="blueContainer">
<input type="submit" onclick= "clickBlue()" value="BLUE">
</span>
<br/>
<div>
<p id="msg"></p>
<p id="msg2"></p>
</div>
</form>
</body>
</html>
It's look like you are coming from reactjs,
Here is your mistake,
you used multiple form tag end
you should use onsubmit instance of onSubmit
you should make return false at form onsubmit event.
and using script at head it's also bad habit .
See the snippet code below.
function formSubmit(e){
return false;
}
function clickRed(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerHTML = "Hi, " + txtName.value + "!"
document.getElementById("msg2").innerHTML = "RED pill selected!"
return false;
}
function clickBlue(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerText = "Hi, " + txtName.value + "!"
document.getElementById("msg2").innerText = "BLUE pill selected."
return false;
}
<form name='loginForm' onsubmit="return formSubmit()" method='POST'>
<div>
<label for='username'>Name</label>
</div>
<div>
<input type="text" name="txtName" id="idName">
</div>
<br/>
<input type="submit" onclick= "clickRed()" value="RED">
<span id="blueContainer">
<input type="submit" onclick= "clickBlue()" value="BLUE">
</span>
<br/>
<div>
<p id="msg"></p>
<p id="msg2"></p>
</div>
</form>
You just need to change this:
var txtName = document.loginForm.txtName;
to this:
var txtName = document.loginForm.txtName.value;
and get rid of the errant closing <\form> tag at the end of this line:
<form name='loginForm' onSubmit="" method='POST'></form>
and implement preventDefault() as shown in the snippet which will stop the normal submit behavior.
<html>
<head>
<script>
function clickRed(event){
event.preventDefault();
var txtName = document.loginForm.txtName.value;
document.getElementById("msg").innerHTML = "Hi, " + txtName + "!"
document.getElementById("msg2").innerHTML = "RED pill selected!"
return false;
}
function clickBlue(event){
event.preventDefault();
var txtName = document.loginForm.txtName.value;
document.getElementById("msg").innerText = "Hi, " + txtName + "!"
document.getElementById("msg2").innerText = "BLUE pill selected."
return false;
}
</script>
</head>
<body>
<form name='loginForm' onSubmit="" method='POST'>
<div>
<label for='username'>Name</label>
</div>
<div>
<input type="text" name="txtName" id="idName">
</div>
<br/>
<input type="submit" onclick="clickRed(event)" value="RED">
<span id="blueContainer">
<input type="submit" onclick="clickBlue(event)" value="BLUE">
</span>
<br/>
<div>
<p id="msg"></p>
<p id="msg2"></p>
</div>
</form>
</body>
</html>
I am creating an HTML page which will accept user inputs and queries a database at the backend. To start off I am just trying to take user's output and display how the query will look like on the same page.
It has two radio buttons.
I am able to display the user selections, but right now its shows text for all buttons instead of the radio button selection. How can I restrict the display of text based only on the radio button which is selected? Here is my code -
<form id="data" method="post">
<input type="radio" id="Name" > Name
<input type = "text" id="value1"> <br>
<input type="radio" id="Last"> Lastname
<input type = "text" id="value2"> <br>
<input type="submit" onclick="return query()" value="Get Total">
<p style="font-size:80%;"> <span id='boldStuff1'> </span> <br> <span id='boldStuff2' > </span> </p>
</form>
<div id="display" style="height: 50px; width: 100%;"></div>
function query(){
var a = document.forms["data"]["value1"].value;
var b = document.forms["data"]["value2"].value;
var display=document.getElementById("display")
document.getElementById('boldStuff1').innerHTML= " SELECT * FROM table WHERE Name = " + a ;
document.getElementById('boldStuff2').innerHTML= " SELECT * FROM table WHERE Last = " + b ;
return false;
}
Here is how query looks like right now -
http://jsfiddle.net/mw6FB/104/
Thanks!
This will work,
function query(){
//var a = document.forms["data"]["value1"].value;
//var b = document.forms["data"]["value2"].value;
//var display=document.getElementById("display")
//document.getElementById('boldStuff1').innerHTML= " SELECT * FROM table WHERE Name = " + a ;
//document.getElementById('boldStuff2').innerHTML= " SELECT * FROM table WHERE Last = " + b ;
var nameDisplay = document.getElementById('boldStuff1');
var lastNameDisplay = document.getElementById('boldStuff2');
if(document.getElementById('Name').checked) {
var a = document.forms["data"]["value1"].value;
nameDisplay.innerHTML= " SELECT * FROM table WHERE Name = '" + a + "'";
lastNameDisplay.innerHTML= "";
} else if(document.getElementById('Last').checked) {
var b = document.forms["data"]["value2"].value;
lastNameDisplay.innerHTML= " SELECT * FROM table WHERE Last = '" + b + "'";
nameDisplay.innerHTML= "";
}
return false;
}
<form id="data" method="post">
<input type="radio" id="Name" name="radioQuery" checked > Name
<input type = "text" id="value1"> <br>
<input type="radio" id="Last" name="radioQuery"> Lastname
<input type = "text" id="value2"> <br>
<input type="submit" onclick="return query()" value="Get Total">
<p style="font-size:80%;"> <span id='boldStuff1'> </span> <br> <span id='boldStuff2' > </span> </p>
</form>
<div id="display" style="height: 50px; width: 100%;"></div>
You're not doing anything with the radio buttons. Find out which one is selected (if any), and only assign the innerHtml of the selected one. You may want to clear the other one as well. You can do this with a simple if().
See for example How to get value of selected radio button?.
Also, if you want to be able to actually submit this form and read its values, you'll want to name your input elements.
I have this set of html:
<div class="container-fluid">
<div class="panel panel-default ">
<div class="panel-body">
<form id="coupon_checkout" action="http://uat.all.com.my/checkout/couponcode" method="post">
<input type="hidden" name="transaction_id" value="4245">
<input type="hidden" name="lang" value="EN">
<input type="hidden" name="devicetype" value="">
<div class="input-group">
<input type="text" class="form-control" id="coupon_code" name="coupon" placeholder="Coupon Code">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Enter Code</button>
</span>
</div>
</form>
</div>
</div>
I want to get the transaction id value. How do i get it?
I have try using this code:
var value = wkWebView.evaluateJavaScript("document.getElementByName('transaction_id')", completionHandler: nil)
print("value:\(value)")
But the output is return nothing:
value:( )
Two things - you need an "s" in the getElementsByName code and it returns a collection of elements - you need to specify which - in this case there is only 1, but you still need to specify it and get the value of the element:
...document.getElementsByName('transaction_id')[0].value....
I think it's a typo, you should use getElementsByName instead of getElementByName.
Second thing:
Shouldn't it be "document.getElementsByName('transaction_id').value" rather than "document.getElementByName('transaction_id')"
You can also use it like if heaving issues:
webView.evaluateJavaScript("document.getElementsByName('someElement').value") { (result, error) in
if error != nil {
print(result)
}
}
I have just popped it into this snippet and provided the value in a jquery approach (since you are using Bootstrap - you must also be using jQuery) and the normal javascript method - both work so it must be something to do with the swift content. - also in your output - are you sure that the "\" is not escaping the "("? - should it be print("value:(value)") or escape both print("value:\(value\)") or alter the quotes print("value:"(value))
$(document).ready(function(){
var transaction_idValue1 = $('[name=transaction_id]').val();
console.log(transaction_idValue1);
var transaction_idValue2 = document.getElementsByName('transaction_id')[0].value;
console.log(transaction_idValue2);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="panel panel-default ">
<div class="panel-body">
<form id="coupon_checkout" action="http://uat.all.com.my/checkout/couponcode" method="post">
<input type="hidden" name="transaction_id" value="4245">
<input type="hidden" name="lang" value="EN">
<input type="hidden" name="devicetype" value="">
<div class="input-group">
<input type="text" class="form-control" id="coupon_code" name="coupon" placeholder="Coupon Code">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Enter Code</button>
</span>
</div>
</form>
</div>
</div>
Using SwiftSoup
let html = "<div class=\"container-fluid\">"
+ "<div class=\"panel panel-default \">"
+ "<div class=\"panel-body\">"
+ "<form id=\"coupon_checkout\" action=\"http://uat.all.com.my/checkout/couponcode\" method=\"post\">"
+ "<input type=\"hidden\" name=\"transaction_id\" value=\"4245\">"
+ "<input type=\"hidden\" name=\"lang\" value=\"EN\">"
+ "<input type=\"hidden\" name=\"devicetype\" value=\"\">"
+ "<div class=\"input-group\">"
+ "<input type=\"text\" class=\"form-control\" id=\"coupon_code\" name=\"coupon\" placeholder=\"Coupon Code\">"
+ "<span class=\"input-group-btn\">"
+ "<button class=\"btn btn-primary\" type=\"submit\">Enter Code</button>"
+ "</span>"
+ "</div>"
+ "</form>"
+ "</div>"
+ "</div>"
let document: Document = try SwiftSoup.parse(html);//parse html
let elements = try document.select("[name=transaction_id]")//query
let transaction_id = try elements.get(0)//select first element ,
let value = try transaction_id.val()//get value
print(value)//4245
I have used HTTPClient to connect to a website and I can successfully access required data from the website using jsoup.
I have the following code from which I need to extract the submit button info.
<form method="POST" action="test.jsp" >
<font size="2">
<input type="hidden" name="num" id="num" value=123 >
<input type="hidden" name="iec" id="iec" value=456 >
<input type="submit" onclick=" return check();" value="Print" name="B1">
</font>
</form>
How can I access the value and name of the submit button?
You can access those values using the attr(String attribute) method of Element. For example:
String html = "<form method=\"POST\" action=\"test.jsp\" >"
+ "<font size=\"2\">"
+ "<input type=\"hidden\" name=\"num\" id=\"num\" value=123 >"
+ "<input type=\"hidden\" name=\"iec\" id=\"iec\" value=456 > "
+ "<input type=\"submit\" onclick=\" return check();\" value=\"Print\" name=\"B1\">"
+ "</font>"
+ "</form>";
Document doc = Jsoup.parse(html);
Element bttn = doc.select("input[type=submit]").first();
String value = bttn.attr("value"); // will be Print
String name = bttn.attr("name"); // will be B1
This is in file: DrinkOrder.asp
<form action="DrinkResult.asp" method="post">
Drink:
<select name="drink">
<option>Coffee</option>
<option>Tea</option>
<option>Hot Chocolate</option>
</select>
<p/>
Sugar:
<input type="radio" name="sugar" value="1"> 1
<input type="radio" name="sugar" value="2"> 2
<input type="radio" name="sugar" value="3"> 3
<p/>
Milk: <input type="checkbox" name="milk">
<p/>
<input type="submit" value="Submit Order"><input type="reset" value="Reset">
</form>
This is in file: DrinkResult.asp
<%#language="Javascript"%>
<%
function milkOn(form){
var with = "";
if(form == "1") { with = "With milk"; }
else { with = "No milk"; }
return with;
}
%>
<%=("<table border=\"1\">")%>
<%=("<tr><th><i>Drink:</i></th>" + "<td> " + (Request.Form("drink")) + "</td>")%>
<%=("<tr><th><i>Sugar:</i></th>" + "<td> " + (Request.Form("sugar")) + "</td>")%>
<%=("<tr><th><i>Milk:</i></th>" + "<td>" + (milkOn(Request.Form("milk"))) + "</td>")%>
<%=("</table>")%>
After submitting form from DrinkOrder.asp to DrinkResult.asp, I received an error which clearly I don't know how to fix it.
After a few modification I made to detect the error location, I'm pretty sure it is located at milkOn(Request.Form("milk")) in file DrinkResult.asp because when I remove the statement, the result shows up.
What's wrong with my code here?
change
if(form == "1")
to
if(form == "on")
otherwise the code seems to test fine for me.