I'm trying to print a output of my Mysql records. What I need to print is based on the value of search input. How I can open it in new window using onclick function? Any help will appreciate.
Index.php
<input type="text" name="search" id="search"/>
<input type="submit" name="print" value="print" onclick="openWin(); return false;"/>
<script>
function openWin()
{
window.open("../print.php","name","width=900, height=1200,toolbar=no,scrollbars=yes, resizable=yes");
}
</script>
Print.php
if (isset($_POST['print'])) {
$search = $_POST['search'];
}
You can put the input in a form and open the popup on submit of form.
http://jsfiddle.net/wvkjfee2/3/
<form id="formID" action="../print.php" method="post">
<input type="text" name="search" id="search"/>
<input type="submit" name="print" value="print"/>
</form>
<script>
var myForm = document.getElementById('formID');
myForm.onsubmit = function() {
var w = window.open('../print.php','Popup_Window','width=900, height=1200,toolbar=no,scrollbars=yes, resizable=yes');
this.target = 'Popup_Window';
return false;
};
</script>
Related
Hi all I have written following code:
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/>
<button>Continue</button>
</form>
<script>
function validate(){
var company_Name = document.getElementById('FormField_6_input').value;
var companyRGEX = /[2-9]{1}\d{3}/;
var result = !companyRGEX.test(company_Name);
alert(result)
}
</script>
I want to disable the button if the input does not match the regular expression, and enable it if it matches. How can I achieve to that result?
If you want to use JavaScript to dynamically disable the button, use the following:
The input eventListener to listen for changes in the field value;
The .disabled property to toggle it.
How I implemented on your solution:
Created two variables to hold references to the field and to the button.
Added validate as the function for an input eventListener (attached to the field).
Compared the field.value to the companyRGEX using string.match(regEx).
You can run the snippet below.
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);
function validate(){
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]{1}\d{3}/;
if(!companyNameValue.match(companyRGEX)) {
button.disabled = true;
} else {
button.disabled = false;
}
}
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/>
<button id="ContinueButton_6">Continue</button>
</form>
Just use pattern with required. No JavaScript is needed
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" pattern="[2-9]{1}\d{3}" required>
<button>Continue</button>
</form>
If you want to use JavaScript than cancel the submission
function validateIt (evt) {
var company_Name = document.getElementById('FormField_6_input').value;
var companyRGEX = /[2-9]{1}\d{3}/;
var isValid = !!companyRGEX.test(company_Name);
if (!isValid) {
evt.preventDefault();
alert('error');
}
}
console.log(document.querySelector("form"))
document.querySelector("form").addEventListener("submit", validateIt);
<form action="">
<input type=" text " id="FormField_6_input" maxlength="20" name="CompanyName" />
<button>Continue</button>
</form>
add addEventListener to the input field the return a value from validate function
document.getElementById('FormField_6_input').addEventListener('input', function(evt) {
document.getElementById('submit').disabled = validate(this.value)
});
function validate(company_Name) {
var companyRGEX = /[2-9]{1}\d{3}/;
var result = !companyRGEX.test(company_Name);
return result;
}
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" />
<button id="submit">Continue</button>
</form>
Acceptance Criteria: Enter a name and have the person's extension returned to the UI onClick or when pressing "return".
I am looking for suggestions on how to get this to work.
UI
<html>
<head>
<title>SearchFunction</title>
</head>
<body>
<script type="text/javascript">
var extensionList = {
Abby: '8845',
David: '8871',
Jim: '8890',
Lewis: '8804',
};
var returnLookUp = function(){
var getInfo = document.getElementById("thisSearch");
var SearchInfo = thisSearch.value;
/*......?*/
}
</script>
<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick = "returnLookUp();">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>
</body>
</html>
There is no explicit button type is defined. So by default it will be button type ="submit". in that case it will try to submit the form. button type="button" can be use or to prevent the default behaviour, preventDefault() can be used
extensionList[thisSearch.value] is use to get the value of the key from the object, extensionList is the object, thisSearch.value will be the input which is same as the key of the object
var extensionList = {
Abby: '8845',
David: '8871',
Jim: '8890',
Lewis: '8804',
};
var returnLookUp = function(e) {
e.preventDefault();
var getInfo = document.getElementById("thisSearch");
document.getElementById("output").value = extensionList[thisSearch.value];
}
<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick="returnLookUp(event);">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>
My Javascript is not redirecting. Here is what I tried:
<html>
<head>
<title>Hello world</title>
</head>
<body>
<form method="POST">
Search: <input id="searchterm" type="text" name="searchterm">
<input type="submit" value="Submit" onclick="processFormData()">
</form>
<script>
function processFormData()
{
var term = document.getElementById("searchterm").value;
window.location = window.location.href + term;
}
</script>
</body>
</html>
I want user to be redirected to a specified url no matter of the url in browser. This should be universal on different machines. I am new to JS, please advise.
First, move the onclick event handler declaration to the <form> tag. Next, change it into an onsubmit event handler declaration. Finally add a return in front of it (to prevent default event handling, i.e. actually submitting the form):
<form method="POST" onsubmit="return processFormData();">
Search: <input id="searchterm" type="text" name="searchterm" />
<input type="submit" value="Submit" />
</form>
Then also add a return false; at the end of processFormData:
function processFormData()
{
var term = document.getElementById("searchterm").value;
window.location = window.location.href + term;
return false;
}
Fiddle here: http://jsfiddle.net/xwcvq7bf/
Use location.host. Try this:
function processFormData()
{
var term = document.getElementById("searchterm").value;
window.location = "http://"+location.host+"/"+term;
return false;
}
And,
<form method="POST">
Search: <input id="searchterm" type="text" name="searchterm">
<input type="submit" value="Submit" onclick="return processFormData()">
</form>
So, now your url will be like this: http://www.example.com/searchTerm
You can specify the url itself,
window.location = "url"+term;
If you wanna get only the hostname(http://www.example.com),
window.location = location.hostname +"/"+term;
or If you wanna get the href(http://www.example.com/home/about.htm),
window.location = location.href +"/"+term;
I have following Javascript validation function that should check that the URL posted to my php are OK - if not display a message to correct the entry.
I must have done a mistake somewhere because it is not working and my console.log says: ReferenceError: Can't find variable: $
validateFormbasic.html:12
onsubmitbasic.html:24:95
Could you tell me how to fix it please? Thanks a lot!
<form method="POST" name="inputLinks" onsubmit="return validateForm();">
<input type="text" name="web1" id="url1" placeholder="domain.com">
<input type="text" name="web2" id="url2" placeholder="domain.com">
<input type="text" name="web3" id="url3" placeholder="domain.com">
<input type="submit" name="Submit" value="Done" />
</form>
<script type="text/javascript">
function validateURL(web1, web2, web3) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}
function validateForm()
{
// Validate URL
var url = $("#url1", "#url2", "#url3").val();
if (validateURL(url)) { } else {
alert("Please enter a valid URL, remember including http://");
}
return false;
}
</script>
As Alberto's comment mentions, it looks like jQuery isn't loaded at the point of calling the function. It also looks to me as if you're syntax for selecting the URL values isn't quite right.
I would use something along the lines of:
<form method="POST" name="inputLinks">
<input type="text" name="web1" id="url1" class="url" placeholder="domain.com" />
<input type="text" name="web2" id="url2" class="url" placeholder="domain.com" />
<input type="text" name="web3" id="url3" class="url" placeholder="domain.com" />
<input type="submit" name="Submit" value="Done" />
</form>
<script type="text/javascript">
$(function(){
function validateURL(url) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}
$('form').submit(function(e){
var isValid = true;
$('.url').each(function(){
isValid = validateURL($(this).val());
return isValid;
});
if (!isValid){
e.preventDefault();
alert("Please enter a valid URL, remember including http://");
}
});
});
</script>
Update
Demo JS Fiddle
Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??
<form method="POST" action="" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
onclick="loadXMLDoc('file.xml'); return false;"
or even better:
<script>
window.onload = function() {
document.getElementById("search-form").onsubmit = function() {
loadXMLDoc('file.xml');
return false;
};
};
</script>
To implement loadXMLDoc, you can use the ajax module in jQuery. for example:
function loadXMLDoc() {
$("div").load("file.xml");
}
Final code using jQuery:
<script>
$(function() {
$("#search-form").submit(function() {
$("div").load("file.xml");
return false;
});
});
</script>
I think you need ajax function to load data with in div without page reload
Change input type submit to button
<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />
Ajax CAll:
<script type="text/javascript">
function AjaxSend(){
$.get('file.xml', function(data) {
$('div').html(data);
});
}
</script>
use prevent defaults to avoid form action.please refer the code below it might help you
function createRecord(){
event.preventDefault();
}
<form>
<input type="text"/>
<input type="submit" onclick="createRecord()"/>
</form>
just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form.
Try like this:
<form method="POST" onsubmit="return false" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>