jquery, button that sets a radio field before submitting - javascript

I was trying to have a submitting button to set a radio input field before submitting the form. It sets correctly the check on the radio btn, but when it submits the form, it doesn't take the value of the radio field.
Here is some code I am using:
$('.groupAttributeBtn').click(function(){
$(this).closest('.radioContainer').find('.attribute_radio').prop("checked", true);
getProductAttribute();
});
And the HTML is made of rows of a table with N buttons
<tr class="radioContainer">
<td style="width:40%;">
<span>Package 2 kg</span>
<input type="radio" class="attribute_radio" name="weight" value="2" />
</td>
<td><span class="costoAttributo">23</span></td>
<td style="width:40%;text-align:right;">
<button type="submit" name="Submit" class="exclusive btn btn-outline-inverse groupAttributeBtn">
<span>Add to cart</span>
</button>
</td>
</tr>
Any suggestion? How can I have the radio correctly set and then the button submit THAT value?
It now takes the previously selected one.
I should probably mention that I am operating on the product.tpl template page of a Prestashop installation.

<button type="button" name="Submit" class="exclusive btn btn-outline-inverse groupAttributeBtn">
use button type instead of submit

Related

In Html why does clicking on regular button within form action the form

I have a webpage with three buttons, two of the buttons action the form submitting data to the server, it then sends back the appropriate page.
The third button is meant to just open a new webpage in a new tab, the current page does not need to be reloaded so this button is just a button element with some onclick() code, its is not part of an input element
The trouble is that when I click on the third button it actions the form action the form even though its not an input type, why does it do this ?
<main>
<form action="/license.process" name="process" id="process" method="post">
<label>
Please enter your license information as provided in your license email
</label>
<table>
<tr>
<td><label title="Email">Email</label></td><td><input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="licenseinputfield"></td>
</tr>
<tr>
<td>
<label title="License Key 1">
License Key 1
</label>
</td>
<td>
<input type="text" name="licenseKey1" value="50302c02147f23ed809a8f2579338121a2b1594f967bb18" class="licenseinputfield">
</td>
</tr>
<tr>
<td>
<label title="License Key 2">
License Key 2
</label>
</td>
<td>
<input type="text" name="licenseKey2" value="0ff02146cd1777d7e0890e659b10218761869212d7b0d60" class="licenseinputfield">
</td>
</tr>
</table>
<input type="submit" name="cancel" value="Cancel">
<input type="submit" name="save" value="Save">
<button onclick="window.open('http://www.jthink.net/songkong/buy.jsp','_blank');">
Get License
</button>
</form>
</main>
I can make it work properly by moving this third button outside of the form. But then I get formatting problem because button is shown on next line, regardless I want to understand why having the butto within the form triggers the form.
The default type of a <button> is submit.
If you want it to be type=button then you have to say so explicitly.
You need to add the type="button" attribute to prevent the form from being submitted.
I'm not entirely sure why but came across this last week.

web2py How to add id to submit_button

In my html file, I'm adding two forms, each with their own submit_button. I have a text input in one of the forms and want to make it required to be not blank but it doesn't seem to work...
userQueryForm = SQLFORM.factory(
Field('userQuery', label='', requires=IS_NOT_EMPTY() ),
submit_button = T('Generate Report')
)
The html that gets rendered is as follows
<td class="w2p_fw">
<input class="string" id="no_table_userQuery" name="userQuery" type="text" value="">
</td>
...
<tr id="submit_record__row">
<td class="w2p_fl"></td>
<td class="w2p_fw">
<input type="submit" value="Generate Report" class="btn">
</td>
</tr>
I want my <input> to have an id so i can access it in Jquery...
My ultimate goal is to not allow the form to be subitted if the text
You can access the submit button server-side DOM element via userQueryForm.custom.submit, so to add an id attribute:
userQueryForm.custom.submit.update(_id='submit_button')
Alternatively, there are other methods to access the submit button via jQuery rather than relying on an id. For example:
jQuery('input[value="Generate Report"]')

form tag inside a table ? HTML 5

I want to ask you guys how i can put a form method "Get" in a table. In my table i have got a text field and when i submit this form it will check for validation. My validation works fine but this form doest actually submit it as i don't aget any values at the URL.
<form method="GET" id="my_form">
<table>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="submit" onclick="return submitvalidation();" form="contactusform">
</td>
</tr>
</table>
</form>
Your submit button belongs to a different form.
Remove
form="contactusform"

<button> not working in IE

I have multiple buttons with different functionality, but each button behaves as submit button. I want to give different behavior for each of the button created.
<form action="/createUpdate">
<!--here i have form elements like textbox , checkboxes etc --!>
<button name="buttonName" id="submitButton1" value="create">create</button>
<button name="buttonName" id="submitButton2" value="Update">Update</button>
</form>
If you change the buttons to input type=submit, only the pressed button will be sent.
For example:
<form action="/createUpdate">
<!--here i have form elements like textbox , checkboxes etc -->
<input type="submit" name="buttonName" id="submitButton1" value="create" />
<input type="submit" name="buttonName" id="submitButton2" value="Update" />
</form>

Submit data of form with dynamic id

I am trying to submit the data for this form, which has 3 different buttons:
<form action="/game.php?village=8404&screen=market&mode=own_offer&action=modify_offers&h=85fd1491" method="post">
<input class="btn btn-cancel" type="submit" value="Delete" name="delete">
<input type="text" size="2" name="mod_count" value="1" onkeydown="return no_enter(event)">
<input class="btn" type="submit" value="Increase" name="increase">
<input class="btn" type="submit" value="Reduce" name="decrease">
</form>
I would like to either submit the data in the same manner of "increase" or click that submit button. Ideally, I wouldn't have to replicate the URL which appears after the form action= as this varies from page to page.
When the form has a definite id, I've been using:
$('#thisFormId input[type=submit]').click();
But can't work out.
So how I can do that in this instance?
If I understand the questions:
$("input[name=increase]").click();
will trigger the click event of the Increase button and submit the form, which is what you want?

Categories