Parse Domain in Text Input, replace from given list - javascript

I have a form hosted at following link:
http://laughtertab.com/url
The code for the form is as below:
What I need is when a person enters a URL from the website, It should replace the given domain from the input and replace with the chosen one from the list. I am new to coding and all I understood so far is I need to parse the URL into domain and path, but I can't make syntax on how to get it done, I will appreciate if I can get help on making it.
<html>
<head>
<title> Laughter Tab - UTM and OGP Propagated URL Builder </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body face='verdana'>
<br><br><br><br>
<center>
<div id="entries">
<form name ="myform">
<div class="table-responsive">
<table style="table">
<tr>
<td>
<right>
Enter original URL without domain -
</right>
</td>
<td>
<input type="text" name="origin"/>
</td>
</tr>
<tr>
<td>
<right>
Select OGP propagated domain -
</right>
</td>
<td>
<input type="radio" name="ogpd" value="http://www.laughters.xyz/"> laughtertab.com<br>
<input type="radio" name="ogpd" value="http://www.laughters.xyz/"> laughters.xyz<br>
<input type="radio" name="ogpd" value="http://www.lolrising.rocks/"> lolrising.rocks<br>
<input type="radio" name="ogpd" value="http://www.funspoted.net/"> funspoted.net<br>
<input type="radio" name="ogpd" value="http://www.grumpy-kitten.com/"> grumpy-kitten.com<br>
</td>
</tr>
<tr>
<td>
<right>
Enter your GA Campaign name -
</right>
</td>
<td>
<input type="text" name="campaign"/><br>
</td>
<tr>
<td>
</td>
<td><br>
<right>
<input type="button" value="Generate" onClick="collect(this.form)"/>
</right>
</td>
</tr>
</table>
</div>
</form>
<br><br>
Go Back to Laughter Tab Home Page
</div>
<div id="results"> </div>
<script type="text/javascript">
function collect(frm)
{
document.getElementById("results").innerHTML+=""+frm.ogpd.value+""+frm.origin.value+"?utm_source=PNP&utm_medium=P1K&utm_campaign="+frm.campaign.value+"<hr>"
frm.reset();
}
</script>
<center>
</body>
</html>

If I'm understanding correctly. You basically want to look for a domain name if it's in the input
frm.origin
and remove it from the value.
If that's the case then you can match a regex pattern, a generic example is:
/(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i
Or you can google your own URL regex if you prefer
but anyways you just apply that to your value and replace it with "" (nothing)
frm.origin.value.replace(/(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i, "");
Which gives you
function collect(frm)
{
document.getElementById("results").innerHTML+=""+frm.ogpd.value+""+frm.origin.value.replace(/^(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i, "")+"?utm_source=PNP&utm_medium=P1K&utm_campaign="+frm.campaign.value+"<hr>"
frm.reset();
}
It's not a perfect solution but it should be a good starting point.

Related

Simple solution to use html form as input for python script

I have looked everywhere and I didn't found really good answer.
I am generating local html page with python and I want to read data from form over there, use this as input for python script and display return from there properly.
f = open('testapi.html','w')
message = """
<html>
<head>
<title></title>
<link rel="stylesheet" href="Bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-3">
<p>Search for best deals</p>
<form name="deals" action="">
<table>
<thead></thead>
<tbody>
<tr> <th>Title </th> <th><input type="text" id="Title" value=""><br></th> </tr>
<tr> <th>Lowest price</th> <th><input type="text" id="LowerPrice" value=""><br></th> </tr>
<tr> <th>Highest price</th> <th><input type="text" id="UpperPrice" value=""><br></th> </tr>
<tr> <th>Sale only</th> <th><input type="checkbox" id="OnSale" value=""></br></th> </tr>
</tbody>
</table>
<p>Sort by:</p>
<input type="radio" name="sort" id="DealRating" value="a">Deal rating<br>
<input type="radio" name="sort" id="Title" value="b">Title<br>
<input type="radio" name="sort" id="Price" value="c">Price<br>
<input type="radio" name="sort" id="Release" value="d">Release<br>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
<p> OR </p>
</div>
<div class="col-md-3">
<p>Search for your favourite games<p>
<form name="games" action="">
<table>
<thead></thead>
<tbody>
<tr><th>Title</th> <th><input type="text" id="GameTitle" value=""></br></th></tr>
</tbody>
</table>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
"""
f.write(message)
f.close()
my question now is: how I can use that form input to process it in api search and then return result back on this page?
OR
eventually: how to runnpython script from my page and just display results?
Note: I have to use python for this. This is requirement for my project.
It looks like you're looking for something like a CGI script in python. Python has some support for this in the standard library.
There are a lot of tutorials that explain that in detail how to do that exactly.
You could also use mod_python, which is an extension for the Apache web server to run and parse python scripts.

Reading values from a dynamic table form

OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)
Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></div>

Clear child JSP page into default look

Below is JSP page
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="xyzRadio" value="sampleInputRadio" checked="checked"
onclick="loadXyz()"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="sampDtlsRadio" value="abcRadio"
onclick="loadabc()">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
In JS file I am hiding div based on user's selection.
Both page have some functionality which changes page's default look, Like row can be added or deleted, Now if user select other radio button and came back to page, default look should be displayed. I don't want to get into undo what user has done, util there is cleaner way to do it.
Currently I am reloading parent page.
Is there any way using ajax call I can request for xyz.jsp page again, so that I don't have to refresh parent page. Or any better solution.
First of all it's better to use onchange rather then onclick. Second, combine you radio buttons with the same name (to make it acting like radio buttons rather then as a checkboxes). Third, bind your handlers in js code rather then in html. And finally, of course you can load parts via Ajax.
$('[type="radio"]').on('change', function(){
if($('[type="radio"]:checked').val() === 'sampleInputRadio') {
$('#xyz').load('http://your.serv.er/xyz.jsp');
loadXyz();
} else {
$('#abc').load('http://your.serv.er/abc.jsp');
loadabc();
}
});
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="SampleInput" value="sampleInputRadio" checked="checked"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="SampleInput" value="abcRadio">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
P.S. Since I don't know what your original handler do, I just call its after load .jsp requests but maybe it is unnecessary.

AngularJs:loading angular page from normal Javascript

I have a situation here. I have used angularJS for my application and also using $resource for service call. Now i want to implement a new functionality in this. In this i need to show a checkbox for which i have a code in index.html and i need to load the services conditionally. but i am not specifying ng-app in this. I want my application to behave as angular from the second page which i am redirecting from index. Is it possible to do? If yes can anyone help me please?
Here is the sample code which i have tried but am stuck:
Index.html
<body>
<div>
<table style="margin-left:40%">
<td style="width:62%">
<label id="sampleEnv" style="margin-top:10%">First Login</label>
</td>
<td>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</td>
</tr>
</table>
<input type="button" value="submit" onclick="checkVal()">
</div>
<script>
function onclick(){
alert(document.getElementById("myonoffswitch").checked);
location.href="views/login.html";
}
</script>
</body>
Login.html
<html ng-app="sampleApp">
<head>
</head>
<body ng-controller="sampleController">
<form name="sampleForm" ng-submit="authenticate()" novalidate>
<div>
<table align="center">
<tr>
<td>ID</td>
<td> <input name="sampleId" type="text" maxlength="9" ng-model="sampleIdModel" integer/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" ng-model="password" passwordmin /></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
App.js
var app = angular.module("sampleApp", ["sampleService"]);
After clicking on the submit button on index page, login page comes but fully distorted. After debugging in chrome, i found that login.html doesn't have any support from any other controller or js which was loaded in index.html .
Any help will be very useful.
Thanks in advance.

displaying ajax response in html page without submit buttons

I have two questions
First Question:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<title>List Companies</title>
<script language="JavaScript" type="text/javascript">
function ajax_post(){
var databox =document.getElementById("status");
var hr = new XMLHttpRequest();
var url = "yourdomain/List_ajax.php";
var f = document.getElementById("format").value;
var vars = "format="+f;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = JSON.parse(hr.responseText);
var x="<table border='1'><tr><td style='width:80px'><center><b>Company ID</center></b></td><td style='width:80px'><center><b>Company Name</center></b></td><td style='width:80px'><center><b>Manager Name</center></b></td><td style='width:80px'><center><b>Manager Phone</center></b></td></tr>";
for(var o in return_data){
if(return_data[o].company_id){
x +="<tr><td style='width:80px'>"+return_data[o].company_id+"</td><td style='width:80px'>"+return_data[o].company_name+"</td><td style='width:80px'>"+return_data[o].manager_name+"</td><td style='width:80px'>"+return_data[o].manager_phone+"</td></tr>";
}//end if
}//end for
x += "</table>";
databox.innerHTML=x;
}//end if
}//end function
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = '<center> <img src="http://www.slimspresents.com/wp-content/themes/simplicity/images/indicator.gif" alt="wait"> </center>';
}
</script>
</head>
<body>
<table width="380px">
<tr>
<td colspan="2" style="text-align:center">
<h3>List of Companies</h3>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input id="format" name="format" type="hidden" value="json"/>
<input name="myBtn" type="submit" value="List Companies" onClick="javascript:ajax_post();">
</td>
</tr>
</table>
<br /><br />
<div id="status"></div>
</body>
</html>
Now when the user open the page has to click on the button to display "List of Companies" in a Table >>> I try to display the ajax without buttons directly when the user open the page displaying the "List of Companies" in a Table directly by this code
<script type="text/javascript">
ajax_post();
</script>
but does not work I want solution if it possible
Second Question:
I have a form has input fields with submit button like This Login page :
<table width="350px">
<tr>
<td colspan="2" style="text-align:center">
<h3>Login </h3>
<input id="format" name="format" type="hidden" value="json"/>
</td>
</tr>
<tr>
<td valign="top">
<label for="username">Username *</label>
</td>
<td valign="top">
<input id="username" name="username" type="text" maxlength="50" size="25"/>
</td>
</tr>
<tr>
<td valign="top">
<label for="password">Password *</label>
</td>
<td valign="top">
<input id="password" name="password" type="password" maxlength="50" size="25" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input name="myBtn" type="submit" value="Login" onClick="javascript:ajax_post();">
</td>
</tr>
</table>
Now when the user fill the fields has to click on Login button to submit the data.
The problem is when the user fill username filed and password filed and after that pressing on Enter in the Keyboard that does not submit the data >>>> I want when the user press on Enter on the Keyboard directly submit the data that means the user does not has to click on Login button that is better for usability.
For your first question, I think what you are looking for is:
<body onload="myFunction()">
This will execute your function, once your element has been loaded.
The enter key is usually bound to a object, but in your instance you don't have one - and even if you did, you don't want a POST or GET to happen. To get around this, simply bind a method to your function that will execute your Ajax call.
<input id="password" name="password" type="password" maxlength="50" size="25" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()"/>

Categories