I'm building a web system using HTML and JavaScript, and I need to show in my site some users' info which can be accessed only by logging in to a third-party system.
Here is what their login form looks like:
<form method="post" enctype="application/x-www-form-urlencoded" name="loginForm" id="loginForm" action="Welcome">
<input type="hidden" name="redirpage" value="">
<input type="hidden" name="redirparam" id="redirparam" value="">
<input type="hidden" name="flogontext" value="User logon">
<input type="hidden" name="fpwdtext" value="PIN code">
<input type="hidden" name="flogonEnc" id="flogonEnc" value="">
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="login_field_user_box">
<div class="logon_field_lbl" id="lblUserLogon" onclick="field_focus(flogon)">User logon</div>
<input class="login_field_input" type="text" name="flogon" id="flogon" maxlength="254" size="24" value="">
</div>
</div>
</div>
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="logon_field_lbl_pwd" id="lblPassword" onclick="field_focus(fpwd)">PIN code</div>
<input class="login_field_password_input" type="password" name="fpwd" id="fpwd" maxlength="4" value="">
</div>
</div>
<div class="login_form_element"><input id="btnloginsubmit" class="rounded_login_btn" type="submit" value="Login"></div>
I know that I will have problems with cross-origin request, so I intend to use https://cors-anywhere.herokuapp.com/ as a proxy.
Yes, I have a working login to enter on their website, but the problem is that I've tried many things to do this in the background, and I couldn't login anyway.
I tried using postman to test requests, but it didn't work either.
Just in case their website is here.
Probably you will need to write your own cors proxy-server (e.g. in php - it is not difficult) because https://cors-anywhere.herokuapp.com/ will be not not enough. However try this (I copy <form> from your login site, and change <form> action to send similar request like source site - but I don't have any login/PIN to test this)
<div class="login_inner_container">
<h2>Please sign in</h2>
<form method="post" enctype="application/x-www-form-urlencoded" name="loginForm" id="loginForm" action="https://cors-anywhere.herokuapp.com/https://secure.ditprint.ie/safecom/webuser.dll/Welcome">
<input type="hidden" name="redirpage" value=""><input type="hidden" name="redirparam" id="redirparam" value=""><input type="hidden" name="flogontext" value="User logon"><input type="hidden" name="fpwdtext" value="PIN code"><input type="hidden" name="flogonEnc" id="flogonEnc" value="">
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="login_field_user_box">
<div class="logon_field_lbl" id="lblUserLogon" onclick="field_focus(flogon)">User logon</div>
<input class="login_field_input" type="text" name="flogon" id="flogon" maxlength="254" size="24" value="">
</div>
</div>
</div>
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="logon_field_lbl_pwd" id="lblPassword" onclick="field_focus(fpwd)">PIN code</div>
<input class="login_field_password_input" type="password" name="fpwd" id="fpwd" maxlength="4" value="">
</div>
</div>
<div class="login_form_element"><input id="btnloginsubmit" class="rounded_login_btn" type="submit" value="Login"></div>
</form>
<div id="sysloginmsg" class="login_message_error_hidden"></div>
</div>
Related
When below input form is focused, I would like to execute a jQuery function:
var hasFocus = $("input#edit-search-block-form--2").is(':focus');
if (hasFocus) {
alert('It is working!');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
But I just don't get it to work. Would be glad for every advice.
You need to attach an event handler that keeps checking the focus event on that input element. Your current code executes only once, and at the time of execution the element does seemingly not have focus.
$(document).ready(function() {
$("input#edit-search-block-form--2").on('focus', function() {
alert('It is working!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
Please check the updated code below.
Run the focused function onfocus of the element.
I am then focusing on the submit button, otherwise everytime you close the alert, the focus will be placed on the input box again, and it will go into an infinite loop.
function focused(){
alert('It is working!');
$('#edit-submit').focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" onfocus="focused()" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
I just want to ask that how do I add current URL in an input of form, so I can save it where I want to save.
I have tried simple Javascript, succeed but amp page become invalid.
My code is as follows
<form method="GET" class="p2" action="SUBMIT URL" target="_top">
<input type="hidden" value="" name="redirect" />
<div class="block-width2">
<div class="col-md-6"><p><input name="name" placeholder="Full Name *" type="text" required /></p></div>
<div class="col-md-6">
<p data-aos="fade-left" class="aos-init aos-animate"><input name="Email" placeholder="E-mail ID *" type="email" required /></p>
</div>
</div>
<div class="block-width2">
<div class="col-md-5"><p><input name="Mobile" placeholder="Contact No.*" type="text" required /></p></div>
<div class="col-md-7"><p><input name="city" placeholder="City*" required type="text"></p></div>
</div>
<div class="block-width2">
<div class="col-md-12"><p><input name="comments" placeholder="Comments*" required type="text" /></p></div>
</div>
<input type="hidden" name="vendor" value="VMware" />
<input type="hidden" name="course" value="VMware Training" />
<input type="hidden" name="url" id="url" value="" /> //Here I want page URL.
<div class="block-width2">
<div class="col-md-12"><p><button class="button-set" type="submit">Submit Now </button></p></div>
</div>
</form>
<script>document.getElementById("url").value = location.href;</script> // working with invalid AMP
First, the reason why I have three forms on one page is for layout purposes. I have three input boxes going across one line and then another under it and so on. If I place them under one form tag, I get bad looking input boxes that goes from top to bottom. I have tried some solutions but they have not worked. Each line would put 3 three entries instead of one and some data would not show up or only one form would show up in the database.
HTML
<form class="form-inline" id="Test1" method="POST">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label> </div> </form>
<div class="form-group"><br>
<div class="col-sm-offset-2"> <button type="button" class="SB btn btn-default">Book Now</button> </div>
<script>
$(document).on('click','.SB',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.php', formData
);
});
I only get the first form with this and the other two are blank but are on a single line. All inputs are unique. I have also tried the docbyid and it would add three lines but not work correctly. Any Help would be great.
PHP:
require('DBCon.php');
$statement = $link->prepare("INSERT INTO Database (FN, LN, EM) VALUES( :CFN, :CLN, :CE)");
$ClientFN = $_POST['FN'];
$ClientLN = $_POST['LN'];
$ClientEmail = $_POST['EM'];
$statement->execute(array(
":CFN" => "$ClientFN",
":CLN" => "$ClientLN",
":CE" => "$ClientEmail"));
$statement = null;
$link = null;
// Echo Successful attempt
echo "<p Data added to database.</p></br></br>";
?>
Your button should call a function rather than submit the form. Submitting will only send the data from the first form.
You should really use one form and use CSS to correct any display issues, but if you were to use separate forms, the following should do what you are looking for (make sure your closing tags are in the correct place):
<form class="form-inline" id="Test1">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="button" class="sumbitButton btn btn-default">Book Now</button>
</div>
<script>
$(document).on('click','.sumbitButton',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.PHP', formData
);
});
</script>
Try this:
<form method="post" action="Process.PHP">
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="submit" class="sumbitButton btn btn-default">Book Now</button>
</div>
</form>
I have this situation:
2 files (contact.html and booking.php)
On my contact.html I have the following code:
<form action="booking.php" method="POST" role="form" class="formular">
<h3>Online booking!</h3>
<br />
<div class="control-group">
<div class="controls">
<div class="input-group">
<input type="text" id="dateFrom" name="dateFrom" class="form-control" placeholder="Check in" style="width: 258px;"/>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-group">
<input type="text" id="dateToInput" name="dateToInput" class="form-control" placeholder="Check out" style="width: 258px;"/>
</div>
</div>
</div>
</form>
On my booking.php file I have the following code:
<form>
<div class="booking">
<form name="" action=" " method="post">
<h1>BOOKING</h1>
<div class="bookingDate">
<p>Check in:</p>
<div id="dateFrom">
</div>
</div>
</div>
<div class="bookingDate">
<p>Check out:</p>
<div id="dateTo">
</div>
</div>
<input type="hidden" name="dateFrom" id="dateFromInput" value= $_POST["dateFrom"] />
<input type="hidden" name="dateTo" id="dateToInput" value=$_POST["dateTo"]/>
</form>
So, I have two calendars on my contact.html page and two calendars on booking.php.
I want that when I choose 2 dates (on my contact.html) form, those exact dates to be passed to the other two calendars that I have on booking.php
Could anyone please help me? I have searched a lot and I can't find an answer.
Modify the code to following in value section. Similary for other field as well.
<input type="hidden" name="dateFrom" id="dateFromInput" value= "<?php echo $_POST["dateFrom"] ?>" />
Contact has name="dateToInput" yet booking is looking for dateTo
Fix one: correct the name of the input in contact
<input type="text" id="dateToInput" name="dateTo" class="form-
Fix two: You have no PHP tags in your booking code, without them $_POST is not available, nor are those values being printed.
<input type="hidden" name="dateFrom"
id="dateFromInput" value="<?php echo $_POST["dateFrom"];?>">
<input type="hidden" name="dateTo"
id="dateToInput" value="<?php echo $_POST["dateTo"]; ">
Note I also wrapped the values with quotes
I am trying to update and upload image to folder using php fileupload also some contents in the text area and text field. Here is my code,problem is I am not getting any result from the database. Please help.
$id=(isset($_GET['id']))?$_GET['id']:'';
$val=view_data_event($id);
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=$_POST["id"];
$title=$_POST["events"];
$description=$_POST["description"];
$filetmp=$_FILES["images"]["tmp_name"];
$filename=$_FILES["images"]["name"];
$filetype=$_FILES["images"]["type"];
$filepath= "photo2/".$filename;
move_uploaded_file( $filetmp,$filepath);
$data=array( $title,$description,$filename,$filepath,$id);
$update1=update_event($data);
if($update1)
{
echo "<script>location.href='hotel2_galery_event.php'</script>";
}
}
HTML
<form action="hotel2_galery_eventedit.php" method="post" class="col-sm-4">
<input type="hidden" name="id" value="">
<div class="form-group has-info">
<label class="control-label" for="inputSuccess">Event title</label>
<input type="text" class="form-control" name="events" value="">
</div>
<div class="form-group has-info">
<label>Event Description</label>
<textarea name="description" class="form-control " rows="3">
</textarea><br><br>
</div>
<div class="form-group has-info">
<label>Event Related images</label>
<input type="file" name="images">
<input type="hidden" value="">
<input type="hidden" value="">
</div>
<button type="submit" class="btn btn-primary">
<span>UPDATE</span>
</button>
</form>
Whenever you want to upload files, you must put a enctype="multipart/form-data" attribute on the form tag. Standard POST encoding cannot handle files.