Submit data of form with dynamic id - javascript

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?

Related

Why isn't my JS redirecting the webpage?

I'm trying to make a HTML form that on submit does a google search with JS.
This is the HTML:
<form name="form">
<input type="text" name="search" id="searchBox" onkeyup="changeLogo()" autofocus>
<input type="submit" id="button" value="Submit" onclick="googleSearch()">
</form>
And the JS function:
function googleSearch() {
var searchText = document.getElementById("searchBox").value;
window.location.href = "http://google.com/";
}
The Google URL isn't right but it isn't redirecting at all.. I put alert(searchText) in the function and the alert showed so not really sure what's going on.
If you use button type as 'submit', it will submit your form.
So you can change your button from
<input type="submit" id="button" value="Submit" onclick="googleSearch()">`
to
<input type="button" id="button" value="Submit" onclick="googleSearch()">
It will work.
because the page refreshed when you click submit button before excuting localtion.href line
try change with your code like below
<form name="form" onsubmit="return false">
....
</form>
Your form is submitted which might be the issue. Change the type="submit" to type="button" this will make sure the form is not submitted on click of this button

Do notify/verify work without submit button?

I have a very simple form:
<form>
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="button" value="Insert your datas" onclick="insert()">
</form>
If third input (id:"btn") had type="submit", notify/verify would work well.
I don't need to submit this form (because I have to launch an insert() function on button onclick),
so I deleted the submit type of my button and unfortunately no notifications appear on my page now.
I may add an handler (like this: $(".elem-demo").notify("Hello Box")) as notify docs suggest, but that is a custom notification, good, but I want to take advantage of verify.js data-validate..no extra-code required for a simple validation like "required" or "number".
How can I fix that?
I wish I was clear of my issue and thanks to answer me.
You can keep the button type submit and can override the default form submission behavior on submit button click via event.preventDefault()
<form id="my-form" onSubmit="myFunction(event)">
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="submit" value="Insert your datas" onclick="insert()">
</form>
This your function which will be called on form submission.Access the form via its id and call validate to check form for errors.
Calling validate will trigger validation on every element in the form. It accepts a callback function callback(success) which will be called after validation.
function myFunction(e){
e.preventDefault();
$("#my-form").validate(callbackFunction);
// call your other function
}

HTML Form Submission Issues

I'm working on a basic landing page with a one-field form. It's my first foray into forms so forgive me if this is basic or obvious.
Here's the code for the form:
<form action="#" method="post" onsubmit="alert('Thank you - we'll send an invite soon.')">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="button" value="Submit"/></p>
</form>
As you can see, it's pretty basic. However, the submit button doesn't work; you have to press enter to submit the form. On top of that, I can't get the onsubmit alert to work either. I've tried a thousand different configurations with minimal success, and I'm at the end of my rope.
Change the button type to submit
<input name="Submit" type="submit" value="Submit"/>
Change the Button type to submit and also fix your Javascript, you have an extra apostrophe:
<form action="#" method="post" onsubmit="alert('Thank you - we will send an invite soon.');">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="submit" value="Submit"/></p>
</form>
type="button" isn't a submit button. It's a "does nothing" button that you can hang JavaScript from.
You are looking for type="submit".
Since You want to submit a form you mast use input type = submit . For example:
<input type="submit" value="Submit"/>
You can also use
<button type="submit"> Submit </button>

Submit two forms with one submit button

I have two XHTML forms (below). I am looking for a way to submit the two forms with one submit button.
First Form Below
<form method= "post" action= "forum_add_111438076.xhtml" >
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First
Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Second Form
<form method="post" action="forum_add_111438075.xhtml" >
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Each form above has its own submit button, but I want to use only one submit button.
You cannot simultaneously submit two forms at once. (like one webpage cannot go to two)
One way around this would be to use Ajax and submit the forms one after another.
Some Example Code. (using jQuery)
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form id="form1">
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<form id="form2">
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<input type="submit" name="submit" onclick="submitAction()" />
Javascript
submitAction() {
$.post('forum_add_111438076.xhtml', $('#form1').serialize())
$.post('forum_add_111438075.xhtml', $('#form2').serialize())
}
It's not exaclty possible to submit two forms at once to two different places.
The best thing you can do, if you require seperate processing, is to use your receiving page to gather the secondary form post, and send that along to the secondary processing page. PHP using CURL is perfect for something like that.
If you use the get or an ajax function it will allow you to know when the first or second form is completed. Using the get you would use .done if you use ajax you will use the .success Once your first form has completed the submission, you can then submit your other form as shown below.
//Submit your First form
$.get("postOne").done(function(){
//When your first form is completed you can then submit your second form.
$.get("postTwo").done(function(){
});
});

Trying to sort out multiple submit buttons

How do I sort out multiple submit buttons, I am trying to run a javascript call "pull()" when user submit play button and i want to run php call "score.php" when user submit save button.
<form id="slotbox" name="slotbox" onsubmit="pull(); return false;">
<input class="Playbutton" id="PlayButton" type="submit" name="play" value="Play" />
<form action="score.php" method="POST">
<p>score<input name="money" type="text" /></p>
<input id="save" name="save" type="button" value="save"/>
</form>
</form>
What do i need to add/modify the code to make it work.Any advice will be grateful.
If you have multiple submit buttons, you can use the formaction attribute of the buttons to override the form's action tag:
<form id="slotbox" name="slotbox" >
<input class="Playbutton" id="PlayButton" type="submit" onclick="pull(); return false;" name="play" value="Play" />
<p>score<input name="money" type="text" /></p>
<input id="save" name="save" type="submit" formaction="score.php" value="save"/>
</form>
I've also removed the onsubmit attribute of the form, and moved its code to the onclick attribute of the Play button, because the onsubmit code runs before submitting to the action or formaction URLs.

Categories