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" />
Related
I would like to show the second text field incl. copy button as soon as i submit the the first text field. how i can hide the second text field and show after submit?
I tried as following:
HTML:
First Texfield:
<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>
Second Textfield:
<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>
JQuery:
<script>
$("#formButton").click(function(){
$("#form1").toggle();
});
</script>
Thank you so much for your support.
If you intend to submit data to a server normally you should have your inputs and buttons wrapped in a <form> tag, so I added one and set it up so that it sends to a live test server. There's also an iframe added as well to display the server's response. The jQuery is simple:
$('#main').on('submit', function() {...
When form#main "hears" a submit event (i.e. when the button[type=submit] is clicked...
$('.row2').removeClass('hide');
...Remove the class .hide form tr.row2 which removes the style display:none
BTW, ids must be unique. #form1 is duplicated and there's 2 ids on one button in OP code.
Demo
$("#main").on('submit', function() {
$(".row2").removeClass('hide');
});
.hide {
display: none
}
<form id='main' action='https://httpbin.org/post' method='post' target='view'>
<table>
<tr>
<td><input type="text" id="source" name='source'>
<button type="submit">Submit</button></td>
</tr>
<tr class='row2 hide'>
<td><input type="text" size="62" id="target" name='target'>
<button type='button'>Copy</button></td>
</tr>
</table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The first problem is that you have duplicate IDs on the button (both submit and formButton). An element can only have one ID. I've gone with the latter in my example.
Second, you have duplicate form1 IDs, which is also invalid markup. Simply make use of classes instead.
Then it's just a matter of hiding these elements by default, and showing them on click of the button. I'd recommend .show() for this instead of .toggle().
This can be seen in the following:
$("#formButton").click(function() {
$(".form1").show();
});
.form1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="text" id="source">
<button type="submit" id="formButton">Submit</button>
</td>
</tr>
<tr>
<td>
<input type="text" size="62" id="target" class="form1">
<button onClick="myFunct()" class="form1">Copy</button>
</td>
</tr>
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.
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.
I'm new to javascript and I have trouble finding a solution that works for what I need.
I have a form and when the user submits the form, if a checkbox is checked, it needs to display an alert message.
<form method="post" action="inserting.php" id="form1" class="signupform">
<input type="hidden" name="allowlang" id="allowlang" value="no" />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="enable" id="enable" value="YES" style="width:15px !important"/>
There has been an issue.</td>
</tr>
</table>
<br />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td height="50"></td>
<td> <br /><button id="registerButton" type="submit" style="float:left;">Send Data</button></td>
</tr>
</table>
</form>
Any help is welcome, thanks in advance.
Just change the start of yout form to this
<form method="post" action="inserting.php" id="form1" onsubmit="return validateForm()" class="signupform" name="signupform">
Use this Jscript
function validateForm() {
if (document.forms["signupform"]["enable"].checked)
alert("yes, there has been an issue");
}
You do not jQuery for this.
DEMO
Try in jquery
$('#form1').submit(function () {
if ($('#enable').is(':checked')) { //if checkbox is checked
alert("checked");
}
else {
return false;
}
})
methods to be learned:
submit()
is()
Change button type="submit" to button.
Submit the form using submit() function.
$( "#buttonId" ).click(function() {
//CHECK here for the checkbox;
if(checked) alert();
$( "#form" ).submit();
});
I would use an ordinary button that calls a function that shows the alert, and then if necessary, submits the form by calling formObject.submit().
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.