I would like to make a button link to another page. Furthermore, I would like to include some data in the url. The onclick method works, but I was trying to do it without JavaScript. The form submit method almost works, but does not send the data (id1 and id2). Any suggestions? Is it best to use JavaScript? Thank you
<input type="button" value="Clickable Button - onclick" onclick="window.location.href='http://www.google.com?id1=123&id2=345'" />
<form action="http://www.google.com?id1=123&id2=345"><input type="submit" value="Clickable Button - Submit" /></form>
You need to add some hidden fields to your <form>:
<form action="http://www.google.com">
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
<input type="submit" value="Clickable Button - Submit" />
</form>
Below is a non-js solution:
<form method="get" action="http://www.google.com">
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
<input type="submit" value="Clickable Button - Submit" />
</form>
<form action="http://www.google.com">
<input type="submit" value="Clickable Button - Submit" />
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
</form>
A better alternative, though, is to use a normal link and use CSS to style it look like a button if necessary. Links Want To Be Links.
Related
This is my HTML code:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="email" id="emailId" />
<input type ="number" id="phoneNumber" />
<input type="submit" onclick="userdetails();" />
</form>
How i can implement this in contact form 7 of my wordpress website. Also i have multiple forms on same page so please help how i can target a specific form with the above mentioned attributes..???
Here is how you can achieve it :
<form id="form1">
<input type="text" id="userInput">
<input type="email" id="emailId" />
<input type ="number" id="phoneNumber" />
<input type="button" onclick="userdetails();" value="Details"/>
</form>
<form id="form2">
<input type="button" onclick="form1.submit()" value="Send" />
</form>
Explanation :
I have replace type="submit" by type=button so that it doesn't submit the form.
If you need to submit a form you can proceed this way onclick="form_id.submit()".
So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.
Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method
How do i add some form of JQuery solution to the below code so that users are using the redirect but instead have a nice response back saying 'Thanks for subscribing'?
Also, is this the best way - The JQuery solution? Or should i try JS
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1337" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="blah" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="1237" />
<input type="hidden" name="meta_adtracking" value="blah" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<input type="text" name="name" autocomplete="off" required placeholder="First name">
<input type="text" type="email" name="email" required placeholder="Your Email">
<input type="submit" name="submit" value="Subscribe">
</form>
Edit - But have it be presentable, i.e. I want to put the text within a DIV, not Alert the user with a pop up or redirect them to my page.
$("form").submit(function(){
alert("Thanks for subscribing");
});
edit ##
Stack overflow jQueryUI Modal confirmation dialog on form submission
I have html which is something like, not exactly like this, but just to give you an idea.
<input type="text" disabled="disabled" name="ip" />
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
the IP field is disabled, I want to put a button right next to it, which will enable the field without refreshing the page.
Can you please help me do this?
Thanks in advance
<input type="text" disabled="disabled" name="ip" id='ip' />
<input type="button" name="control" id="control" />
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
Now put jquery code at end of file
$( "#control" ).click(function() {
$('#ip').toggleDisabled();
});
try this one:
<input type="text" disabled="disabled" name="ip" id="ip" />
<input type="button" value="Refresh" onclick="$('#ip').attr('disabled',false);">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
Give ID for your textbox.
<input type="text" disabled="disabled" name="ip" id="YourID"/>
And in jquery :
$(document).ready(function(){
$('#YourButtonID').click(function(){
if($('#YourID').prop('disabled'))
$('#YourID').prop('disabled', false)
else
$('#YourID').prop('disabled', true)
//Do nothing if not required.
});
})
Consider your buttons as shown below:
<input type="text" disabled="disabled" name="ip" /> <input type="button" id="myButton" />
Now, on clicking button right next to it you have to remove the disabled attribute of ip button in jquery as:
$("#myButton").click(function(){
$("input[name='ip']").removeAttr('disabled');
});
That's it..!!
You can use attr("disabled",false) to remove disabled attribute
Demo
you can try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function enable(){
$('#ip').prop("disabled",false);
}
</script>
<input type="text" disabled="disabled" name="ip" id="ip" />
<input type="button" value="Refresh" onclick="enable();">
Check this javascript for a working example and a possible solution using javascript.
Check this jQuery 1.6+ using jQuery 1.6+.
If you want to use jQuery 1.5-, just change prop by attr.
Hope it useful!
I have foloowing form:
(part of the code here)
<form id="form1" ...>
<input name="field1" value="1" type="hidden" />
<input name="field2" value="2" type="hidden" />
<div dojo-data-type="dijit.dialog">
<input name="field3" value="3" type="hidden" />
<button id="btn" dojo-data-type="dijit.button" onClick="submitForm('form1')">
</div>
</form>
if I click the button "btn", i have in POST-collection ONLY fields "field1" and "field2", but not "field3". Waht's the problem? Thank you
If you walk the DOM's form children, the dialog elements will be absent; they end up down the bottom of the DOM. Inspect the page elements to verify.