as title suggests, I am having issues running my script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#subbut").click(function(e){
e.preventDefault();
$.ajax(
{
url : 'http://jsonplaceholder.typicode.com/users?email=Sincere#april.biz',
method : 'GET'
})
.then(
function(data) {
document.getElementById("street").value = data[0].address.street;
});
});
});
</script>
And my form is here:
<form id="myForm"
action="<%=response.encodeURL(request.getContextPath()
+ "/upisKorisnika.html")%>"
method="POST">
<table id='userInput' class="display" border="0"
style="font-family: Arial; font-size: 18px;">
<tr>
<td><c:out value="E-mail: " /></td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="submit" name="subbut" class="btn btn-default" id="subbut" value="Submit">
</td>
</tr>
</table>
<input type="hidden" id="street" name="street" />
</form>
My first question is why doesn't anything happen when I click submit, what am I doing wrong?
And I would also like to know how could I get value of text field "Email", so I could use something like this:
url : 'http://jsonplaceholder.typicode.com/users?email='+mail,
First, is confusing the use of a form that not send data to the server and a submit button without submit form behavior.
Second you need use a debug tool like chrome developer tool. It will give you the trace of your calls.
To debug, add to the promise.then the error callback with a simple alert or a console.log to view what is happen with your call.
And responding your question,your code seen be right.
Related
In my page I have some styling, then a form, then some java-script code.
I have two issues:
First: when I click button 'submit', all my styling goes away, also the expected action (div to appear) does not happen.
Second: I have an output-text for displaying a small phrase saying subscription was successful or not, which reads a bean property called result. The problem is that this property never gets refreshed. The inputFields after I refresh the page they come up clean, this outputText no. How can I make it get without any text when user comes to the page for the second time?
Thank you so much!
Style:
#mainTableRightDiv1 {
display: none;
background-color:rgba(0, 0, 0, 0.5);
}
Body:
<button class="button" id="subscribe">Subscribe</button>
<div id="mainTableRightDiv1">
<table class="hidden" id="formTable">
<tr>
<td id="formTd">First Name:</td>
<td><h:inputText class="form" id="inputFirstName" value="#{visitor.firstName}"/></td>
</tr>
<tr>
<td id="formTd">Last Name:</td>
<td><h:inputText class="form" id="inputLastName" value="#{visitor.lastName}"/></td>
</tr>
<tr>
<td id="formTd">Email:</td>
<td><h:inputText class="form" id="inputEmail" value="#{visitor.email}"/></td>
</tr>
</table>
</div>
<p><h:commandButton class="button" id="submit" value="Submit" action="#{visitor.registerVisitor()}"/></p>
<p><h:outputText class="output" id="result" value="#{visitor.result}"/></p>
Javascript:
$("#subscribe").click(function (e) {
$("#mainTableRightDiv1").css('display', 'block');
});
Replace your jquery statement with the .on() event instead of .click(),also make sure that you have included jQuery.
As for your second question, you can set the result to no text when the document has been compiled with jQuery
$(document).ready(function(){
result = "";
$(document).on("click","#subscribe",function(){
$("#mainTableRightDiv1").css("display","block");
})
});
It is recommended to put all of your jquery code in the $(document).ready() function to ensure that everything executes.
<form action="" method="post" name="theform">
<table width="693" border="1" style="table-layout:fixed;" >
<tr>
<td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
</tr>
</table>
<span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>
<?php
if (isset($_POST['btnSend']))
{
$getmsg = $_POST['mymessage'];//i can't seem to get the value of td here
echo $getmsg;//i want to echo the message for example.
}
?>
Currently, I want to echo my td value after clicking the button but it is not appearing. please help me. tq.
contenteditable is not part of form input element hence it can not be accessed over server like form-input-elements. It means you can not access contenteditable element value in $_POST/$_GET
Update hidden field value when value of contenteditable is changed. use input event. The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed. Additionally, it fires on contenteditable editors when its contents are changed.
document.getElementById('mymessage').addEventListener('input', function() {
document.getElementById('hiddenInput').value = this.innerHTML;
console.log(document.getElementById('hiddenInput').value);
});
document.getElementById('hiddenInput').value = document.getElementById('mymessage').innerHTML; //To set the value initially..
console.log(document.getElementById('hiddenInput').value);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<form action="" method="post" name="theform">
<table width="693" border="1" style="table-layout:fixed;">
<tr>
<td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
</tr>
</table>
<input type="hidden" id='hiddenInput' name='hiddenInput'>
<span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>
PHP:
<?php
if (isset($_POST['btnSend']))
{
$getmsg = $_POST['hiddenInput'];
echo $getmsg;
}
?>
Edit: As Nate pointed out, It is better to use submit or click(If not dealing with form) event to set the value of the hidden element for the sake of the performance
document.querySelector('[name="theform"]').addEventListener('submit', function(e) {
e.preventDefault(); //Prevented submit action just to demonstrate..
document.getElementById('hiddenInput').value = document.getElementById('mymessage').innerHTML;
console.log(document.getElementById('hiddenInput').value);
})
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<form action="" method="post" name="theform">
<table width="693" border="1" style="table-layout:fixed;">
<tr>
<td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
</tr>
</table>
<input type="hidden" id='hiddenInput' name='hiddenInput'>
<span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>
td is not form element so it does not have such attributes as name or value. You can put that value to hidden field or text field:
input {
border: none;
background-color: transparent;
outline: none;
}
<table width="693" border="1" style="table-layout:fixed;">
<tr>
<td width="683" contenteditable="true">
<input id="mymessage" type="text" value="Write message here..." name="mymessage" />
</td>
</tr>
</table>
Other option would be to use jQuery to get content of td:
$('form').submit(function () {
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: {
mymessage: $('#mymessage').text()
},
success: function () {
// do something on success
}
});
return false; // return false so that form will not submit reloading page. Form submitting is now done via Ajax
});
I am trying to write a html form to submit a few variables to an external asp file that creates a chat window.
The example that has been provided for me to use you can see by this link, but this involves a two step process.
In the example provided, the customer fills out the fields, clicks on "Submit" and is then taken to a separate page to click on a dynamically generated javascript link to launch the chat window.
I want do to this on a single page instead, but am having trouble finding a way to pass variables from my HTML form correctly to the external script
<script language='JavaScript' src='https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;email%40address.com;Description;Customers+Name;Company+Name&ref=Customers+Name&clientid=Company+Name'> </script>
In the code above I've entered generic text into the fields like "Company Name" and "email#address.com" to get that example link.
I've tried doing this a number of ways but none have resulted the desired result, such as using javascript direct to url with variables from the form, and url in the action part of the html form.
I don't have any control over how the script at na.ntrsupport.com works or receives the request so I have to get this working from my end.
Any help is going to be appreciated, and let me know if I've missed anything of importance.
My code so far
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script>
function launchChat()
{
var name = document.getElementById('name').value;
var company = document.getElementById('company').value;
var email = document.getElementById('email').value;
var description = document.getElementById('description').value;
var url = "https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;" + email + ";" + description + ";" + name + ";" + company + "&ref=" + name + "&clientid=" + company;
window.location(url);
return false;
}
</script>
<style>
div{
width:400px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px; /* Negative half the width*/
margin-top:-100px; /* Negative half the height */
}
</style>
</head>
<body>
<div>
<form onsubmit="return launchChat();">
<table>
<tr>
<td colspan=2>
Put Banner here
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id=="name" name="name" required>
</td>
</tr>
<tr>
<td>
Company:
</td>
<td>
<input type="text" id="company" name="company" required>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="email" id=name="email" name="email" required>
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input type="text" id="description" name="description" required>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" id="submit" name="submit" value="Start Chatting"/>
</td>
</tr>
</table>
</form>
</div>
</html>
Alright, so you made it a bit too complicated there.
First thing: you need to use encodeURIComponent (this is the key!) on those variables you're concatting to the string because chances are some of them will have characters not allowed in the url.
Second: using GET method on the form will automatically build urls like that. For example:
<form action="a.html" method="GET">
<input name="var1" value="value1" />
<input name="var1" value="value1" />
</form>
will automatically build the link that looks like: a.html?var1=value1&var2=value2, which is a part of what you need and can make your life easier. I know you basically need to build two of those (the main url, which I'm not sure will remain hardcoded; and the ref2 part).
Another thing:
window.location(url);
should be:
window.location = url;
I got HTML like this:
<table>
<form action=\'food.php\' method=\'POST\'>
<tr><h4>
<td><span><input type="submit" name="food_edit" class="food_edit" value="Edytuj" /></span></td>
</h4>
</tr>
</form>
</table>
And then a function in jQuery which change input field:
wrap.find('.food_edit')
.replaceWith('<input type=\'submit\' name=\'food_edit_confirm\' value=\'Potwierdź\' />');
My problem is that after change submitting button, send form doesn't work.
you may try this after replacement of submit button:
$('form').on('click','input[type=submit]',function(){
//rest of code goes here.
});
you either need to use $( document ).ready() around the particular jquery code or u can try and use the .attr to change the attribs of your class or u can use 'focus' to wrap around it. or u can do something like
$('form').live('submit',function(){
// do the rest of ur code and then submit it....
});
You have invalid HTML. It should look like this:
<form action=\'food.php\' method=\'POST\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
If you're looking to add a confirmation you should look into the onsubmit="" in the <form> tag.
Example:
<form action=\'food.php\' method=\'POST\' onsubmit=\'return checkForm();\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
JS Code:
function checkForm() {
return confirm("Submit this form?");
}
<script type="text/javascript">
$(function(){
$('.food_edit').replaceWith("<input type='submit' name='food_edit_confirm' value='Potwierdz' onclick='document.getElementById(\"submit\").click();' />");
});
</script>
<form action='food.php' method='POST'>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" onclick="document.getElementById('submit').click();" />
<input type="submit" style="display:none" id="submit" />
</form>
The hidden button always do submit the form regardless you do anything with the submit button which is replacable.
I have a form where a user inputs a word, when pressing the button I want it to translate the word (using the jquery script) into the same field.
Only after completed to populate the field, it should continue and submit the translated word.
everything is working except that it will submit as soon as it translating causing the original word to be submitted instead of the translated one.
the original page shows that the word had been translated.
please help on how to make it submit only after the word have been translated in the text field. ?
should I use a delay ? if so how ?
or is there an oncomplete, "onpopulate" or something like that ?
here is the script:
<script type="text/javascript">
$(function transle() {
$('#transbox').sundayMorningReset();
$('#transbox input[type=submit]').click(function(evt) {
$.sundayMorning(
$('#transbox input[type=text]').val(),
{ source:'', destination:'ZH', menuLeft:evt.pageX, menuTop:evt.pageY},
function(response) {
$('#transbox input[type=text]').val(response.translation);
}
);
});
});
</script>
and the form:
<table id="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
<form action="custom-page" method="get" name="form1" target="_blank" id="form1" >
<tr>
<td><input id="q" name="q" type="text" class="search_input" value="Evening dress" /></td>
<td><input type="submit" /></td>
</tr>
</form>
</table>
there are another JS called for the script but I don't sure its needed for the question.
thank you.
you can use type="button" instead of type="submit" and after filling call submit event of your form
function(response) {
$('#transbox input[type=text]').val(response.translation);
document.forms.form1.submit();
}
<input type="button" />