CODEWITHSUNDEEP
javascriptjqueryhtml
Camilo Rincón
Camilo Rincón

Reputation: 69

Form action change with JQuery

I need each click the button, the form action change correctly

But if I click others buttons the form action it accumulates, example

 <form action="http://localhost:8000/3/approved/4/approved" method="POST" id="form-request">

 <button type="button" class="clr-empty" data-id="3">Prestar ambiente</button>
 <button type="button" class="clr-empty" data-id="4">Prestar ambiente</button>
 <button type="button" class="clr-empty" data-id="5">Prestar ambiente</button>

I want the form action like this, change correctly with each click on the button

<form action="http://localhost:8000/3/approved" method="POST" id="form-request">

JQuery

 $('.big-content').on('click', '.clr-empty', function(e){
    e.preventDefault();
        $form   = $('#form-request');
        $faction = $('#form-request').attr('action');
        $fid     = $(this).attr('data-id');

        //This set form action
        $('#form-request').attr('action', $faction+'/'+$fid+'/approved');
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
        .on('click', '#asd', function() {
            $form.submit();
    });
});

Upvotes: 2

Views: 5882

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You are asking to accumulate, so it gets accumulated. If you are sure about the first part, you can hardcode it like this:

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // This set form action
  $('#form-request').attr('action', "http://localhost:8000/" + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

If you want the URL to be dynamic, you can use:

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // Construct the URL dynamically.
  var url = window.location.href.split("/");
  url = url[0] + "//" + url[2] + "/";

  // This set form action
  $('#form-request').attr('action', url + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

The above two methods apply only if the URL is same as the domain from which the page is served. If not, you can construct the URL from the form's action.

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // Construct the URL dynamically.
  var url = $form.attr("action").split("/");
  url = url[0] + "//" + url[2] + "/";

  // This set form action
  $('#form-request').attr('action', url + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

Also, just noticed you don't need to select the form again. So your final code will be:

$('.big-content').on('click', '.clr-empty', function (e) {
  e.preventDefault();
  $form = $('#form-request');
  $fid = $(this).attr('data-id');

  // Construct the URL dynamically.
  var url = $form.attr("action").split("/");
  url = url[0] + "//" + url[2] + "/";

  // This set form action
  $form.attr('action', url + $fid + '/approved');
  $('#confirm').modal({
    backdrop: 'static',
    keyboard: false
  })
  .on('click', '#asd', function() {
    $form.submit();
  });
});

Upvotes: 3

Related Questions