Open form results in new resized window - javascript

<script type="text/javascript">
function submitWindow() {
..
// URL, name and attributes
window.open('http://isivmwebtest.isolutionsinc.com/ComparativePricing/Content/PriceLookup.aspx','windowNew','width=300, height=300');
return true;
}
</script>
<div class="form-outer">
<div class="resource-form">
<h3>FREE National Price-Look Up Tool</h3>
<h4>Powered by ComparativeHospitalData.com</h4>
<form action="http://isivmwebtest.isolutionsinc.com/ComparativePricing/Gateway.aspx" method="post" onsubmit="return submitWindow()">
<input type="hidden" name="RemoteAction" value="PriceLookup" />
<strong>Enter HCPCS Code(s)</strong><br />
<input onfocus="this.value=''" type="text" name="codes" value="XXXXX or XXXXX,XXXXX or XXXXX-XXXXX" /><br /><br />
<strong>Enter HCPCS Description</strong><br />
<input onfocus="this.value=''" type="text" name="desc" value="partial name okay" /><br /><br />
<input type="submit" value="Search" />
</form>
<span style="font-size:0.8em;font-style:italic;padding-top:10px;">*Search will lead you away from this site.</span>
</div>
</div>
I want this form to display the results in a popup window that's pretty small. I have tired many methods without any success. Right now I am using some Javascript to get it to work, but it still doesn't seem to do anything. Any help?

There are other parameters you can pass in the specs parameter besides width and height. See here. http://www.w3schools.com/jsref/met_win_open.asp
You can remove the title bar, status bar, etc to make it smaller.
Try:
window.open('http://isivmwebtest.isolutionsinc.com/ComparativePricing/Content/PriceLookup.aspx','windowNew','width=300,height=300,location=no,menubar=no,status=no,toolbar=no');

This hidden field "RemoteAction" is required for popup to redirect the page to PriceLookup.aspx. That is the reason your popup is not showing the correct page.

Related

Will not return false, or display the alert for function combine() when true. Does someone see a mistake I don't?

// I apologize for giving the whole code, with omission of the urls, but my code will be returning false just fine, then the next time I try to add a new function, it will no longer return false, and upon removing the new function, it does not return to working again as it did before. I have tried onsubmit=return and onclick=return both.
The other issue is for function combine() in my code. It doesn't ever seem to work, and I have tried numerous different methods. I have tried just alerting with "Test", and the alert doesn't even work.
UPDATED: Now we have it returning false properly for invoices not matching, with alert. It also gives alert for Emails not matching, however it does not return false for emails not matching, and continues to the url. I am showing no errors in the console now. It also does correctly combine and alert to show the invoice and name together.
UPDATE: Now have it working completely. See my final comment below to see how I fixed this last issue. Hope this helps someone!
<!DOCTYPE html>
<!-- // working code except for combining the invoice with the name -->
<head>
<title>INFORMATION FORM</title>
</head>
<!-- // This code compares two fields in a form and submit it -->
<!-- // if they're the same, or not if they're different. -->
<body>
<script type="text/javascript">
function checkInvoice(theform) {
if (theform.invoice1.value != theform.invoice2.value)
{
alert("The INVOICE numbers do not match, please review for mistakes to assure your account gets credited.");
return false;
} else {checkEmail(theform);
}
}
function checkEmail(theform) {
if (theform.EMAIL_1.value != theform.Email.value)
{
alert("The EMAIL addresses you provided do not match. Please correct the EMAIL address and try again.");
return false;
} else {
<!-- // This code combines two fields into the CustRefID-->
function combine()
{
var y=document.getElementById("invoice2").value;
var x=document.getElementById("FName").value;
var InvoiceName = y+""+x;
document.getElementById("CustRefID").value = InvoiceName;
alert(document.getElementById("CustRefID").value);
}
combine(); <!--// this calls the combine function when the email addresses match-->
return true;
}
}
</script>
<form name=theform action= "https://hos###/Index" method ="POST" target="_blank" onsubmit="return checkInvoice(this);" >
<input type="hidden" name="HostedKey" id="HostedKey" value="####" />
<input type="hidden" name="Gateway_ID" id="Gateway_ID" value="#####" />
<input type="hidden" name="IndustryCode" id="IndustryCode" value="2" />
<!-- the next line blank value tells the hosted page to allow the customer to use credit cards as the only allowed payment type. -->
<!-- If you want to only allow more than credit cards, replace “CC” with “” for the value -->
<input type="hidden" name="PaymentType" id="PaymentType" value="CC" />
<!-- the next line allows the hosted page to capture some perhaps useful info to identify the payment. -->
<strong><span style="color: #ff0000;">INVOICE</span></strong> Number: <input type="text" name="invoice1" required id="invoice1" value="" size="40" maxlength="40" />
<br>
Please Confirm your <strong><span style="color: #ff0000;">INVOICE</span></strong> number: <input type="text" name="invoice2" required id="invoice2" value="" size="40" maxlength="40" />
<p>
Patient Full Name (as it appears on your paper bill): <input type="text" name="FName" id="FName" required value="" size="40" maxlength="40" />
<p>
PHONE (###-###-####): <input type="text" pattern="^\d{3}-\d{3}-\d{4}$" name="PhoneNumber" required id="PhoneNumber" value="" />
<p>
<input type="hidden" name="Amount" id="Amount" value="" />
<!-- the next line’s N value tells the hosted page to not display recurring payment fields -->
<input type="hidden" name="RecurringType" id="RecurringType" value="N" />
<input type="hidden" name="RecurringAmount" id="RecurringAmount" value="" />
<!-- the next line defines where users are directed after a successful purchase. It is suggested you create a simple Thankyou page for the site. -->
<input type="hidden" name="RURL" id="RURL" value="http://www.######.com/thankyou/" />
<!-- the next line defines where users are directed after they hit the Cancel button on the TXP Hosted page -->
<input type="hidden" name="CURL" id="CURL" value="http://www.########.com/cancelled/" />
<!-- If AVSRequired equals "Y", Address Line 1 and ZIP Code become required fields on the hosted page -->
<input type="hidden" name="AVSRequired" id="AVSRequired" value="Y"/>
<!-- If CVV2Required is set to "Y", than CVV2 becomes a required field on the hosted page -->
<input type="hidden" name="CVV2Required" id="CVV2Required" value="Y"/>
<!-- If EmailRequired is set to "Y", then Email becomes a required field on the hosted page -->
<input type="hidden" name="EmailRequired" id="EmailRequired" value="Y"/>
<!-- the next line defines enables/disables the ability to receive response data in an POST format. When set to N, no response data is returned to the RURL -->
<input type="hidden" name="PostRspMsg" id="PostRspMsg" value="N"/>
<!-- You can also use a graphic for the button to improve the appearance -->
<p> Enter Your Email Address:<br>
<input type="TEXT" name="EMAIL_1" value="" id=EMAIL_1 required size="40" maxlength="40">
<br>
Please Confirm Your Email Address:
<br>
<input type="TEXT" name="Email" required value= "" size="40" maxlength="40" />
<br>
<input type="hidden" name="CustRefID" id="CustRefID" value="" />
<!-- the next line defines what text is on the button. Replace Submit Payment Now with whatever you desire -->
<p>
<input type="SUBMIT" name="Button" id="Button" value="Make Payment Now" ></p>
</form>
</body>
</html>

How to change text in html with either JS, PHP or HTML on load?

I'm doing this sort of a dictionary which by now works but I have few more things to edit which I have problems with.
It is a simple page with basic editing. The only more complicated stuff is the search and functioning of the button which is done.
I have 4 different languages, Italian, French, German with Italian as default and English.
I also have a simple "Dizionario IBS" (Italian) welcome like thingy but I want that everytime I change languages (Language change is basically a filter, it switches the search result that comes up after you write inside the search bar) the "Dizionario IBS" switches text to more appropriate like if I were to click on "English" Button which filter search results to english the "Dizionario IBS" would become "IBS Dictionary".
I have tried to change it with JS, PHP and HTML, looked up codes and such here but none of them worked.
I'm very basic in programming so I barely know these languages, I'm sorry if I seem too inexperienced.
I also tried to change the type of the text I want changed, like I made it into a input type = text readonly and <h1>like this</h1> and tried to see if that would make things work.
Any suggestions?
<div id='header'>
<img id='img' src='logo.jpg'>
<div id='header-testo'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="English" />
<input type="hidden" name="linguaa" value="en" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Fran&#231ais" />
<input type="hidden" name="linguaa" value="fr" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Deutsch" />
<input type="hidden" name="linguaa" value="de" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Italiano" />
<input type="hidden" name="linguaa" value="it" />
</form>
</div>
</div>
<div id='body'>
<h1 id="titolo">Dizionario IBS</h1>
<br>
<br>
<br>
<br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus />
<input type="submit" id="searchBtn" value="Vai!" />
<input type="hidden" name="linguaa" />
</form>
</div>
The hidden input is the one that filters the search bar via language, dunno if it's relevant but just saying.
The whole thing works, but I want that every time I click and filter language, the "titolo" text changes to the said language as well.
JS code suggested by a user:
<div id='body'>
<h1 id="titolo"></h1>
<script>
var heading = document.getElementById('titolo');
function languagechange(id) {
if (id == '') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'english') {
heading.textContent = 'IBS Dictionary';
} else if (id == 'french') {
heading.textContent = 'IBS Dictionnaire';
} else if (id == 'italian') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'german') {
heading.textContent = 'IBS W\u00F6rterbuch';
}
}
</script>
<br>
<br> <br> <br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus /><input type="submit" id="searchBtn" value="Vai" />
<input type ="hidden" name="linguaa" />
</form>
</div>
I moved the JS below the title becuase If i remember correctly putting it above didn't show anything. Also the first "if" was to try to set italian as default to always show when loading the page, didn't work however.
There are few things that you need to amend which I have mentioned steps wise below:
1) Firstly, change all your input type from type="submit" to type="button" ONLY under the id='header' forms. Otherwise every time you click the button it submits the form. Or if you want the form to function then prevent it from submitting. As I do not see any need for the language buttons to have a form, I suggest to change the type to button
2) Many elements in your markup has the same id value. This is bad. id attribute should be unique to each element in a DOM.
3) Coming to your solution, add a onclick event to your button like so & pass the unique id of the clicked button using this.id.
<form action="" method="get">
<input type="button" id="english" name="lingua" value="English" onclick="languagechange(this.id);" />
<input type="hidden" name="linguaa" value="en" />
</form>
Then in your JavaScript declare the languagechange() function like so & compare the id passed earlier to determine the language & change the text accordingly
var heading = document.getElementById('titolo');
function languagechange(id) {
if(id == 'english') {
heading.textContent = "English text";
} else if(id == 'french') {
heading.textContent = "French text";
}
}
$(document).ready(function() { $("#titolo").val('Put anything you want');});
try with jquery
onload, this command will change the text in the element 'titolo' with whatever you want.
Maybe this will help you https://angular-translate.github.io/docs/#/guide
If u use angular translate your html will look like this
<div id='body'>
<h1 id="titolo">{{'IBS' | translate}}</h1>
And then u just set up a file for each language with the translation.
Italiano would be
# suppress inspection "UnusedProperty" for whole file
IBS=Dizionario IBS
English would be
# suppress inspection "UnusedProperty" for whole file
IBS= IBS Directory
Afterwards you just need to write a function which selects which file is used if you press the button
U really should take a look at the doc

Form post Send data to another page , verify and then post

I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?
Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';
EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.

how to get the value by javascript?

HTML:
I want to pass the value from the gsearch to the q parameter. The following is the ways I make but it couldn't work. How should I do it?
action="http://test.com/search.php?q=<script type="text/javascript">document.getElementById('gsearch').value;</script>">
updated:
in my site. i want to make a google custom search: so i put the following code in the homepage. 0156290304977:8texhu0mrk the google search value. gsearch.php page which i put the google custom search code in and show the searched result
<form method="get" action="http://test.com/gsearch.php?cx=0156290304977:8texhu0mrk&cof=FORID:11&ie=UTF-8&q=..." >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
now, i want to when the user input the searched text in the gsearch text box, if he click the submit button,. then on the gsearch.php page shows the searched result.
if you want to submit to this: http://test.com/search.php?q=theinput
just do this:
<form target="_top" method="get" action="http://www.cnn.com/search.php" >
<input type="text" title="" value="theinput" name="q" class="search-input" id="gsearch" />
<input type="submit" value="submit" id="search-button"/>
</form>
the entire idea behind the <form> element is that it is making sure that all of the inputs from the user will be sent to the action.
the form will take the input from the q and add it to the action automatically.
so in your simple case. no manipulation is required.
Test it here
http://jsfiddle.net/L4rHG/1/
this will be submitted to http://edition.cnn.com/search.php?q=theinput
Or you need over javascritpt
<script>
function SubmitForm(){
window.open("http://test.com/search.php?q="+document.getElementById('gsearch').value)
return false;
}
</script>
<form method="get" action="http://test.com/search.php" onSubmit="SubmitForm();false" >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
<form action="http://test.com/search.php?q=">
<script>
document.forms[0].action += 'new_action.html';
</script>

jQuery serialize function with multple forms

I'm using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.
Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.
I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.
If the sole purpose is to encode simple text into URL format then use encodeURIComponent().

Categories

Resources