Multiple Submit Actions - javascript

I have a script given to me by another developer to send push messages to my Apps.
I want to be able to send them from one page to both App types but cannot figure how.
Problem is I do not have any control over the pages on the server they are sent to.
If you look at the code the only differences in the two critical pieces of code are the Form action to send them to each Server page and the name of the App Id's...the other info remains the same.
I also found a piece of javascript to submit to two places from one button but could not get it working with both...
I know from reading that I probably need an array...Could someone please show me some code with these in an array with a submit button to send them to their respective pages.
Thanks in advance...
EDITED
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-latest.pack.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form name="push" method="post" >
<input name="pushmessage" type="hidden" value="HAIR EXTENSIONS ">
<p align="center">Notification Message:<br />
<textarea style="width: 280px; height: 150px; margin-bottom: 30px; font-family: Verdana, Geneva, sans-serif; border-color: #000; border- width: 1px; resize: none;" name="pushmessage" id="push-message"> </textarea><br />
<input type='button' class="inputbtn" name='Submit' value='Push' onclick='sendFormData()' />
<form/>
<script type="text/javascript">
function sendFormData() {
var formURL1 = 'http://apple/iPhone-message';
var formURL2 = 'http://google/android-message';
var postData1 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','appid':' CommunityApp-i','topics':'test'};
var postData2 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','ap pid':'CommunityApp','topics':'test'};
submitForm(formURL1, postData1);
submitForm(formURL2, postData2);
};
function submitForm(formURL, postData) {
$('#push-message').append('sending data to url : '+formURL+'\n');
$.ajax(
{
url: formURL,
type: "POST",
data: postData,
success: function (data, textStatus, jqXHR) {
$('#push-message').text('success');
},
error: function (jqXHR, textStatus, errorThrown) {
$('#push-message').append('oops:error occured'+errorThrown+'\n');
}
});
}
</script>
</body>
</html>

You should not use native submit button (that triggers a page change) but use a ajax submit method using XHR object.
You can take a look to this jquery plugin: http://jquery.malsup.com/form/

you dont need to html form tag, you can do that with this piece of this code:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form name="push" method="post" >
<input name="pushmessage" type="hidden" value="HAIR EXTENSIONS ">
<p align="center">Notification Message:<br />
<textarea style="width: 280px; height: 150px; margin-bottom: 30px; font-family: Verdana, Geneva, sans-serif; border-color: #000; border- width: 1px; resize: none;" name="pushmessage" id="push-message"> </textarea><br />
<input type='button' class="inputbtn" name='Submit' value='Push' onclick='sendFormData()' />
<script type="text/javascript">
function sendFormData() {
var formURL1 = 'http://apple/iPhone-message';
var formURL2 = 'http://google/android-message';
var postData1 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','appid':' CommunityApp-i','topics':'test'};
var postData2 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','ap pid':'CommunityApp','topics':'test'};
submitForm(formURL1, postData1);
submitForm(formURL2, postData2);
};
function submitForm(formURL, postData) {
$('#push-message').append('sending data to url : '+formURL+'\n');
$.ajax(
{
url: formURL,
type: "POST",
data: postData,
success: function (data, textStatus, jqXHR) {
$('#push-message').text('success');
},
error: function (jqXHR, textStatus, errorThrown) {
$('#push-message').append('oops:error occured'+errorThrown+'\n');
}
});
}
</script>

Related

click submit button every 4 secconds

how can i make automatic click per each 4 sec ?
i want that submit button be clicked every 4 sec.
but its not work correctly
my works :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*BruteForce*</title>
<script src="!Needs/jquery.min.js"></script>
<style>
#form {
margin: 0 auto;
text-align: center;
}
#getHash {
width: 440px;
text-align: center;
}
#length {
text-align: center;
}
#boxContent {
width: 833px;
height: 469px;
border: 1pt solid black;
text-align: left;
margin: 0 auto;
}
</style>
</head>
<body>
<form id="form" method="post" action="server.php">
<span>Enter Your Hash (SHA256) : </span>
<input id="getHash" type="text" value="" name="getHash" title="">
<input id="length" type="number" value="" name="length" placeholder="Enter the Length">
<input id="create" type="submit" value="create" title=""><br><br>
<div id="boxContent"></div>
<input id="btn" type="button" value="..." title=""><br><br>
</form>
<script>
setInterval(function () {
$("#create").click(function () {
event.preventDefault();
$("#boxContent").html(("Loading ..."));
$.ajax({
type: 'POST',
url: "server.php",
data: $("#form").serialize(),
success: function (response) {
$("#boxContent").html((response));
}
});
});
}, 4000);
</script>
</body>
</html>
as you can see . im trying to make simple brutforce method
but its manual , i want to create a auto .
i used setinterval for every 4 sec . but it doesnt work . ? any idea?
Instead of creating click events every 4s, trigger it!
Use that event argument!
PS: if you haven't already (not present in your code above...) You need to include also the jQuery library! <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
const $create = $("#create"); // Cache your elements!
$create.on("click", function (event) {
event.preventDefault(); // Use the `event` argument
// ... other code here
});
setInterval(() => {
$create.trigger("click");
}, 4000);
add jquery library script before your script ex:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
and try this it works for me:
setInterval(() => {
$create.click();
}, 4000);
Execute the same code that the button will execute every 4 seconds and if you want, change the button's style to look like i'ts clicked

Why doesnt my website sub url working when submitting form but works when i manually enter it

I have a form on localhost:8080 which when you enter form data (user & pass), then press submit, it meant to send a POST to localhost:8080/submit, then should show text on that page saying "Submit page". When I enter "localhost:8080/submit" into my browser, it works, but when I use the submit button to get there, it says "This site can’t provide a secure connection" (aka, doesn't work)
script.js
const url = "https://localhost:8080";
const data = {
"user": "user",
"pass": "pass"
}
function send() {
alert("Sent")
$.post(url, data, function (data, status) {
console.log("Sent " + data + ", status is: " + status)
});
}
body {
background-color: #444444;
}
.form-div {
width: 100%;
height: auto;
text-align: center;
justify-content: center;
align-content: center;
border: 1px solid red;
}
form {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Harley Swift</title>
<link rel='stylesheet' href='styles.css'/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="form-div">
<form method="POST" action="https://localhost:8080/submit">
<div>
<label for="user">Username</label>
<input name="user" type="text" id="user"><br>
</div>
<div>
<label for="pass">Password</label>
<input name="pass" type="password" id="pass"><br>
</div>
<br>
<div>
<button class="btn" onclick="send()">Submit</button>
</div>
</form>
</div>
</body>
</html>
app.js: https://hastebin.com/udunalurub.lua (couldn't figure out how to use code snippets on here, sorry)
Thank you in advance! I am not too familiar with nodejs servers yet
Don't use https, use http when developing locally.

How can I get data using jQuery from golang code (server)?

Users will submit data using the text editor given on the website. My golang server will capture it , process it and then display result below the text editor on the website.
I am able to get the user input and process it, but I'm unable to send it back to website for displaying results.
main function:
http.Handle("/", http.FileServer(http.Dir("./codemirror")))
http.HandleFunc("/getRules", getRules)
...
getRules function:
//capture form data
//do some processing on captured data
js, _ := json.Marshal(resp)
w.Header().Set("Content-Type", "application/json")
w.Write(js)
index.html:
<!DOCTYPE html>
<html>
<head>
<title>nvrule playground</title>
<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">
<link rel="stylesheet" type="text/css" href="plugin/codemirror/theme/the-matrix.css">
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
<form action="/getRules" method="post" id="ruleForm" target="hiddenFrame">
<textarea id="codemirror-textarea" name="rule"></textarea>
<input class="button" type="submit" value="Send" />
</form>
<!-- javascript -->
<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/default.js"></script>
</body>
</html>
default.js:
var editor = CodeMirror.fromTextArea(document.getElementById("codemirror-textarea"), {
lineNumbers : true,
theme : "the-matrix",
value: "Enter rules here"
});
I figured it out. You can use ajax.
$('#ruleForm').submit(function(e){
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function(json){
console.log(json)
var templateHtml = $('#resultsArea').html(),
template = Handlebars.compile(templateHtml);
$('#ajaxResponse').html(template(json));
}
});
});
useful link:stackoverflow (question contains my answer)
You can have an endpoint to get the status of the processing that you can poll using setTimeout, something like:
/rule/:id/status
It can return a status code such as (apart of the typical 404, 500, etc.):
{ status: "processing | idle | finished" }
Once the status is finished then GET the result.
/rule/:id
Hope it helps.

getting data from a form using ajax?

I am trying to get data from an html form using jquery. I have tried the following but for some reason when I tried to log the data in the console, I keep getting null. What could I be doing wrong ? I want to send the data captured from my form in json format to my servlet. Thanks
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<form id="register">
<div class="vertical-menu">
</div>
API Name:<br>
<input type="text" id = "apiname" name="apiname">
API ENDPOINT:<br>
<input type="text" id ="apiendpoint" name="apiendpoint">
<br>
API VERSION:<br>
<input type="text" id="apiversion" name="apiversion">
ACCESSIBLE:<br>
<input type="checkbox" name="source" value="internet"> Internet<br>
<input type="checkbox" name="source" value="vpn"> VPN<br>
<br>
<input type="submit" id="check" name="check" value="Insert">
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).on("click", "#check", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
event.preventDefault();
var d = $('register').serialize();
console.log("d",d);
$.ajax({
type: "POST",
url: "HomeServlet",
dataType: "text",
contentType: "application/json",
data:d,
success: function(data){
console.log(data);
},
error:function(){
console.log("error");
},
});
});
</script>
</body>
</html>
You forgot to give proper selector:
register is the ID of the form so;
$(document).on("click", "#check", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
event.preventDefault();
var d = $('#register').serialize(); // You had missed # here.
console.log("d",d);
$.ajax({
type: "POST",
url: "HomeServlet",
dataType: "text",
contentType: "application/json",
data:d,
success: function(data){
console.log(data);
},
error:function(){
console.log("error");
},
});
});
// Handle submit action on the forms.
$('#register').on('submit', function(e) {
// Prevent the browser to submit the form (we want to do it manually)
e.preventDefault();
var form = $(this);
var formdata = (window.FormData) ? new FormData(form[0]) : null;
var data = (formdata !== null) ? formdata : form.serialize();
console.log(data);
// POST request to server
$.ajax({
url : "URL/TO/SERVER",
type : "POST",
data : data,
// other fields you need
});
});
I think that this is a proper way to achieve what you need. Don't forget to add the event argument to your callback function.

How to make my form post to its self

I have a form in which users can submit issues, what I want to happen is when users hit the add button, i want what they add to be posted in the box below. So say the add something, x out the window and come back to add something else later what they added previously will still be there.
here is my fiddle
http://jsfiddle.net/grahamwalsh/rCB9V/
IssueList(html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Issue List</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
</head>
<body>
<div class='issuelist'>
<form data-bind="submit:addIssue">
Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button>
</form>
<p>Your Issues:</p>
<select multiple="multiple" data-bind="options:allIssues, selectedOptions:selectedIssues"> </select>
<div>
<button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button>
<button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button>
</div>
</div>
</body>
</html>
IssueList (js)
$(document).ready(function(){
var Issuelist = function () {
this.issueToAdd = ko.observable("");
this.allIssues = ko.observableArray(["test"]);
this.selectedIssues = ko.observableArray(["test"]);
this.addIssue = function () {
if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0))
this.allIssues.push(this.issueToAdd());
this.issueToAdd("");
};
this.removeSelected = function () {
this.allIssues.removeAll(this.selectedIssues());
this.selectedIssues([]);
};
this.sortIssues = function () {
this.allIssues.sort();
};
};
ko.applyBindings(new Issuelist());
});
IssueListcss
body { font-family: arial; font-size: 14px; }
.issuelist { padding: 1em; background-color: #87CEEB; border: 1px solid #CCC; max-width: 655px; }
.issuelist input { font-family: Arial; }
.issuelist b { font-weight: bold; }
.issuelist p { margin-top: 0.9em; margin-bottom: 0.9em; }
.issuelist select[multiple] { width: 100%; height: 8em; }
.issuelist h2 { margin-top: 0.4em; }
You could have the form 'post' to its self then make an ajax request for their new issue and put it inside a div. I would also hold off on so much on the javascript or have support for those without it:
getissues.php
getissues.php
<?php
/*
connect to your database code
*/
$query = "select * from issues";
$result = mysql_query($query, $connect);
while($row = mysql_fetch_array($result))
{
echo $row['issues'];
echo '<hr>';
}
?>
process.php
process.php:
<?php
/*
connect to your database
*/
$issue = strip_tags$_POST['issue'];
$query = "insert into issues (issue) values ('$issue')";
$result = mysql_query($query, $connect);
?>
main form page:
<!DOCTYPE HTML>
<html>
<head>
<title>issue page</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
<script type="text/javascript">
function check()
{
var request = $.ajax({
url: "getissues.php",
type: "POST",
dataType: "html"
});
request.done(function(msg) {
$("#issues").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
function validate()
{
var issue = $("#issue");
var errcount = 0;
if (issue == "")
{
errcount++;
alert("enter something");
}
if (errcount == 0)
{
/*
make request to php script to put issue into database
*/
$.post("process.php",
{
issue:issue
},
function(data,status){
window.alert("Request done!");
check();
});
}
}
</script>
</head>
<body>
<form action="issuelist.html" method="post">
Add Issue: <input type="text" name="issue"/>
Add Issue: <input type="text" name="issue" id="issue"/>
<button onclick="validate()">submit</button>
</form>
<div id="issues" class="issues">
<!--your ajax fetched issues will appear here-->
</div>
</body>
</html>
hope this helps!

Categories