I have a form that I have made that uses jquery to detect when the button is pressed, as well as used to show the data without a page reload.
It is working perfect when the button is pressed, however when pressing enter the page refreshes and nothing happens. I have the button bound to the jquery, but I am not sure what to do to handle pressing enter.
Html:
<table border="0" width="100%" cellspacing="1" cellpadding="2" style="margin-bottom:20px;">
<tbody>
<tr class="infoBoxContents">
<td style="padding:20px;">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td width="50%">
<table width="100%">
<tbody>
<tr>
<td class="main">
<b>Calculate shipping</b>
<div class="smallText">Shipping Weight: 6lbs</div>
</td>
</tr>
<tr>
<td class="main" style="padding:10px;">Country:
<select name="ship_country_id" id="ship_country_id">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<br>Post code/ Zip code:
<input type="text" name="postcode" id="postcode_entry">
</td>
</tr>
</tbody>
</table>
</td>
<td class="main" width="50%" align="right">
<div class="contentText" id="shipping_method"></div>
</td>
</tr>
<tr>
<td>
<button type="button" id="estimate" style="cursor:pointer; width:110px; margin-left:10px; padding:5px;">
<span class="ui-button-text" style="float:left;">Calculate</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e" style="float:right;"></span>
</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
javascript:
$(function () {
$('#estimate').click(function () {
var postcode_entry = $('#postcode_entry').val();
var country_entry = $('#ship_country_id').val();
$("#shipping_method").html("<div style=\'margin:20px auto;width:100px;text-align:center;\'><img src=\'ext/jquery/bxGallery/spinner.gif\' /></div>").show();
$.get("checkout_shipping.php", {
country: country_entry,
refresh_quotes: "1",
postcode: postcode_entry,
zone_name: "canada"
},
function (data) {
$("#shipping_method").html(data);
}
);
});
});
That's because you need to find what happens on submit – this is the event that is called when you press enter, it doesn't trigger the click of the button.
I don't know what the ID of your form is, but you can do something like the following:
$("#myform").submit(function(e) {
e.preventDefault();
//do something
...
Use this instead of the button click event.
Instead of running your code when the button is clicked, run it when the form is submitted.
$('YOUR_FORM_HERE').submit(function() {
This will catch any means of submitting the form.
You can add this jQuery to bind to the same event:
$(document).on('keypress', function(e){
if(e.which === 13){
$('#estimate').click();
}
});
Though it would be better to separate the function that gets executed into a separate function, and call that, this will still work just fine.
Related
I am having a issue with HTML and jQuery programming.
I am making a bulletin board with HTML and jQuery, with 2 textboxes and a button.
$(document).ready(function(e) {
$('save').click(function() {
const name = $('name').val();
const words = $('words').val();
$.post(
"http://localhost:8000/board_write",
{
name: words
},
function(data, status) {
}
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td class="vert" bgcolor="">
Name
</td>
<td>
<input class="name">
</td>
</tr>
<tr>
<td bgcolor="">
Anything you'd like to say
</td>
<td>
<textarea class="words" cols="40" rows="5" placeholder="please enter anything">
</textarea>
</td>
</tr>
<tr>
<td>
<input class="save" type="button" onclick="write()" value="Save">
</td>
</tr>
</table>
And, I also coded with jQuery to send the data of the two textboxes to localhost:8000, which is a node.js server to log the data to the console.
When I click the button, the page vanishes. What causes the situation? And, how can I solve the problem?
You have onclick = "document.write()"; that explicitly deletes the document . https://www.w3schools.com/jsref/met_doc_write.asp
Explanation: the code in onclick is scoped such: {window{document{element{}}}}; if you meant to implement a write() function, do so and invoke it by window.write(), or name it something differently to document.write. Otherwise, write() will de resolved to document.write().
I have a JS function to execute when a submit button is pressed.
<td colspan="2" align="center"><button
onclick="return myFunction()">test</button></td>
The above line work fine. But when I submit the form using the chrome browser's console window
document.getElementById("use").value=99;
document.forms[0].submit();
The myFunction does not get executed. How can I get it executed if I am submitting the form from the console.Thanks.
You have two approaches here.
Submit the form on the onsubmit event for the form
var submitFunction = function() {
alert("onsubmit event");
}
<form onsubmit="submitFunction()">
<table>
<tbody>
<tr>
<td colspan="2" align="center">
<button type="submit">test</button>
</td>
</tr>
</tbody>
</table>
</form>
Call the submit() from an onclick method
var myFunction = function() {
alert("onclick event");
document.forms[0].submit();
}
<form>
<table>
<tbody>
<tr>
<td colspan="2" align="center">
<button onclick="myFunction()">test</button>
</td>
</tr>
</tbody>
</table>
</form>
The function does not fire because you’re not clicking the button. Bind to the form’s onsubmit event instead.
I have a webpage having multiple tables with check boxes. On UI, onclick of a button all the checkboxes are enabled. I want to automate this process using phantomjs.
I tried clicking the button from phantomjs - it does click but does not enable check boxes.
I tried enabling single checkbox. But it did not enable.
Is it unable to find selectAll()? Is there anyway to debug phantomjs.
function () {
page.evaluate(function () {
if ($("id_SelectAllButton").click())
{
if (!this.checked)
{
document.getElementById("id_checkbox1").disabled = false;
}
}
});
}
<div class='Section1'>
<h3>Section 1</h3>
<table width='90%'>
<tr>
<td colspan='4'> <input id = 'id_SelectAllButton' type='button' value='SelectAll' onclick='selectAll(this.parentElement)'/></td>
</tr>
<tr>
<td></td>
<td class='b'>Name</td>
<td class='b'>DOB</td>
<td class='b'>Rank</td>
</tr>
<tr>
<td><input id='id_checkbox1' type='checkbox'></td>
<td>Abc</td>
<td>01/01/0001</td>
<td>2</td>
</tr>
</table>
</div>
I really appreciate your help!
I'm assuming the button you're targeting has an id="id_SelectAllButton" attribute. If so, you select it with a # before the ID: $("#id_SelectAllButton").click(). Similarly, target any other IDs.
I am having html table and inside that tr and td. Now all my Td are having different classes. i want to perform operation like whenever i call one function, a particular td having particular class automatically perform double click functionality and one value which i pass will store in that td.I am having editable td where user will provide a value.
function setAutometicallyValue() {
$(".columndata").bind("dblclick", function() {
$('.columndata').val("4");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tr valign="top">
<td class="columndata">Message</td>
<td class="1">Test</td>
<td class="2"></td>
</tr>
</table>
<input type="button" value="button" onclick="setAutometicallyValue()">
You can do like this.
function setAutometicallyValue() {
$('.columndata').text("4");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="mytable">
<tr valign="top">
<td class="columndata">Message</td>
<td class="1">Test</td>
<td class="2"></td>
</tr>
</table>
<input type="button" value="button" ondblclick="setAutometicallyValue()">
I have a table like this
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Valid Until</td>
<td>Delete</td>
<td>Edit</td>
</tr>
<tr>
<td>1</td>
<td id="1">
<div class="1u" style="display: none;">Username</div>
<input type="text" class="inputTxt" value="Username" style="display: block;"/>
</td>
<td id="1">
<div class="1p" style="display: none;">Password</div>
<input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
<td>18 Jul 09</td>
<td><button value="1" class="deleteThis">x</button></td>
<td class="editRow">Edit</td>
</tr>
When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
}).blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.
Thank You.
There's a nice plugin for this
Just edited my function because the plugin didn't suite well for my application
$('.editRow').live('click', function() {
var row = $(this).parent('td').parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
$(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
});
Your blur is applying on the button td.editRow but not applying on the input fields. I think you should separate the code and it should work.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt')
.slideDown('fast')
.blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
});